Chrome Developer Tools 使用技巧随手记

1. 介绍

工欲善其事，必先利其器。对于前端开发，Chrome Developer Tools 就是前端调试的一大利器。在这里记录一些我在使用中的的经验技巧。废话少说，下面我们开始…

2. 正文

2.1 让网页和开发者工具的背景变暗

对于程序猿这个职业，每天都要长时间盯着电脑屏幕。天长日久，眼睛的疲劳在所难免，尤其是默认的白色背景，尤其显得刺眼。因此很多人把电脑默认颜色调成苹果绿，编辑器的颜色调成黑色背景以减轻对眼睛的刺激。可是Chrome上的网页和Developer Tools的默认背景还是刺眼的白色。下面介绍俩个插件分别用于调整网页和开发者工具的背景颜色。

2.1.1 网页背景

High Contrast，安装之后直接就能用。在浏览器右上角会出现图标，左键点击会出现菜单：

你可以选择从正常到灰度，反色等等各种效果，我一般用Inverted Grayscale。效果如图：

你可以针对不同的网站选择不同的效果，有些网站我们需要看到原来的颜色，比如股票走势是红还是绿。它会记住你的配置。用起来很方便。

2.1.2 开发者工具背景

网页变暗了，但developer tools 还是白的，于是到网上找了另一个Chrome 插件： “ZeroDarkMatrix Theme for Chrome”。这个用起来稍微麻烦点，得配置一下，照说明上写的：
1. 打开chrome://flags/#enable-devtools-experiments， 然后 Enable Developer Tools experiments
2. 重启浏览器
3. 打开developer tools settings ▶ Experiments ▶ [✔] Allow custom UI themes
4. 重新打开developer tools

这样开发者工具也变暗了，看起来舒服多了。

2.2 开发者工具字体大小

上面已经成功使得developer tools的背景变暗，但是其小字号还是看着费点儿劲。网页可以直接使用Ctrl+滚轮来缩放，但是调试JS时就不行了。网上搜了半天，有人说得用插件，有人说得手动修改Chrome默认的CSS文件。可是隐约记得我直接调整过字号呢，于是在developer tools的配置页里找了半天，还是没有，郁闷… 然后从“Sources”切换到”Elements” 视图，又试了试，居然Ctrl+滚轮好使了，而且调整后所有视图的字体都变大了，可能这是因为我们做的是缩放操作而不是真的修改了字体吧，而且貌似Sources试图把这个缩放快捷键屏蔽了（或是冲突了）。总之字大点儿好认多了。当然，如果你眼神儿好又想多显示几行代码，缩小点儿也是可以的。

2.3 直接映射并修改本地文件

调试JS code和其他程序一样，免不了运行 - 修改 - 运行 - 修改的循环。但是对于前端来说我们一般需要在编辑器里修改，在浏览器里调试，免不了来回切换窗口。Chrome developer tools支持本地文件的映射解决了这一问题。在Source视图的左上角，Network tab页边上有个”Filesystem” 进去以后可以“Add folder to workspace”添加文件夹到工作空间。如果你调试的js脚本部署在本地服务器，在这里就可以选择本地服务器的文件夹了，然后Chrome自动为你匹配文件名。这样无需切换到编辑器，直接在浏览器调试器里面就能改代码，然后Ctrl+S保存，F5刷新重新载入代码调试，方便多了。