html文件中加入断点,HTML添加断点

1.前言

很多时候，页面的dom元素是动态添加的，而我们不知道具体是哪段js代码在操作这个dom元素，所以需要进行断点，对相应的dom元素进行断点监听，这样才能找出相关的js代码。

在浏览器的调试工具中，切到elements一栏，右键想要操作的dom元素，在弹出的菜单中选中 "Break on"，会弹出三个子选项：

subtree modifications:当此dom元素子节点发生变化时触发断点

Attribute modifications:当此dom元素属性发生变化时触发断点

node removal:当此dom元素被移除时触发断点

2.监听dom元素子节点的改变，为其设置断点

选中subtree modifications即可

这个改变包括 添加修改子元素/添加子元素/移除子元素/修改文本节点

点击改变H3的内容

添加h2标签

删除h3标签

我是H3

在这个例子中，为div#box元素设置html断点，一旦子节点发生改变，程序都会中断执行

此时上面的3个按钮，点击时都会触发断点，并跳转到相应的代码位置

3.监听dom元素属性变化，为其设置断点

选中Attribute modifications即可

属性的修改/添加/移除都会触发断点

点击改变div#box的title属性

添加class属性

删除title属性

我是H3

function changeAttr() {

document.querySelector("#box").setAttribute('title','新的title')

}

function addAttr() {

document.querySelector("#box").setAttribute('class','newClass')

}

function removeAttr() {

document.querySelector("#box").removeAttribute('title')

}

依次点击3个按钮，程序会中断并跳转到相应的位置

document.querySelector("#box").setAttribute('title','新的title')

document.querySelector("#box").setAttribute('class','newClass')

document.querySelector("#box").removeAttribute('title')

4.dom元素被移除时触发断点

给h3标签设置断点，在其被移除时触发断点

删除h3标签

我是H3

function removeH3() {

var h3 = document.querySelector("h3")

document.querySelector("#box").removeChild(h3)

}

点击按钮移除h3标签时，程序中断并跳转到相应的位置

document.querySelector("#box").removeChild(h3)

标签：box,添加,dom,元素,HTML,querySelector,document,断点

来源： https://www.cnblogs.com/OrochiZ-/p/12104625.html