前端队长の技术博客
背景
在建站编辑的时候，当把添加【内容组件】添加到内容区域的第二个位置的时候，总是感觉有时候走了“内部添加”的逻辑。
因为没法调试，所以找不到原因。
后面李奕接手，找到了原因。
我也从他那里学到“线上的代码如何进行断点调试”。
一 找到运行的代码，打上断点
打开调试窗口，可以看到，我们网站的 js 代码只有一个。
然后点击左下角，格式化代码。
接着，搜索你要打断点的函数名称。
然后就可以直接打断点查看了。
在打断点调试的过程中，还可以每运行一步，在 Element 和 Console 页签，查看你需要的元素是否有变动。
调试的时候，每进行一步，结合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）”会进入到代码中并等待（如果需要）。
（完）