Chrome DevTool 断点调试 DOM 节点

1、打开 Chrome DevTool：（1）按 "F12"（2）在 Chrome浏览器的右上角，点击最右侧的图标，在菜单选择“更多工具”-> “开发者工具”

3、选择 <input>标签，右键菜单选择 “Break on" -> "attribute modifications"

5、在 Console粘贴刚才复制的 Js Path，修改placeholder 属性该示例是：document.querySelector("#kw").placeholder = 'hello'

7、在刚打断点的 <h1>标签，右键菜单选择 "Copy" -> "Copy Js Path&鳎溻趄酃quot;在 Console粘贴刚复制的标签，并为其赋予一个变量。本示例是：var tmpTxt2 = document.querySelector("#s_kw_wrap > h1:nth-child(3)");

9、总结：当我们需要对DOM节点进行调试时，可以使用 3 种断点调试方法。