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

2024-05-10 22:46:29

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

html文件中加入断点,HTML添加断点相关推荐

python中列表中增加逗号,Python 实现在文件中的每一行添加一个逗号
步骤1:读取每行(每行的类型是str) 步骤2:对每行列表化步骤3:弹出每行的/n两个字符步骤4:追加,/n三个字符代码实现如下: #import os From_file=open('D:\\ ...
Android系统下在te文件中为指定服务添加sepolicy权限
[正文] 设备在播放视频时有异常,使用Logcat查看日志时发现了如下记录: 04-27 14:01:59.136 2825 2825 E SELinux : avc: denied { find } ...
outlook中可以添加html代码,在ICS文件中为Outlook预约添加HTML
我正在尝试创建日历邀请并希望在附加的ICS文件中添加HTML内容.在ICS文件中为Outlook预约添加HTML 下面的代码不起作用: - private static byte[] CreateiC ...
注册表的作用、bat文件中REG ADD命令添加注册表项以及bat
注册表的用途与设置注册表是windows的核心,里面储存着大量的系统信息,说白了就是一个庞大的数据库.如果你不懂什么是数据库,那没关系,不影响你了解注册表,不过最好对数据库有所了解.注册表里面所有的 ...
关于将txt文件中的数据批量添加到excel中，显示不全的问题
问题:当不同的txt文件是由大量的数据列组成时(数据以分隔符或空格隔开的情况),若合并其中的几个txt文件,需要将其保存到excel表格中进行合并,但是,当数据小数点位数比较多时,由于电脑及软件的默认 ...
Java模拟登陆，将文件中的单词自动添加到扇贝生词本
package autoAdd2扇贝;import java.io.BufferedReader; import java.io.FileReader; import java.io.IOExcept ...
学习前端开发中的JS调试技巧(断点)
http://seejs.me/2016/03/27/jsdebugger/ alert() console.log(xxxx) JS断点调试 JS断点调试,即是在浏览器开发者工具中为JS代码添加断点 ...
怎么在PDF文件中添加页脚
在PDF文件中除了页眉还有页脚,页眉可以很好的让读者迅速关注到你的文章内容主题,而页脚则可以给读者在读完文章后再次加深影响.怎么在PDF文件中添加页脚呢? 步骤如下: 1.在百度中关键词搜索迅捷PDF ...
Windows存储串口数据至txt文件中的教程及代码
我们在做有关通信或其他实验.嵌入式开发时,常用到串口通信,但现成的串口调试助手都是只有在窗口中显示电脑串口接受到的数据. 下面我们从零开始,讲解如何自己动手编程一个串口调试助手,并将收到的数据存储在指 ...

最新文章

热门文章