chrome os flex（十大必须掌握的 Chrome 浏览器开发者工具）
如何打开美丽水世界主机必须掌握的十大Chrome浏览器开发者工具？
Chrome提供的一些调试功能对于解决代码故障非常有帮助。其实是因为Google浏览器提供的调试工具太多了，很多都是隐藏的，等着你去探索。
声明本文由作者Ferenc Almasi翻译。
作者|费伦茨阿尔马西
译者|明明月如，编辑|郭蕊
标题图|东方IC下载的CSDN
出品| csdn (ID: csdnnews)
以下为译文
Chrome DevTools团队每月在https://developers.google.com/web/updates/capabilities,的网站上发布更新，你也可以在他们在https://twitter.com/chromedevtools.的官方Twitter账户上找到一些很棒的提示。如果你想了解更多关于Chrome提供的工具的信息，我强烈建议你查看这两个来源。
在这篇文章中，我收集了10个我经常使用但别人可能不知道的函数。它们帮助我简化工作流程，在更短的时间内完成更多工作。
日志保持
让 让我们从在控制台中保存日志开始。假设在重新加载页面之前或导航发生时出现问题，您将尝试登录到控制台，但一切都被清除。解决 很简单，我没有。很久以前我不知道
在控制台中保存日志
事件侦听器的断点
通常，当用户交互发生时，问题就会出现。捕获这些事件来检查在交互中哪里运行了什么非常有帮助。幸运的是，我们可以通过访问Sources选项卡，用Ctrl P打开一个js文件，并检查相关的事件
向事件侦听器添加断点
DOM 操作的断点
还可以为DOM操作添加断点。通常，当一个节点接收到一个属性改变时，比如添加一个类，你可以中断这个点。在大型代码仓库中搜索相关代码会花费大量时间。事实上，您可以简单地给元素添加一个断点，剩下的交给DevTools。
为DOM节点操作添加断点
代码覆盖率
有时候我们优化代码的性能，会导致很多没用的代码却没有及时清理。借助覆盖工具，您可以分析资源并查看哪些行没有被执行。如果你不 不要在意所有的互动，只有进行你在意的互动才会帮助你获得精准的覆盖。可以点击Ctrl Shift P打开工具面板，然后点击重新加载图标开始录制。所有显示为红色的内容将不会被执行。
使用DevTools查看代码覆盖率
显示重画
不必要的重绘也会导致性能问题。假设你的页面上有一个倒计时，每次更新都会导致整个页面被重绘。您可以通过启用\ 油漆闪光\ 并查看哪些元素触发了这些问题。
同样，Ctrl Shift P会弹出工具栏。
在“渲染”选项卡上启用重画。
动画审查
由于渲染已经在上面讨论过了，让 让我们看看如何调试CSS动画。用Ctrl+Shift+P打开工具菜单，然后输入 动画和电影。。它将为你打开动画标签，这将记录网站上发生的任何动画。您可以回放它们以查看它们有多松散，然后根据时间或持续时间来调整它们
在DevTools中调试动画
捕捉屏幕
我们经常需要和别人分享截图来验证修改。如果您必须重复多个步骤，此任务可能需要一些时间
打开第三方应用程序
选择裁剪部分。
保存图片并发送
这可以在DevTools内部完成。您可以从整个页面、单个节点(选定节点)或视图创建图像
在DevTools中创建截图
黑盒子
假设您正在调试一个问题，并且您的代码中有两个断点。你在跟踪栈，你会发现大部分栈信息来自核心框架文件，比如React或者jQuery。为了避免在调试器中包含这些核心文件，您可以将它们黑盒化，这意味着DevTools将跳过这些文件，以便您可以专注于自己的代码。
在Devtools中编写黑盒脚本
本地覆盖
本地报道是我最喜欢的一个，我发现自己越来越频繁地使用它。它是一个功能强大的工具，使您能够加载生产文件的本地拷贝，并使用它们而不是捆绑拷贝。当问题只发生在特定的环境中并且不能在本地重现时，这尤其有用。
您可以启用\ 覆盖\ 在 源与源。标签。如果你不 如果看不到覆盖链接，请单击页面右侧的锯齿图标。您可以将漂亮的打印文件复制到您的本地文件中并展开它们。页面重载将保持覆盖。
覆盖DevTools中的文件
灯塔
我发现自己一直在用灯塔面板，就是用各种方式审核你的网站。
指标性能，PWA，可访问性，或搜索引擎优化。你还可以选择审计不同的设备以及模拟 连接，它为你提供了哪些可以改进以及如何改进的参考。你可以在“Audits” 选项卡下进入“灯塔”，如果你没有看到标签，只需点击锯齿符号来显示隐藏的标签。生成报告后，可以将结果保存为 ON 文件，稍后导入以进行比较。
上面是必须知道的 10 个 Chrome 开发工具特性，它们帮助我简化了工作流程，并且在更短的时间内完成了更多的工作。
你每天使用的 Chrome 开发者工具的功能是什么? 请在评论中告诉我们。
原文https://medium.com/better-programming/10-must-know-features-of-chrome-devtools-94e4a4e530c5
作者简介Ferenc Almasi，匈牙利前端开发者，热衷于开发和设计新的交互式应用程序。他还喜欢尝试新技术，创造简单而有吸引力的东西。
译者明明如月，知名互联网公司 Java 高级开发工程师，CSDN 博客专家。
google chrome浏览器 chrome浏览器开发者工具快捷键