Javascript 如何在 Chrome 中设置 DOM 断点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10826916/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to set DOM Breakpoints in chrome
提问by robert king
I'm trying to follow the tutorial here.
我正在尝试按照此处的教程进行操作。
I'm stuck on the section DOM Breakpoints(near the bottom).
我被困在DOM 断点部分（靠近底部）。
I went to the example sitethey are talking about. I pressed ctrl+shift+iand navigated to "elements" tab. In the elements tab I found the following html section:
我去了他们正在谈论的示例站点。我按ctrl+ shift+i并导航到“元素”选项卡。在元素选项卡中，我找到了以下 html 部分：
<div id="profileCard" style="position: absolute; left: 403px; top: 135px; visibility: hidden; display: none; " class="goog-hovercard">
</div>
Now I'm stuck trying to find the context menu:
现在我被困在试图找到上下文菜单：
Bring up a context menu on the #profileCard element and select the events you want to break on: subtree modifications, attributes modifications, and the node removal
在#profileCard 元素上调出上下文菜单，然后选择要中断的事件：子树修改、属性修改和节点删除
Here is a screenshot to show where I am:
这是显示我在哪里的屏幕截图：
采纳答案by Ryan
To set break points in Chrome bring up the inspector like you have shown above and click on the scripts option at the top. This will allow you to look at the scripts being used on the page and to insert break points on that page. As well as step through them and other useful debugging options.
要在 Chrome 中设置断点，请像上面显示的那样打开检查器，然后单击顶部的脚本选项。这将允许您查看页面上正在使用的脚本并在该页面上插入断点。以及逐步完成它们和其他有用的调试选项。
The above is for javascript, to break on dom elements right click on the element (inside of the inspector) that you want to break on and it will bring up the context menu that allows you to break on subtree modifications and stuff like that.
以上是针对 javascript 的，要中断 dom 元素，请右键单击要中断的元素（在检查器内），它将调出上下文菜单，允许您中断子树修改和类似内容。
回答by Hanna
Just wanted to add that you can simply right-click on an element in the elements panel and go to:
只是想补充一点，您只需右键单击元素面板中的元素，然后转到：
Break On...and select Subtree modifications, Attributes modifications, or Node removal
Break On...并选择Subtree modifications、Attributes modifications、 或Node removal
回答by Shawn Wu
- open element panel on devTools.
- inspect or find out the DOM element.
- right click on it and select break on...
- 在 devTools 上打开元素面板。
- 检查或找出 DOM 元素。
- 右键单击它并选择中断...
Subtree ModificationsA subtree modification breakpoint is triggered when a child element is added, removed, or moved.
Attributes ModificationsAn attribute modification occurs when the attribute of an element (class, id, name) is changed dynamically.
Node RemovalA node removal modification is triggered when the node in question is removed from the DOM.
子树的修改子树修改时子元素的添加，移除或移动断点被触发。
属性修改当元素的属性（类、ID、名称）动态更改时，就会发生属性修改。
节点移除当有问题的节点从 DOM 中移除时，会触发节点移除修改。
Provide a exercise link here, Enjoy :) DOM Breakpoints Exercise?
在此处提供练习链接，享受 :) DOM 断点练习？
