不常见但是有用的 Chrome 调试技巧

小鱼儿 2022-09-03 13:22 135阅读 0赞

dom

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

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

![eb406b5937a205ac24cddf51f0bb42ee.png][] 添加选中dom节点为全局变量.png

#### force node state (触发)状态 ####

> 调试**dom**的某个状态

![9f2d3e9bb362a9d0ab86ef5bf34dfdc4.png][] force 节点 state (触发)状态.png

#### copy element ####

> 拷贝选中**dom**的信息

![4b2fd4d97e5c4ee8c0ebd0f50da8e55d.png][] copy element.png

### style/class ###

#### 给选中元素添加一个 class 名 ####

> 快速给元素添加**class**

![2a0789491a3a0b92e927781240a4fec8.png][] 给选中元素添加一个 class 名.png

#### 修改元素的盒模型大小 ####

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

![75590ba45526a5a28729830655d9a05e.png][] 快速修改元素的盒模型大小.png

### network ###

#### block specific request ####

> **block**特定的请求

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

![570540d4de808df40af7217cbbba1ab2.png][] block 指定的请求.png

#### 改变请求的 user agent ####

> 修改请求的**user agent**

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

![9c972c7bf20702e303c8f1e96f69668d.png][] 改变请求的 user agent.png

### javascript ###

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

> 拦截浏览器的行为

![771860ea499987eef229e8e414e2ee0d.png][] 断浏览器的行为(比如 click、mouse 等等).png

#### 快速改变拦截的变量的值 ####

> 双击改变拦截变量的值

![43930dd27a264f865d92d2f472f7f76d.png][] 双击改变拦截的变量的值.png

#### 添加 watch 表达式 ####

> 添加**watch**表达式

![1039bc0b3afbd04b6a27c193ef64d809.png][] 添加 watch 表达式.png

#### 条件断点 ####

> 设置断点的条件

![1530b0a3bfaf0678f1cf35967d1da182.png][] 条件断点.png

#### 快速调试代码片段 ####

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

![dec6eb8c71564980a8b5c8951e38339f.png][] 片段代码调试.png

## 参考文档 ##

https://developer.chrome.com/docs/devtools/

推荐阅读

[Chrome 开发者工具各种骚技巧][Chrome]

[Chrome 上开发调试的九个技巧][Chrome 1]

关注下方「前端开发博客」，回复 “加群”

加入我们一起学习，天天进步

![4f0933fd272a31d4978c1668d0c9f20e.png][]

**如果觉得这篇文章还不错，来个【分享、点赞、在看】三连吧，让更多的人也看到~**

[eb406b5937a205ac24cddf51f0bb42ee.png]: /images/20220829/5bdb22be6a844c3a90eae136509659e9.png
[9f2d3e9bb362a9d0ab86ef5bf34dfdc4.png]: /images/20220829/1438ffcf56594e78b7e93414dea91314.png
[4b2fd4d97e5c4ee8c0ebd0f50da8e55d.png]: /images/20220829/baf7a1847696405580dbae2bbf98b250.png
[2a0789491a3a0b92e927781240a4fec8.png]: /images/20220829/778ee7801985432ab2991e0460e0d1f0.png
[75590ba45526a5a28729830655d9a05e.png]: /images/20220829/17c4ab4b13ff44489586397cd1f18d16.png
[570540d4de808df40af7217cbbba1ab2.png]: /images/20220829/d9e7dd21c13647eeb4be070d6d03bd2b.png
[9c972c7bf20702e303c8f1e96f69668d.png]: /images/20220829/85cafec92ddc4e259500d830e52b7afd.png
[771860ea499987eef229e8e414e2ee0d.png]: /images/20220829/04809f4dce3b4bc1be3dfcfd510bb1c7.png
[43930dd27a264f865d92d2f472f7f76d.png]: /images/20220829/59a361b111284e379ad4cbbfee127dc2.png
[1039bc0b3afbd04b6a27c193ef64d809.png]: /images/20220829/98fb10774f8145588b19406e040d510e.png
[1530b0a3bfaf0678f1cf35967d1da182.png]: /images/20220829/433a66afccd647eaaf32da7721162cd1.png
[dec6eb8c71564980a8b5c8951e38339f.png]: /images/20220829/d55159f276224bbfb4b66567857d0359.png
[Chrome]: http://mp.weixin.qq.com/s?__biz=MzAxODE4MTEzMA%3D%3D&chksm=83db8082b4ac099415302543f993494e612874b6361026f9f1667b1bb830ac7608d3f602b070&idx=2&mid=2650086887&scene=21&sn=70346361787fbdabc47b04a0814aefc6#wechat_redirect
[Chrome 1]: http://mp.weixin.qq.com/s?__biz=MzAxODE4MTEzMA%3D%3D&chksm=83db87acb4ac0eba5cd28cf1ad0eb8c70e041c3a4cb8e01ef9e0463f6fe2252cfc23e108db4e&idx=1&mid=2650086089&scene=21&sn=0129375fc43a39b949de09cca8f8520e#wechat_redirect
[4f0933fd272a31d4978c1668d0c9f20e.png]: /images/20220829/13fab42d863147aba51c7fc6aa54b98a.png