其他
十大必须掌握的 Chrome 浏览器开发者工具
The following article is from CSDN Author Ferenc Almasi
IT服务圈儿
有温度、有态度的IT自媒体平台
Chrome 提供的一些调试功能,在排查代码故障时非常有帮助。事实上,由于谷歌浏览器提供的调试工具太多,很多都被隐藏了起来,等待你去探索。
声明:本文已获作者Ferenc Almasi翻译授权。
以下为译文:
在这篇文章中,我收集了 10 个我经常使用但是别人可能不知道的功能。它们帮助我简化了工作流程,可以在更短的时间内完成更多的工作。
1
日志保持这里先从在控制台中保持日志说起。假设在重新加载页面之前或导航发生时出现了问题,你会尝试登录控制台,但所有内容都被清除了。解决方法很简单,但我很久以前就不知道了:
2
事件监听器的断点
3
DOM 操作的断点
4
代码覆盖率
5
展示重新绘画不必要的重绘也会导致性能问题。假设你的页面上有一个倒计时,每次更新都会导致整个页面重新绘制。你可以通过在 Render 选项卡中启用 "paint flashing" 来解决这些问题,并查看哪些元素触发了这些问题。同样,Ctrl + Shift + P 会弹出工具栏。
6
动画审查
7
截屏
打开第三方应用程序 选定裁剪的部分 保存图片并发送
8
黑盒假设你正在调试一个问题,并且你的代码中有两个断点。你正在进行堆栈跟踪,你会发现堆栈信息中大多数来自核心框架文件,如 React 或 jQuery。为了避免在调试器中包含这些核心文件,你可以对它们进行黑盒处理,这意味着 DevTools 将跳过这些文件,以便你可以专注于自己的代码。
9
本地覆盖本地覆盖是我最喜欢的一个,我发现自己使用它越来越频繁。它是一个强大的工具,使你能够加载生产文件的本地副本,并使用它们来替代捆绑的副本。当一个问题只发生在特定的环境中而不能在本地复现时,这一点尤其有用。你可以在“Source” 选项卡下启用 "Overrides"(重写)。如果你没有看到 Overrides 链接,点击 Page 右侧的锯齿图标。你可以将漂亮的打印文件复制到你本地文件并对其进行扩展。重写将通过页面重新加载保持。
10
Lighthouse我发现自己一直在使用 Lighthouse 面板,这是为了审计你的网站在各种指标:性能,PWA,可访问性,或搜索引擎优化。你还可以选择审计不同的设备以及模拟网络连接,它为你提供了哪些可以改进以及如何改进的参考。你可以在“Audits” 选项卡下进入“灯塔”,如果你没有看到标签,只需点击锯齿符号来显示隐藏的标签。生成报告后,可以将结果保存为 JSON 文件,稍后导入以进行比较。
*版权声明:转载文章和图片均来自公开网络,版权归作者本人所有,推送文章除非无法确认,我们都会注明作者和来源。如果出处有误或侵犯到原作者权益,请与我们联系删除或授权事宜。