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

Kayce Basques

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

• 積極評估。輸入運算式時，控制台會預覽結果。
• 引數提示。輸入函式時，控制台會顯示該函式預期的引數。
• 函式自動完成。輸入函式呼叫 (例如 document.querySelector('p')) 後，控制台會顯示回傳值支援的函式和屬性。
• 主控台中的 ES2017 關鍵字。您現在可以在管理中心的自動完成 UI 中使用 await 等關鍵字。
• 稽核面板中的 Lighthouse 3.0。更快速、更一致的稽核、全新使用者介面和全新稽核。
• BigInt 支援。歡迎在控制台中試用 JavaScript 的新任意精確度整數。
• 在「監看」窗格中新增屬性路徑。將「範圍」窗格中的屬性新增至「監看」窗格。
• 「顯示時間戳記」已移至「設定」。

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

輔助控制台

Chrome 68 隨附幾個與自動完成和預覽相關的全新控制台功能。

積極評估

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

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

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

1. 開啟 Console。
2. 開啟「主機設定」 。
3. 勾選「Eager evaluation」核取方塊。

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

引數提示

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

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

注意：

• arg 前的問號 (例如 ?options) 代表選用 arg。
• arg 前方的刪節號 (例如 ...items) 代表擴展。
• 部分函式 (例如 CSS.supports()) 接受多個引數簽章。

在函式執行後自動完成

啟用「即時評估」後，當您輸入函式時，控制台也會顯示可用的屬性和函式。

圖 3. 上方螢幕截圖代表舊版行為，下方螢幕截圖則代表支援函式自動完成的新版行為

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

現在，您可以在管理中心的自動完成使用者介面中使用 ES2017 關鍵字 (例如 await)。

圖 4. Console 現在會在自動完成 UI 中建議 await

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

Chrome 68 隨附 Lighthouse 3.0。接下來的章節將彙整幾項重大異動。如需完整資訊，請參閱「Lighthouse 3.0 版發布公告」。

更快速、更可靠的稽核

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

新使用者介面

此外，Lighthouse 3.0 也採用了全新 UI，這是 Lighthouse 和 Chrome UX (研究與設計) 團隊合作的成果。

圖 5：Lighthouse 3.0 的新版報表 UI

新稽核

Lighthouse 3.0 也隨附 4 項新稽核：

• 首次顯示內容所需時間
• robots.txt 無效
• 使用影片格式的動畫內容
• 避免多次往返任何出發地，造成高昂費用

支援 BigInt

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

圖 6. 控制台中的 BigInt 範例

新增屬性路徑即可監看

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

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

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

「顯示時間戳記」核取方塊已從「控制台設定」 移至「設定」。

下載預先發布版

建議使用 Chrome Canary、開發人員版或 Beta 版做為預設開發瀏覽器。透過這些搶先體驗管道，您可以存取最新的開發人員工具功能、測試最先進的網頁平台 API，並在使用者發現問題前，找出網站上的問題！

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

如要討論開發人員工具的新功能、更新或其他相關事項，請使用下列選項。

• 如要提供意見回饋或提出功能要求，請前往 crbug.com。
• 如要回報開發人員工具的問題，請依序點選開發人員工具中的 more_vert「更多選項」 >「說明」 >「回報開發人員工具的問題」。
• 在 Twitter 訊息中標記 @ChromeDevTools。
• 在「開發人員工具最新消息」或「開發人員工具提示」YouTube 影片中留言。

開發人員工具新功能

「開發人員工具最新消息」系列涵蓋的所有主題清單。