前端队长の技术博客

  1. 背景
  2. 总结
  3. 参考链接

背景

在建站编辑的时候,当把添加【内容组件】添加到内容区域的第二个位置的时候,总是感觉有时候走了“内部添加”的逻辑。

因为没法调试,所以找不到原因。

image

后面李奕接手,找到了原因。

我也从他那里学到“线上的代码如何进行断点调试”。

一 找到运行的代码,打上断点

打开调试窗口,可以看到,我们网站的 js 代码只有一个。

image

然后点击左下角,格式化代码。

image

接着,搜索你要打断点的函数名称。

image

然后就可以直接打断点查看了。

在打断点调试的过程中,还可以每运行一步,在 Element 和 Console 页签,查看你需要的元素是否有变动。

image

image

image

调试的时候,每进行一步,结合Element和Console,就可以定位问题。

总结

1、找到需要调试的代码,并打上断点 2、每F10单步运行后,结合Element和Console页签进行查看是否是预期结果。

参考链接

断点调试 F9,F10,F11 的区别:

—— “下一步(Step)”:运行下一条指令,快捷键 F9。 运行下一条语句。(遇到子函数会进去继续单步执行)一次接一次地点击此按钮,整个脚本的所有语句会被逐个执行。 —— “跨步(Step over)”:运行下一条指令,但 不会进入到一个函数中,快捷键 F10。(单步执行,遇到子函数并不进去,将子函数执行完并将其作为一个单步) 跟上一条命令“下一步(Step)”类似,但如果下一条语句是函数调用则表现不同。这里的函数指的是:不是内置的如 alert 函数等,而是我们自己写的函数。

“下一步(Step)”命令进入函数内部并在第一行暂停执行,而“跨步(Step over)”在无形中执行函数调用,跳过了函数的内部。执行会在该函数执行后立即暂停。

—— “步入(Step into)”,快捷键 F11。

和“下一步(Step)”类似,但在异步函数调用情况下表现不同。如果你刚刚才开始学 JavaScript,那么你可以先忽略此差异,因为我们还没有用到异步调用。

至于之后,只需要记住“下一步(Step)”命令会忽略异步行为,例如 setTimeout(计划的函数调用),它会过一段时间再执行。而“步入(Step into)”会进入到代码中并等待(如果需要)。

(完)