生活馆

本文同步自己掘金渠道的文章：

上篇的文章JavaScript两个快速调试的技巧，有些掘友留言说意犹未尽，那么咱们再来说说些其他的技巧

假如你是一个前端开发者，你触摸浏览器的时刻会占用你工作时刻的一半，乃至更多。那么咱们引荐你运用谷歌浏览器，它是前端开发利器之一

开题前，请你更新谷歌浏览器的版别到最新。

截止本文发布，不才window上谷歌浏览器为最新版别-版别85.0.4183.121（正式版别）（64位），mac上谷歌浏览器为最新版别-(OfficialBuild)(64-bit)

感兴趣的同伴能够看看官网的更新记载googleweb

下面直接进入正题

以下的操作都是在mac的谷歌浏览器上进行的。window上迥然不同，请自行脑补~

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

leti="jia"leti="reng"//报错//UncaughtSyntaxError:Identifier'i'hasareadybeeclared仿制代码

晋级后，重复声明不会报错，处理了在一个操控面板里边console调试中不能掩盖同一个变量的烦恼。

网页恳求服务器，有时期建议的恳求太多，咱们想知道哪些恳求回来堵塞了。咱们能够对恳求的网络进行过滤，来定位问题。

在调试DOM元素的时期，咱们现已聚集到相关的DOM结构上了，可是对应的元素并没有在可视窗口上展现，那么咱们能够将其快速翻滚到可视窗口。

在进行调试的时期，咱们手头上没有那么多设备。特别是开发移动端的猿儿，在没有足够调试机的状况下，咱们就靠调试东西进行模仿。那么，除了谷歌浏览器默许设备的几个值，比方iPhoneX,iPad。咱们还能够自定义自己须要的设备。

咱们增加一个一个尺度为300*800且DPR为3的设备。

之后，在调试设备的时期，咱们能够挑选预设设备进行预览～

咱们不能把控用户运用咱们产品的网络下载速度，所以咱们得模仿不同网速下面的产品体现状况，以查看咱们对产品的优化是否契合预期作用。同理，咱们也能够自定义网络的情况，一般状况下默许是online。

communication省心省力的准则之一是：图文并茂地交流。在跟上下贱的人员进行交流的时期，琢磨产品的途中，少不了对一个产品的截图。

作为一个开发者，你还在运用截图东西或聊天东西进行操作？咱们有愈加便利的计划～

7.1捕获全屏快照

下面是截取自己掘金个人资料页面的图片。在进入个人资料页面后，设置成移动设备调试，之后在操控台上依照上面的过程履行capturefullsizescreenshot，即可生成完好的个人资料页面图片。

当然，咱们运用部分截图愈加频频，那就运用到了下面的小技巧。

7.2捕获部分快照

我挑选掘金个人资料的头像部分进行截取演示～

正确操作后，截取到的便是方针审阅元素，如下图：

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

嗯～就此打住吧，写了不少了～

等等，才八个技巧罢了么，得加一条

BecauseNINEismyluckynumber.

在开发调试中，默许主题不免让眼睛审美疲劳。并且，作为一个开发者，要高冷，高冷，高冷暗黑色调妥妥的。经过下面的操作，你能够挑选合适自己的风格。