Chrome浏览器devtools调试工具简单笔记

1. sources面板主要包含三大块，
   
   （1）页面请求的每个文件
   （2）在1窗口选择文件后，显示该文件的内容
   （3）这里显示各种工具
2. 3号窗口各类工具
   1）Event Listener Breakpoints点开可以看到该部分显示click等鼠标事件
   
   这里我勾选click，则代码会在运行至任何click事件时暂停
   2）Scope窗口会在代码暂停时显示当前定义的变量（双击变量可编辑）
   
   3）watch窗口可以输入有效的JavaScript表达式
   1.点击 Watch 标签。
   2.点击 Add Expression 添加表达式。
   3.输入 typeof sum。
   4.按 Enter 键。 DevTools 会显示 typeof sum: “string”。 冒号右侧的值就是监视表达式的结果。
   
   4）Breakpoints 窗口可以看到你在哪些位置打了断点，在此点击复选框还可以直接取消断点
   
3. console控制台不仅能打印信息，还可以在此直接用JavaScript语句求值，前提是暂停的代码之前addend1和addend2已经被包含在内
   
4. 在代码中调用debugger相当于借用工具打断点

console.log('a');
console.log('b');
debugger;//会在该行暂停
console.log('c');

5. DOM断点
   1.转到在Elements 标签
   2.找到你要设置断点的元素
   3.右键点击，悬停在Break on上，
   
   Subtree modifications： 在移除或添加当前所选节点的子级，或更改子级内容时触发这类断点。 在子级节点属性发生变化或对当前所选节点进行任何更改时不会触发这类断点。
   Attributes modifications：在当前所选节点上添加或移除属性，或属性值发生变化时触发这类断点。
   Node Removal：在移除当前选定的节点时会触发。

只记录了我怕忘了的几个点，超赞详细基础入门操作文章链接