Inspect and debug iframes
如果你正在处理的页面包含你想要检查和调试的iframes，你实际上可以使用DevTools来完成。在处理类似CodePen、JSFiddle或Glitch这样的网站时，这可能非常有用。
火狐浏览器
火狐浏览器在其工具栏中有一个iframes选择按钮，让你选择你想要检查的iframes。一旦选择了，检查器和控制台工具将被限定在你选择的iframes中。这意味着你只会看到你选择的iframes的DOM树和控制台消息。这也意味着你在控制台工具中执行的任何JavaScript表达式都将在内嵌框架的上下文中执行。
打开火狐浏览器的DevTools。
在主工具栏中，点击选择当前目标文档作为
iframes。选择你想要检查的
iframes。
Chrome、Edge和Safari
基于
Chromium的浏览器和Safari在控制台工具中有一个JavaScript上下文选择按钮，允许你选择要在其中执行JavaScript表达式的iframes。这个按钮不会改变元素工具中可见的内容，它只会改变控制台工具工作的JavaScript上下文。打开
DevTools。打开控制台工具。
在控制台工具的工具栏中，点击
JavaScript上下文。选择你想要在其中执行JavaScript表达式的上下文。
当DOM变化时debug脚本执行
如果你想知道页面中的
JavaScript代码是如何移除、添加或修改DOM元素的，你可以使用DevTools中的DOM断点。你可以选择在以下情况下暂停执行：子树修改：当所选元素子树中的任何元素被修改（添加、移除或更改属性）时，会暂停执行。
属性修改：当所选元素的属性被修改时，会暂停执行。
节点移除：当所选节点从
DOM树中移除时，会暂停执行。
如果你不熟悉正在调试的代码库，这将会非常有用。
要添加DOM断点：
- 导航到
Inspector/Elements面板。 - 找到你想要添加断点的节点。
- 打开上下文菜单（右键单击）。
- 打开“
Break on”子菜单，并选择你想要设置的断点类型。
一旦发生所请求的DOM修改，JavaScript执行将会暂停，并且DevTools将导航到Sources/Debugger面板，显示执行暂停的代码行。