【CSDN】十大必须掌握的 Chrome 浏览器开发者工具( 二 )

截屏
我们经常需要与其他人分享截图来验证更改。如果你不得不重复多个步骤，这个任务可能会消耗时间：

打开第三方应用程序
选定裁剪的部分
保存图片并发送

这可以在 DevTools 内部完成。你可以从整个页面、单个节点(被选中的节点)或视图中创建图像：

本文插图
在 DevTools 中创建截图黑盒假设你正在调试一个问题，并且你的代码中有两个断点。你正在进行堆栈跟踪，你会发现堆栈信息中大多数来自核心框架文件，如 React 或 jQuery 。为了避免在调试器中包含这些核心文件，你可以对它们进行黑盒处理，这意味着 DevTools 将跳过这些文件，以便你可以专注于自己的代码。

本文插图
Devtools 中的脚本黑盒本地覆盖本地覆盖是我最喜欢的一个，我发现自己使用它越来越频繁。它是一个强大的工具，使你能够加载生产文件的本地副本，并使用它们来替代捆绑的副本。当一个问题只发生在特定的环境中而不能在本地复现时，这一点尤其有用。你可以在“Source” 选项卡下启用 "Overrides"（重写）。如果你没有看到 Overrides 链接，点击 Page 右侧的锯齿图标。你可以将漂亮的打印文件复制到你本地文件并对其进行扩展。重写将通过页面重新加载保持。

本文插图
在 DevTools 中覆盖文件Lighthouse 我发现自己一直在使用 Lighthouse 面板，这是为了审计你的网站在各种指标：性能， PWA ，可访问性，或搜索引擎优化。你还可以选择审计不同的设备以及模拟网络连接，它为你提供了哪些可以改进以及如何改进的参考。你可以在“Audits” 选项卡下进入“灯塔” ，如果你没有看到标签，只需点击锯齿符号来显示隐藏的标签。生成报告后，可以将结果保存为 JSON 文件，稍后导入以进行比较。

本文插图
上面是必须知道的 10 个 Chrome 开发工具特性，它们帮助我简化了工作流程，并且在更短的时间内完成了更多的工作。你每天使用的 Chrome 开发者工具的功能是什么? 请在评论中告诉我们。原文：https://medium.com/better-programming/10-must-know-features-of-chrome-devtools-94e4a4e530c5 作者简介：Ferenc Almasi ，匈牙利前端开发者，热衷于开发和设计新的交互式应用程序。他还喜欢尝试新技术，创造简单而有吸引力的东西。译者：明明如月，知名互联网公司 Java 高级开发工程师， CSDN 博客专家。【End】
推荐阅读【【CSDN】十大必须掌握的 Chrome 浏览器开发者工具】
你点的每一个在看，我认真当成了喜欢