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

Kayce Basques

Chrome 68 開發人員工具中的開發人員工具：

，瞭解如何調查及移除這項存取權。

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

輔助控制台

Chrome 68 內建幾項與自動完成和預覽功能相關的 Play 管理中心新功能。

積極評估

在主控台中輸入運算式時，主控台現在會顯示該運算式的預覽畫面 運算式

控制台會在明確執行排序() 作業之前，輸出該作業的結果。

圖 1. 控制台會先輸出 sort() 作業的結果 明確執行

如要啟用 Eager 評估功能：

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

開發人員工具不會積極評估運算式是否會造成副作用。

引數提示

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

控制台中的引數提示。

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

注意：

  • 在引數之前的問號 (例如 ?options)，代表「選用」引數。
  • 引數之前的刪節號 (例如 ...items) 代表「批次」。
  • 有些函式 (例如 CSS.supports()) 可接受多個引數簽章。

函式執行後自動完成

啟用 Eager Evaluation 之後，控制台現在也會顯示 輸入函式後即可使用

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

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

自動完成中的 ES2017 關鍵字

控制台的自動完成使用者介面現在提供 ES2017 關鍵字 (例如 await)。

控制台現在建議「await」。

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

更快速可靠的稽核服務、新版 UI 和全新稽核功能

Chrome 68 隨附 Lighthouse 3.0。接下來的幾節將介紹幾項重大異動。 如要參閱完整故事，請參閱「發布 Lighthouse 3.0」一文。

更快、更可靠的稽核

Lighthouse 3.0 採用名為「Lantern」的全新內部稽核引擎，現已完成稽核作業 而且每次跑步時的變異數較少。

新使用者介面

藉由與 Lighthouse 和 Chrome 使用者體驗相互合作的成果，Lighthouse 3.0 也帶來全新 UI (研究與設計) 團隊合作。

Lighthouse 3.0 版本中的新報表使用者介面。

圖 5：Lighthouse 3.0 中的新報表使用者介面

全新稽核

Lighthouse 3.0 還隨附 4 項新稽核：

  • 首次顯示內容所需時間
  • robots.txt 無效
  • 使用影片格式製作動畫內容
  • 避免多次往返不同出發地的來回行程，且費用高昂

BigInt 支援

Chrome 68 支援名為 BigInt 的新數字基元。BigInt 可讓您代表 整數值。在控制台中試用：

控制台中的 BigInt 範例。

圖 6. 控制台中的 BigInt 範例

新增屬性路徑以監看

在中斷點暫停時，在「範圍」窗格中的屬性上按一下滑鼠右鍵，然後選取「新增屬性」 path to Watch (手錶路徑) 下，將該屬性新增至「Watch」窗格。

「新增屬性路徑」範例。

圖 7. 將屬性路徑新增至監控範例

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

原先位於「Console Settings」(控制台設定) 中的「Show timestamps」(顯示時間戳記) 核取方塊 「控制台「設定」按鈕」已移至「設定」。

下載預覽頻道

建議您使用 Chrome Canary、Dev 或 Beta 版做為預設的開發瀏覽器。透過這些預覽版本，您可以存取開發人員工具中的最新功能、測試最先進的網路平台 API，以及找出網站的問題，以免使用者發現問題。

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

請使用下列選項，討論貼文中的新功能和異動，或與開發人員工具相關的其他事項。

  • 歡迎透過 crbug.com 提出建議或意見。
  • 使用「更多選項」更多 > 回報開發人員工具問題說明 >在開發人員工具中回報開發人員工具問題。
  • 前往 @ChromeDevTools 張貼 Tweet。
  • 歡迎在「開發人員工具」推出「最新消息」YouTube 影片或「開發人員工具秘訣」YouTube 影片留言。

開發人員工具新功能

「開發人員工具新功能」系列中的所有文章清單。