分享关于一些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 等等。 palette 音[ˈpælət]。这个单词取得很魔性,译为调色板 4. 代码使用率 Chrome 的 Coverage 面板可以定位到哪些 js、css 被使用了,哪些没被使用。打开命令面板输入 coverage 简写就可快速打开它,或者在 More tools 里,然后点击面板下的 reload 图标开始统计。 点击任意一行 js 文件跳转到 Sources 面板查看具体源码(建议开启 source map)。 但它只显示当前已执行的代码,大半需要用户点击触发的代码(未被使用的)也被统计进去了,尤其是 SPA 单页应用。。。不过它还是非常适合用来分析第三方库的,能清楚地看到哪些库很大却使用率很低,配合拆包和 BundleAnalyzer 简直完美! 5. 给 DOM 元素打断点 Elements 面板右键某个元素点击 Break on。 几种触发断点的条件: subtree modifications 子节点结构改变时attribute modifications 属性变化时,比如 class、idnode 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 即可快速跳转到该设置界面: 也可以在 Sources 面板里右键某个文件里的代码,选择 Add script to ignore list;还可以右键代码行号选择 Never pause here。 8. Logpoint 基本上就是 console.log 的功能,但是不用手撸代码! Sources 面板下右键代码行号选择 Add logpoint… 9. 复制 Ajax 请求 有时候和后端扯皮,让查日志不听,非得要把整个请求数据复制出来,所以只能手动 console.log 后再编译 😡 好嘛,现在知道有这功能了! 10. 文件覆盖和代码片段 Sources 面板下几个子选项卡:Overrides、Snippets。 文件覆盖可以将修改后的文件保存到本地,然后下一次请求时会被 DevTools 自动替换为本地文件: Overrides 选择本地文件夹。建议随便找个临时的,千万别用正在工作的文件夹!!右键 Page 下的文件选择 Save for overrides接下来修改、保存即可 测试了下对压缩混淆后的工程没什么用。。。 代码片段类似于一个小型的文本编辑器,可以让你不用生硬地在 Console 里敲代码,很多时候见到某些 API 或在某个网站上测试,直接来两下~ 写完后 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.geolocationOrientation 手机屏幕方向。window.screen.orientation


JavaScript全屏阅读

下一篇:打酱油

上一篇:钢铁是怎样炼成的

Ctrl + Enter