分享关于一些DevTools的诀窍

分享 & 半译文，部分内容已修改。

文章出处：15 DevTool Secrets for JavaScript Developers.

1. 隐身模式

访问无痕窗口时，会被浏览器当成一个全新的用户，里面不包括 cookie、localStorage、网站缓存等数据，因此非常适合用来测试系统登录、首页白屏时间等等。

隐身模式并不代表真正的“无痕”上网，比如 IP 地址、基于硬件信息生成的“指纹”仍然和平时是一样的。

2. 自动打开 DevTools

本地开发环境时，经常需要启动 Chrome，输入 localhost 地址，接着再打开 DevTools，，，其实这一系列操作可以用一行命令搞定。

最好是桌面添加个快捷方式，双击就好了：

--incognito 打开隐身窗口
--auto-open-devtools-for-tabs 打开 DevTools
要打开的 url 置于最后，比如：http://localhost:8000

$ # 整合成一条命令
$ chrome --incognito --auto-open-devtools-for-tabs http://localhost:8000

一些 Chrome 其它常用启动项：

--disable-web-security 禁用同源策略，用来跨域
--disable-extentions 禁用扩展
--user-data-dir 指定用户数据存储目录

3. 命令面板，快速执行某项功能

类似 VS Code 的命令面板，都是用快捷键 Ctrl + Shift + P 打开。输入 show 打开 panel；输入 disable 禁用 javascript 等等。

devtools command palette

palette 音[ˈpælət]。这个单词取得很魔性，译为调色板

4. 代码使用率

Chrome 的 Coverage 面板可以定位到哪些 js、css 被使用了，哪些没被使用。打开命令面板输入 coverage 简写就可快速打开它，或者在 More tools 里，然后点击面板下的 reload 图标开始统计。

devtools coverage

点击任意一行 js 文件跳转到 Sources 面板查看具体源码（建议开启 source map）。

但它只显示当前已执行的代码，大半需要用户点击触发的代码（未被使用的）也被统计进去了，尤其是 SPA 单页应用。。。不过它还是非常适合用来分析第三方库的，能清楚地看到哪些库很大却使用率很低，配合拆包和 BundleAnalyzer 简直完美！

5. 给 DOM 元素打断点

Elements 面板右键某个元素点击 Break on。

devtools dom breakpoint

几种触发断点的条件：

subtree modifications 子节点结构改变时
attribute modifications 属性变化时，比如 class、id
node removal 被移除时

缺点是仅适用于直接操作 DOM 的写法，对基于 Virtual DOM 的差异而操作 DOM 的库没什么用，比如 react/vue。

6. 筛选网络请求

以前只知道直接输入部分 url 和“傻瓜式”点击选项筛选，现在发现阔以输入指令查询：

is:from-cache 缓存
larger-than: 大小
domain: 域名

7. 调试“小黑屋”

有点类似 VS Code 调试配置里的 skipFiles。

调试代码时点击下一步经常会执行到某个库里面，比如 react/vue，又或者某些第三方脚本，比如嵌入的 sdk，实际上我们只需要调试自己的代码。

Chrome DevTools 支持 Ignore List，命令面板输入 ignore 即可快速跳转到该设置界面：

devtools debug ignore list

也可以在 Sources 面板里右键某个文件里的代码，选择 Add script to ignore list；还可以右键代码行号选择 Never pause here。

8. Logpoint

基本上就是 console.log 的功能，但是不用手撸代码！

Sources 面板下右键代码行号选择 Add logpoint…

9. 复制 Ajax 请求

有时候和后端扯皮，让查日志不听，非得要把整个请求数据复制出来，所以只能手动 console.log 后再编译 😡 好嘛，现在知道有这功能了！

devtools copy xhr

10. 文件覆盖和代码片段

Sources 面板下几个子选项卡：Overrides、Snippets。

文件覆盖可以将修改后的文件保存到本地，然后下一次请求时会被 DevTools 自动替换为本地文件：

Overrides 选择本地文件夹。建议随便找个临时的，千万别用正在工作的文件夹！！
右键 Page 下的文件选择 Save for overrides
接下来修改、保存即可

devtools overrides

测试了下对压缩混淆后的工程没什么用。。。

代码片段类似于一个小型的文本编辑器，可以让你不用生硬地在 Console 里敲代码，很多时候见到某些 API 或在某个网站上测试，直接来两下~

devtools snippets

写完后 Ctrl + Enter 即可运行。

11. 客户端缓存 CacheStorage

注意 🗨 这是个实验中的功能！

与 cookie、localStorage、sessionStorage 不一样，它是应用于 ServiceWorker 生命周期中的缓存。示例：

// https://github.com/mdn/sw-test/blob/gh-pages/sw.js
this.addEventListener('install', function(event) {
    event.waitUntil(
        caches.open('v1').then(function(cache) {
            return cache.addAll([
                '/sw-test/',
                '/sw-test/index.html',
                '/sw-test/style.css',
                '/sw-test/app.js',
                '/sw-test/star-wars-logo.jpg',
            ]);
        });
    );
});

详见 MDN CacheStorage。

12. 模拟传感器

命令面板输入 sensor，用于模拟部分硬件信息相关数据，比如：

Location 地理位置。navigator.geolocation
Orientation 手机屏幕方向。window.screen.orientation

devtools sensors

原文链接（博客小站引流）：www.ningtaostudy.cn/articles/bq…