Google Chrome開發者工具更新

英文原文：Updates to Google Chrome DevTools

在 Google I/O 2017 大會上，Paul Irish 發表了一段"2017 開發者工具年度報告"，他展示了一些 Chrome 開發者工具的新特性，其中包括能夠幫助開發者簡化代碼和處理現代 JavaScript 需求的一些新特性。

2017 年，web 開發者們正在尋找新的方法來提升和優化網頁性能，如今，用戶的實際體驗被視為最具有提升潛力的部分。Irish 如是說：

瀏覽器中最流暢的代碼是永遠不會運行的那些代碼。更好的情況是，最流暢的代碼甚至是那些都沒有下載下來的代碼。要是我們能夠提供一個視圖，借助該視圖可以看到網頁中真正使用的代碼，這豈不是很棒的事情嗎？

為此，Chrome 開發者工具現在提供了一個新的覆蓋分析器（Coverage profiler），它能夠顯示出瀏覽器實際使用的 JavaScript 和 CSS 的百分比。

單擊其中的一行會跳轉到該文件并且顯示出實際使用了文件中的哪些部分。

CSS 代碼很有趣，因為瀏覽器始終都知道應用了其中的哪一部分，并且可以對頁面中使用到的 CSS 代碼進行獨到的分析。

全頁面截圖（full-page screenshots）也是一個新的功能。以前，開發人員也可以對網頁進行截圖，但它只能捕獲當前顯示出的頁面。這個新功能可以對全部網頁內容進行截圖，而不僅僅是針對當前顯示的頁面。

審計面板（Audits）已經被一個叫做燈塔（Lighthouse）的集成工具所取代。該工具可以對頁面的性能、最佳實踐、可訪問性以及漸進式 Web 應用進行審核。以前，該工具可用作拓展工具或者是命令行工具。燈塔工具能夠通過一系列測試來運行網頁，例如，通過不同的設備型號、不同的網絡速度來對網頁進行訪問。它還能能對該網頁是否符合無障礙指南進行測試，例如，對是否滿足顏色對比度測試和 ARIA（Accessible Rich Internet Applications）最佳實踐進行測試。

測試結果會以一個易于閱讀的報告進行展示，并且它還能夠給出可行的建議。

除了提到的這些新功能，新的開發者工具還有許多其它新特性，例如，內聯對象預覽以及對異步代碼調試的重大改進。

Irish 所做報告的完整視頻可以在 油Tube 上進行觀看。我們會在 Chrome 59 中看到這些新特性，目前它們可以在 Chrome Canary 上進行使用。

來自: InfoQ