一些你可能不知道但是有用的 chrome 调试技巧

傷城~ 2022-10-05 11:53 249阅读 0赞

![44af8c896d3c5ec0ebd9736a8373cbc2.png][]

# 来源：seventhMa    #

https://juejin.cn/post/6963600839587921927

### dom ###

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

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

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

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

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

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

#### copy element ####

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

![c119ca099f6b65bcc56b268206b59359.png][] copy element.png

### style/class ###

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

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

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

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

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

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

### network ###

#### block specific request ####

> **block**特定的请求

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

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

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

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

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

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

### javascript ###

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

> 拦截浏览器的行为

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

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

> 双击改变拦截变量的值

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

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

> 添加**watch**表达式

![cafd29fbd0f6f1aff9eb1e7f9b32431d.png][] 添加 watch 表达式.png

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

> 设置断点的条件

![5d75d3c0569cb972df456115a54a5b0d.png][] 条件断点.png

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

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

![0620bfa2ed76f25b8920a83de002eaab.png][] 片段代码调试.png

## 参考文档 ##

*  Chrome DevTools

[44af8c896d3c5ec0ebd9736a8373cbc2.png]: /images/20221005/44d509694e5640a3b70299e867bb3219.png
[12bc90643feab82749c1a653667a0a16.png]: /images/20221005/e11ae28746c64e3884746ca30c3dd9d4.png
[5c04715feda463a3e5691cc3cebf258d.png]: /images/20221005/2f2b451803fd4054997242334575fd61.png
[c119ca099f6b65bcc56b268206b59359.png]: /images/20221005/fdc59ffa45704758ab3aabf6891b4771.png
[c8cf42e0eaaf9ec5c8f11f75b9f6a00c.png]: /images/20221005/524f65a774dc4b5996b107938c2bdcd0.png
[9940ae4fb05255c0c6c71fb9a98b8bca.png]: /images/20221005/2977f9ceb2ac4e7cb1ce296c16acd955.png
[f28cfb602c60787011c24f5b2d7c8f9f.png]: /images/20221005/2259c68ef2ae46f6beb6fe35bf60eec2.png
[4c2bbaf147ba90da95f82b49d60113b3.png]: /images/20221005/0eea4028042d4b5ebe2dfabe21f82b21.png
[8c49bc78a1d6e7ead0ee68f4f34696d7.png]: /images/20221005/748e39e0c3e147daa600d253081e5b1f.png
[5396780fca5fcad365385abd99875777.png]: /images/20221005/1b5847301a1d4d20af127daad8390bf9.png
[cafd29fbd0f6f1aff9eb1e7f9b32431d.png]: /images/20221005/437963b13ec244449f9be2b4beff6ff9.png
[5d75d3c0569cb972df456115a54a5b0d.png]: /images/20221005/04d0cba029c9479c98c79ef3e085c026.png
[0620bfa2ed76f25b8920a83de002eaab.png]: /images/20221005/38163990254d41c2a59d2ca9d897c8e4.png