【Chrome】871- 9 个常用 Chrome 调试技巧

落日映苍穹つ 2022-10-30 02:25 247阅读 0赞

![format_png][]

作者：Jimmy，链接：https://juejin.im/post/6881439870380834830

如果你是一个前端开发者，你接触浏览器的时间会占用你工作时间的一半，甚至更多。那么我们推荐你使用谷歌浏览器，它是前端开发利器之一????开题前，请你更新谷歌浏览器的版本到最新。截止本文发布，鄙人`window`上谷歌浏览器为最新版本 - **版本 85.0.4183.121（正式版本）（64 位）**，`mac`上谷歌浏览器为最新版本 - **Version 85.0.4183.121 (Official Build) (64-bit)**

> 问：为啥要更新？答：一是为了统一操作讲解；二是产品升级总会解决些遗留的问题吧，技术向前看

感兴趣的伙伴可以看看官网的更新记录????google web下面直接进入正题 ????以下的操作都是在`mac`的谷歌浏览器上进行的。`window`上大同小异，请自行脑补~

### 1. 允许重复声明 `let` 和 `class` ###

在更新版本之前，我们在谷歌浏览器上使用`let`或`class`对变量进行二次声明，会出现错误信息。如下：

let i = "jia"
    
    let i = "reng"
    
    // 报错
    // Uncaught SyntaxError: Identifier 'i' has aready been declared
    复制代码

> 导航条 => 更多图标 => Settings => About Chrome => Update

升级后，重复声明不会报错，解决了在一个控制面板里面`console`调试中不能覆盖同一个变量的烦恼。

![format_png 1][]

### 2. 过滤请求 ###

网页请求服务器，有时候发起的请求太多，我们想知道哪些请求返回阻塞了。我们可以对请求的网络进行过滤，来定位问题。

> 控制面板 => Network => filter图标 => is:running => 刷新监控的页面

![format_png 2][] filter

### 3. 展开所有的子节点 ###

在进行`DOM`节点元素调试的时候，我们需要对每个节点进行展开查看，如果只是逐个点击目标元素下面的子元素展开，耗费时间。可以尝试下面的快捷操作～

> 控制面板 => Elements => 按option + 点击要展开的元素图标

![format_png 3][] expand

### 4. 滚动元素到视图 ###

在调试`DOM`元素的时候，我们已经聚焦到相关的`DOM`结构上了，但是对应的元素并没有在可视窗口上展示，那么我们可以将其快速滚动到可视窗口。

> 控制面板 => Elements => 右击选中的DOM节点 => Scroll into view

![format_png 4][] scroll

### 5. 预设设备 ###

在进行调试的时候，我们手头上没有那么多设备。特别是开发移动端的**猿儿**，在没有充足调试机的情况下，我们就靠调试工具进行模拟。那么，除了谷歌浏览器默认设备的几个值，比如`iPhone X, iPad`。我们还可以自定义自己需要的设备。

> 控制面板 => setting图标 => Devices => Add custom device...

我们添加一个一个尺寸为**300 \* 800**且`DPR`为**3**的设备。![format_png 5][]之后，在调试设备的时候，我们可以选择预设设备进行预览～![format_png 6][]

### 6. 预设网络状况 ###

我们不能把控用户使用我们产品的网络下载速度，所以我们得模拟不同网速下面的产品表现情况，以检查我们对产品的优化是否符合预期效果。同理，我们也可以自定义网络的状况，一般情况下默认是`online`。

> 控制面板 => setting图标 => Throttling => Add custom profile...

![format_png 7][] custom\_network

### 7. 捕获快照 ###

`communication`省心省力的原则之一是：**图文并茂地沟通**。在跟上下流的人员进行沟通的时候，推敲产品的途中，少不了对一个产品的截图。作为一个开发者，你还在使用截图工具或聊天工具进行操作？我们有更加方便的方案～

#### 7.1 捕获全屏快照 ####

> 控制面板 => command + shift + p => capture full size screenshot

![format_png 8][]下面是截取自己掘金**个人资料页面**的图片。在进入个人资料页面后，设置成移动设备调试，之后在控制台上按照上面的步骤执行`capture full size screenshot`，即可生成完整的个人资料页面图片。![format_png 9][]

