点击上方 前端Q,关注公众号
回复加群,加入前端Q技术交流群
来源:前端大全
dom
添加选中dom
节点为全局变量方便需要调试多个dom
的场景
适用对dom有多次操作的场景
![](https://i-blog.csdnimg.cn/blog_migrate/9ed863a5b7d8025593f7d7c86af6706a.png)
force node state (触发)状态
调试dom的某个状态
![](https://i-blog.csdnimg.cn/blog_migrate/c41b5329c4559b2a232f4f7f045b6a24.png)
copy element
拷贝选中dom的信息
![](https://i-blog.csdnimg.cn/blog_migrate/848e73614d04d7ebf51a3733b3c906f3.png)
style/class
给选中元素添加一个 class 名
快速给元素添加class
![](https://i-blog.csdnimg.cn/blog_migrate/a6203b1dee67825282c6004410c8f68d.png)
修改元素的盒模型大小
快速修改元素的盒模型大小(margin/padding/width/height等)
![](https://i-blog.csdnimg.cn/blog_migrate/0e07666de5d8336431e37f8ea94ef38c.png)
network
block specific request
block特定的请求
快捷键:command + shift + p -> show request blocking
![](https://i-blog.csdnimg.cn/blog_migrate/26f8738f0a4d9c1c9dbc59b4167af21f.png)
改变请求的 user agent
修改请求的user agent
快捷键:command + shift + p -> network conditions 切换 user agent
![](https://i-blog.csdnimg.cn/blog_migrate/3ab80add30303780fc660a64d26199d5.png)
javascript
断点,断浏览器的行为(比如 click、mouse 等等)
拦截浏览器的行为
![](https://i-blog.csdnimg.cn/blog_migrate/73c45383d6e8f498061099b5aee3acf2.png)
快速改变拦截的变量的值
双击改变拦截变量的值
![](https://i-blog.csdnimg.cn/blog_migrate/2d0b09031e56f180c76bb94ae574520e.png)
添加 watch 表达式
添加watch表达式
![](https://i-blog.csdnimg.cn/blog_migrate/ed6695522b010fea59ddf4df956536f2.png)
条件断点
设置断点的条件
![](https://i-blog.csdnimg.cn/blog_migrate/04e1a25e2c042f4046e95711e2f02240.png)
快速调试代码片段
Snippet(片段)代码调试,不需要创建特定的页面
![](https://i-blog.csdnimg.cn/blog_migrate/2dd86276eaad9783d323acfd2ca674b3.png)
参考文档
https://developer.chrome.com/docs/devtools/
内推社群
我组建了一个氛围特别好的腾讯内推社群,如果你对加入腾讯感兴趣的话(后续有计划也可以),我们可以一起进行面试相关的答疑、聊聊面试的故事、并且在你准备好的时候随时帮你内推。下方加 winty 好友回复「面试」即可。