dom

添加选中​dom​节点为全局变量方便需要调试多个​dom​的场景

适用对dom有多次操作的场景

不常见但是有用的 Chrome 调试技巧_快捷键添加选中dom节点为全局变量.png

force node state (触发)状态

调试dom的某个状态

不常见但是有用的 Chrome 调试技巧_全局变量_02force 节点 state (触发)状态.png

copy element

拷贝选中dom的信息

不常见但是有用的 Chrome 调试技巧_条件断点_03copy element.png

style/class

给选中元素添加一个 class 名

快速给元素添加class

不常见但是有用的 Chrome 调试技巧_快捷键_04给选中元素添加一个 class 名.png

修改元素的盒模型大小

快速修改元素的盒模型大小(margin/padding/width/height等)

不常见但是有用的 Chrome 调试技巧_条件断点_05快速修改元素的盒模型大小.png

network

block specific request

block特定的请求

快捷键:command + shift + p -> show request blocking

不常见但是有用的 Chrome 调试技巧_代码调试_06block 指定的请求.png

改变请求的 user agent

修改请求的user agent

快捷键:command + shift + p -> network conditions 切换 user agent

不常见但是有用的 Chrome 调试技巧_代码调试_07改变请求的 user agent.png

javascript

断点,断浏览器的行为(比如 click、mouse 等等)

拦截浏览器的行为

不常见但是有用的 Chrome 调试技巧_快捷键_08断浏览器的行为(比如 click、mouse 等等).png

快速改变拦截的变量的值

双击改变拦截变量的值

不常见但是有用的 Chrome 调试技巧_盒模型_09双击改变拦截的变量的值.png

添加 watch 表达式

添加watch表达式

不常见但是有用的 Chrome 调试技巧_快捷键_10添加 watch 表达式.png

条件断点

设置断点的条件

不常见但是有用的 Chrome 调试技巧_盒模型_11条件断点.png

快速调试代码片段

Snippet(片段)代码调试,不需要创建特定的页面

不常见但是有用的 Chrome 调试技巧_条件断点_12

不常见但是有用的 Chrome 调试技巧_代码调试_13