> ⚠️ 不限制移动端调试操作，PC端也可以，这里为了方便贴图，才选择移动端调试而已

当然，我们使用局部截图更加频繁，那就使用到了下面的小技巧。

#### 7.2 捕获局部快照 ####

> 控制面板 => 审查元素 => command + shift + p => capture node screenshot

我选择掘金个人资料的**头像部分**进行截取示范～![format_png 10][]正确操作后，截取到的就是目标审核元素，如下图：![format_png 11][]

### 8. 快速清空站点缓存 ###

有时候开发调试，我们需要清空缓存信息。与其手动一个个信息清空，还不如一步到位，直接清空这个站点的信息 ????

> 控制面板 => command + shift + p => clear site data

![format_png 12][]嗯～就此打住吧，写了不少了～等等，才**八个技巧**而已么，得加一条 ????**Because NINE is my lucky number.**![format_png 13][]

### 9. 更改调试面板主题 ###

在开发调试中，默认主题难免让眼睛审美疲劳。而且，作为一个开发者，要高冷，高冷，高冷...暗黑色调妥妥的。通过下面的操作，你可以选择适合自己的风格。

> 控制面板 => setting设置图标 => Preferences => Appearance => Theme

![format_png 14][]

![format_png 15][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 100[\+篇原创系列汇总][Link 1]

![format_png 16][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 100+ 篇原创文章

[format_png]: /images/20221024/ed61cb9e550d451ab5c69e0de5e3737e.png
[format_png 1]: /images/20221024/f4dd01607c9c4f6f8dd1589c07e0fd96.png
[format_png 2]: /images/20221024/17582b2717554253b7bbe62609dd7e0c.png
[format_png 3]: /images/20221024/49e80d47c42544bcaccad7870f203000.png
[format_png 4]: /images/20221024/7895f93015214a5ab8ade412d49c6ab9.png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9qM3ZjS0JCZEg0N1NiNWhxamZvbjRiRm1yY2IyQVpqZHRFSndqZzJyajhkbjlpYXR2TVZKRTNjdGlhd0ZnYkRuTnkwUk4wR05RSjhTRmhVc2ZOTTBQWWlhUS82NDA?x-oss-process=image/format,png
[format_png 6]: /images/20221024/ea7f5c6eb6c04bd690b555bcaf9f2b24.png
[format_png 7]: /images/20221024/295c87ae1c9e4d399da11ef8aec8ea29.png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9qM3ZjS0JCZEg0N1NiNWhxamZvbjRiRm1yY2IyQVpqZHhiUnpxZVdsQ2NwdEoxSlhBck5YZjBnRUNYdjY1M0RINm1XMzV6OFRDRVk5MGtsYXVpYTdxbUEvNjQw?x-oss-process=image/format,png
[format_png 9]: /images/20221024/57326a7448ae4308a49f29662c25b080.png
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9qM3ZjS0JCZEg0N1NiNWhxamZvbjRiRm1yY2IyQVpqZEVpYWNDU3JJNTN5Z1RpYTNLa1paQmxjZ0hySzBHQlg5b0JkMmVpYk9FMXFJNWVxR2VkeG00Mkd4dy82NDA?x-oss-process=image/format,png
[format_png 11]: /images/20221024/3bd5b6dc49564e5c8bbacf5c3b7e9461.png
[format_png 12]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9qM3ZjS0JCZEg0N1NiNWhxamZvbjRiRm1yY2IyQVpqZGRsSHRRVFhPbENWQmpBUk9ZeGtnNU5yakxZajVmbGcydFowaWNibkhkYUx0ZnNscElONE4xTFEvNjQw?x-oss-process=image/format,png
[format_png 13]: /images/20221024/cf9406084813455897bfbd5325ed4fcc.png
[format_png 14]: /images/20221024/be8145fb75bb42c99e51acdf9738cd30.png
[format_png 15]: /images/20221024/c71016bf691446eab5b4b40a4949698e.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[format_png 16]: /images/20221024/068330b4cd9b470fa63bb8828348e10c.png