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

快来打我* 2022-10-19 05:43 145阅读 0赞

点击上方 前端Q，关注公众号

回复加群，加入前端Q技术交流群

来源：前端大全

dom

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

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

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

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

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

![5f1c473f856013f1d521609ad90f77ee.png][] force 节点 state (触发)状态.png

#### copy element ####

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

![28f0a0d09f363bd179e54c63076f3531.png][] copy element.png

### style/class ###

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

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

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

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

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

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

### network ###

#### block specific request ####

> **block**特定的请求

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

![fd97b67f34ff22771dd1cd07913e1fdb.png][] block 指定的请求.png

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

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

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

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

### javascript ###

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

> 拦截浏览器的行为

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

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

> 双击改变拦截变量的值

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

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

> 添加**watch**表达式

![5e3e2b08f62b636713ea5b9d3f931624.png][] 添加 watch 表达式.png

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

> 设置断点的条件

![323ddd1fc65981da8840c933596c11c3.png][] 条件断点.png

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

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

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

## 参考文档 ##

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

内推社群

我组建了一个氛围特别好的腾讯内推社群，如果你对加入腾讯感兴趣的话（后续有计划也可以），我们可以一起进行面试相关的答疑、聊聊面试的故事、并且在你准备好的时候随时帮你内推。下方加 winty 好友回复「面试」即可。

![452f7def70462579ccdc2f4576838ee3.png][]

[e03ae3b89e7defb872f45993ea69ec0c.png]: /images/20221005/4cf37c801f214cb6a1ada88a9ac29473.png
[5f1c473f856013f1d521609ad90f77ee.png]: /images/20221005/5201d96b7fe94f0f9f2c99d2d24c760d.png
[28f0a0d09f363bd179e54c63076f3531.png]: /images/20221005/e529d3064bf741a9bd6c9c5ff8de31f4.png
[5bfdac3903e573d318369e7322fa558b.png]: /images/20221005/76f1d8c3a80d4400a903d8eff939ed72.png
[743d90398ef5db82aa46737f6288e15d.png]: /images/20221005/d5280bfc514b4dc8adaa889b17f58208.png
[fd97b67f34ff22771dd1cd07913e1fdb.png]: /images/20221005/d309fa0946944dbfa7e84885a06bdef4.png
[c071be742b25be0be9c39b79ae571caa.png]: /images/20221005/4ce5c163251e47b788a68a44c5ecf49e.png
[34c3f1b9e58784a1775a519e99b745a5.png]: /images/20221005/a2d1e7ce25554610a4dca9722e8eaed7.png
[ac7cc46c76d955d1f1974304d981f330.png]: /images/20221005/4cc9a5fccf3e413bb63aa5951bba3b58.png
[5e3e2b08f62b636713ea5b9d3f931624.png]: /images/20221005/4b03bd0e90164713a5403b555717137f.png
[323ddd1fc65981da8840c933596c11c3.png]: /images/20221005/04910aec861442a8b19d959ca73580f1.png
[b3241bb17544548c8e50e9ef3da4b209.png]: /images/20221005/40e86d75236643af991a484650a5f570.png
[452f7def70462579ccdc2f4576838ee3.png]: /images/20221005/5500c8c873984b5ab4bad57b73cb8557.png