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

Kayce Basques
Kayce Basques

Chrome 67 開發人員工具即將推出的新功能和重大異動，包括：

版本資訊影片版本：

開啟「網路」面板，然後按下 Command + F (Mac) 或 Control + F 鍵 (Windows、Linux、ChromeOS)，開啟新的「網路搜尋」窗格。開發人員工具會針對您提供的查詢，搜尋所有網路要求的標頭和主體。

透過全新的「網路搜尋」窗格搜尋「cache-control」文字。

圖 1：使用新的「Network Search」窗格搜尋 cache-control 文字

按一下「Match Case」圖示 大小寫相符，即可讓查詢區分大小寫。按一下「Use Regular Expression」圖示 使用規則運算式，可顯示與提供模式相符的任何結果。不必將規則運算式納入正斜線。

「網路搜尋」窗格中的規則運算式查詢。

圖 2：「網路搜尋」窗格中的規則運算式查詢。

「Global Search」窗格的使用者介面現在與新「Network Search」窗格的使用者介面相符。這項工具現在也能美化結果，便於瀏覽。

新舊版 UI。

圖 3：左側為舊版 UI，右側為新 UI

按下 Command + Option + F 鍵 (Mac) 或 Control + Shift + F 鍵 (Windows、Linux、ChromeOS) 可開啟全域搜尋。您也可以透過「指令選單」開啟該選單。

在「Styles」窗格中預覽 CSS 變數值

如果 CSS 顏色屬性值 (例如 background-color 或 color) 的值設為 CSS 變數，開發人員工具現在會顯示該顏色的預覽畫面。

CSS 變數顏色值範例。

圖 4 在左側的舊版 UI 中，color: var(--main-color) 旁邊沒有顏色預覽，而在右側的新 UI 中，您會看到

複製為 擷取

在網路要求上按一下滑鼠右鍵，然後依序選取「Copy」 >「Copy As Fetch」，將要求的 fetch() 等效程式碼複製到剪貼簿。

針對要求複製擷取相同擷取的擷取程式碼。

圖 5：針對要求複製對等 fetch() 程式碼

開發人員工具會產生類似下方的程式碼：

fetch("https://preload.glitch.me/styles.css", {
  "credentials": "omit",
  "headers": {},
  "referrer": "https://preload.glitch.me/after/",
  "referrerPolicy": "no-referrer-when-downgrade",
  "body": null,
  "method": "GET",
  "mode": "cors"
});

稽核面板更新

全新稽核

「Audits」面板提供 2 項新的稽核，包括：

新的設定選項

您現在可以設定「Audits」面板，執行下列操作：

  • 保留電腦可視區域和使用者代理程式設定。換句話說，您可以防止「Audits」面板模擬行動裝置。
  • 停用網路和 CPU 節流功能。
  • 針對各項稽核保留 LocalStorage 和 IndexedDB 等儲存空間。

全新稽核設定選項。

圖 6：全新稽核設定選項

查看追蹤記錄

稽核網頁後，按一下「View Trace」，即可在「Performance」面板中查看稽核依據的載入效能資料。

「View Trace」按鈕。

圖 7. 「View Trace」按鈕

停止無限迴圈

如果您經常使用 for 迴圈、do...while 迴圈或遞迴，也許在開發網站時不小心執行了無限迴圈。如要停止無限迴圈，您現在可以：

  1. 開啟「來源」面板。
  2. 按一下「暫停」圖示 暫停。該按鈕會變更為「Resume Script Execution」恢復。
  3. 按住「Resume Script Execution」恢復，然後選取「Stop Current JavaScript Call」圖示 停止。

在上方的影片中，系統正在透過 setInterval() 計時器更新時鐘。按一下「Start Infinite Loop」，即可執行不停止的 do...while 迴圈。選取「Stop Current JavaScript Call」(停止目前 JavaScript 呼叫) 停止 時並未執行，因此間隔會繼續。

「成效」分頁中的使用者載入時間

查看效能記錄時，按一下「User Timing」區段，即可查看「Summary」、「Bottom-Up」、「Call Tree」和「Event Log」分頁中的「User Timing」測量結果。

在「由下而上」分頁中查看使用者載入時間測量指標。

圖 8. 在「Bottom-Up」分頁中查看使用者載入時間測量指標。「User Timing」區段左側的藍色長條代表已選取。

一般而言，您現在可以選取任何區段 (「Main Thread」、「User Timing」、「GPU」、「ScriptStreamer」等)，然後在分頁中查看該區段的活動。

在「記憶體」面板中選取 JavaScript VM 執行個體

「Memory」面板現在會明確列出與頁面相關聯的所有 JavaScript VM 執行個體，而不是像之前一樣隱藏在「Target」(目標) 下拉式選單後方。

「Memory」面板的「之前」和「之後」螢幕截圖。

圖 9. 在左側的舊版 UI 中，JavaScript VM 執行個體會隱藏在「Target」(目標) 下拉式選單後方，而在右側的新版 UI 中，這些執行個體會顯示在「Select JavaScript VM Instance」(選取 JavaScript VM 執行個體) 表格中。

developers.google.com 例項旁邊有 2 個值：8.7 MB 和 13.3 MB。左側值代表因 JavaScript 而配置的記憶體。右側值代表因該 VM 執行個體而分配的所有 OS 記憶體。右側值包含左值。在 Chrome 的工作管理員中，左側值對應 JavaScript Memory，右側值則對應 Memory Footprint。

Network 分頁已重新命名為「頁面」分頁

「來源」面板的「網路」分頁現已改稱「頁面」分頁。

兩個開發人員工具視窗並排，呈現名稱變更。

圖 10. 在左側的舊版 UI 中，顯示頁面資源的分頁稱為「網路」，在右側的新 UI 中稱為「頁面」

深色主題更新

Chrome 67 內建幾項深色主題的色彩配置變更。舉例來說，中斷點圖示和目前的執行作業行以綠色顯示。

新中斷點圖示和目前執行色彩配置行的螢幕截圖。

圖 11. 新中斷點圖示和目前執行色彩配置行的螢幕截圖

「安全性」面板中的憑證透明化資訊

「安全性」面板現在可回報憑證透明性資訊。

「安全性」面板中的憑證透明化資訊。

圖 12. 「安全性」面板中的認證資訊公開資訊

效能面板中的網站隔離

如果您已啟用網站隔離，「Performance」(效能) 面板現在會顯示每個程序的火焰圖，方便您查看每個程序造成的總工作量。

表演記錄中每個程序的火焰圖。

圖 13. 表演記錄中每個程序的火焰圖

下載預覽頻道

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

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

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

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

開發人���工具新功能

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 指南

Chrome 110

Chrome 指南

Chrome 108

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Google 瀏覽器 93

Chrome 92 版

Chrome 91

Chrome 90

Google Chrome 89

Google Chrome 88

Chrome 87

Chrome 86 版

Chrome 85 版

Google Chrome 84

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

Google Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72 版

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63 版

Chrome 62 版

Chrome 61 版

Chrome 60 版

Chrome 59