<p><a href="/misc/goto?guid=4958546594282800774" title="Chrome"><img alt="Google Chrome开发者工具更新" src="https://simg.open-open.com/show/2ad00257c22a8d675c095ce66c436879.png" /></a></p> <p>英文原文：<a href="/misc/goto?guid=4959008958164539871">Updates to Google Chrome DevTools</a></p> <p>在 Google I/O 2017 大会上，Paul Irish 发表了一段"2017 开发者工具年度报告"，他展示了一些 Chrome 开发者工具的新特性，其中包括能够帮助开发者简化代码和处理现代 JavaScript 需求的一些新特性。</p> <p>2017 年，web 开发者们正在寻找新的方法来提升和优化网页性能，如今，用户的实际体验被视为最具有提升潜力的部分。Irish 如是说：</p> <blockquote> <p>浏览器中最流畅的代码是永远不会运行的那些代码。更好的情况是，最流畅的代码甚至是那些都没有下载下来的代码。要是我们能够提供一个视图，借助该视图可以看到网页中真正使用的代码，这岂不是很棒的事情吗？</p> </blockquote> <p>为此，Chrome 开发者工具现在提供了一个新的<a href="/misc/goto?guid=4959008958295944415">覆盖分析器（Coverage profiler）</a>，它能够显示出浏览器实际使用的 JavaScript 和 CSS 的百分比。</p> <p style="text-align:center"><img alt="Google Chrome开发者工具更新" src="https://simg.open-open.com/show/ec721c06085ff175bfcf7c54347f6985.png" /></p> <p>单击其中的一行会跳转到该文件并且显示出实际使用了文件中的哪些部分。</p> <p style="text-align:center"><img alt="Google Chrome开发者工具更新" src="https://simg.open-open.com/show/b9b9f57d6afe7fff87d4d756cc7dd3ac.png" /></p> <p>CSS 代码很有趣，因为浏览器始终都知道应用了其中的哪一部分，并且可以对页面中使用到的 CSS 代码进行独到的分析。</p> <p><a href="/misc/goto?guid=4959008958410926754">全页面截图（full-page screenshots）</a>也是一个新的功能。以前，开发人员也可以对网页进行截图，但它只能捕获当前显示出的页面。这个新功能可以对全部网页内容进行截图，而不仅仅是针对当前显示的页面。</p> <p>审计面板（Audits）已经被一个叫做<a href="/misc/goto?guid=4959008958537046408">灯塔（Lighthouse）</a>的集成工具所取代。该工具可以对页面的性能、最佳实践、可访问性以及渐进式 Web 应用进行审核。以前，该工具可用作拓展工具或者是命令行工具。灯塔工具能够通过一系列测试来运行网页，例如，通过不同的设备型号、不同的网络速度来对网页进行访问。它还能能对该网页是否符合无障碍指南进行测试，例如，对是否满足颜色对比度测试和 ARIA（Accessible Rich Internet Applications）最佳实践进行测试。</p> <p>测试结果会以一个易于阅读的报告进行展示，并且它还能够给出可行的建议。</p> <p style="text-align:center"><img alt="Google Chrome开发者工具更新" src="https://simg.open-open.com/show/509719879b2b1d643940f4a6aa01ba78.png" /></p> <p>除了提到的这些新功能，新的开发者工具还有<a href="/misc/goto?guid=4959008958660852841">许多其它新特性</a>，例如，内联对象预览以及对异步代码调试的重大改进。</p> <p>Irish 所做报告的完整视频可以在 <a href="/misc/goto?guid=4959008958773333847">油Tube</a> 上进行观看。我们会在 Chrome 59 中看到这些新特性，目前它们可以在 Chrome Canary 上进行使用。</p> <p>来自: <a href="/misc/goto?guid=4959008958876017219" id="link_source2">InfoQ</a></p>
