What's 開發人員工具的新功能 (Chrome 68)

Kayce Basques

Chrome 68 版開發人員工具的新功能：

請繼續閱讀，或觀看下方的版本資訊影片。

輔助控制台

Chrome 68 提供幾項與自動完成和預覽相關的新版控制台功能。

積極評估

在控制台中輸入運算式時，控制台現在會在游標下方顯示該運算式的結果預覽畫面。

在明確執行 sort() 作業之前，主控台會先列印該作業的結果。

圖 1. 控制台會在 sort() 作業明確執行前，先列印作業結果

如要啟用積極評估功能，請按照下列步驟操作：

  1. 開啟控制台。
  2. 開啟「管理中心設定」「主控台設定」按鈕。
  3. 勾選「Eager evaluation」核取方塊。

如果運算式會造成副作用，開發人員工具不會立即評估。

引數提示

當您輸入函式時，控制台現在會顯示函式預期的引數。

控制台中的引數提示。

圖 2. 控制台中各種引數提示範例

注意：

  • 在參數前方加上問號 (例如 ?options) 表示該參數為選用參數。
  • 在 ...items 等引數前方加上刪節號，代表傳播。
  • 有些函式 (例如 CSS.supports()) 會接受多個引數簽章。

在函式執行後自動完成

啟用「積極評估」後，主控台現在也會在您輸入函式後，顯示可用的屬性和函式。

執行 document.querySelector('p') 後，控制台現在可以顯示該元素的可用屬性和函式。

圖 3. 頂端螢幕截圖代表舊行為，底部螢幕截圖則代表支援函式自動完成功能的新行為。

自動完成功能中的 ES2017 關鍵字

管理控制台的自動完成使用者介面現已支援 ES2017 關鍵字 (例如 await)。

主控台現在會在自動完成 UI 中建議使用「await」。

圖 4. 主控台現在會在自動完成 UI 中建議使用 await

更快速、更可靠的稽核、全新的使用者介面和新稽核

Chrome 68 會隨附 Lighthouse 3.0。接下來幾節將概略說明部分重大異動。如需瞭解完整內容，請參閱「Lighthouse 3.0 發布公告」。

更快速、更可靠的稽核

Lighthouse 3.0 採用全新的內部稽核引擎，代號為 Lantern，可更快速地完成稽核作業，且每次執行的差異較小。

新使用者介面

由於 Lighthouse 和 Chrome UX (研究與設計) 團隊合作，Lighthouse 3.0 也推出了新的 UI。

Lighthouse 3.0 中的新版報表 UI。

圖 5：Lighthouse 3.0 中的新版報表 UI

新稽核

Lighthouse 3.0 也提供 4 項新的稽核：

  • 首次顯示內容所需時間
  • robots.txt 無效
  • 使用影片格式的動畫內容
  • 避免多次往返任何來源的昂貴行程

支援 BigInt

Chrome 68 支援名為 BigInt 的新數值原始類型。BigInt 可讓您以任意精確度表示整數。在控制台中試用：

控制台中的 BigInt 範例。

圖 6. 控制台中的 BigInt 範例

新增要監控的資源路徑

在暫停在暫停點時，請在「範圍」窗格中按一下屬性，然後選取「新增屬性路徑即可監看」，將該屬性新增至「監看」窗格。

新增要監看的資源路徑範例。

圖 7. 新增屬性路徑即可監看的範例

「顯示時間戳記」已移至設定

先前位於「主控台設定」「主控台設定」按鈕 中的「顯示時間戳記」核取方塊已移至「設定」。

下載預覽管道

建議您將 Chrome Canary、開發人員版或Beta 版設為預設開發人員版瀏覽器。這些預覽管道可讓您存取最新的 DevTools 功能，測試最新的網路平台 API，並在使用者發現問題前，協助您找出網站的問題！

與 Chrome 開發人員工具團隊聯絡

請使用下列選項討論新功能、更新或任何與開發人員工具相關的內容。

開發人員工具的新功能

DevTools 新功能系列文章中涵蓋的所有內容清單。