如何在chrome中设置DOM断点 [英] how to set DOM Breakpoints in chrome

问题描述

我正在尝试遵循此处的教程。

I'm trying to follow the tutorial here.

我被困在 DOM断点部分（靠近底部）。

I'm stuck on the section DOM Breakpoints (near the bottom).

我去了示例网站他们在谈论我按下 ctrl + shift + 我并浏览到元素标签。在元素标签中，我发现以下html部分：

I went to the example site they are talking about. I pressed ctrl+shift+i and navigated to "elements" tab. In the elements tab I found the following html section:

<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:

在#profileCard元素上创建一个上下文菜单，并选择要破解的
事件：subtree修改，属性
修改和节点删除

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

这是一个屏幕截图，显示我的位置：

Here is a screenshot to show where I am:

< img src =https://i.stack.imgur.com/LdOKl.jpgalt =ss>

推荐答案

要在Chrome中设置断点会弹出检查器，就​​像上面显示的那样，点击顶部的脚本选项。这将允许您查看页面上使用的脚本，并在该页面上插入断点。除了通过他们和其他有用的调试选项。

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.

上面是为javascript，打破dom元素右键单击元素（在检查器内），你想打破它，它会弹出上下文菜单，让你打破子树修改和这样的东西。

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.

这篇关于如何在chrome中设置DOM断点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！