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

Kayce Basques

Chrome 65 版開發人員工具即將推出新功能：

請繼續閱讀或觀看這些版本資訊的影片版本。

本機覆寫

本機覆寫可讓您在開發人員工具中進行變更，並在各網頁載入時保留這些變更。 過去，在開發人員工具中所做的變更會在重新載入頁面時遺失。大部分檔案類型適用本機覆寫，但有幾個例外狀況。請參閱「限制」一節。

使用本機覆寫功能，在載入網頁之間保留 CSS 變更。

圖 1：使用本機覆寫功能，在各網頁載入時保留 CSS 變更

具體情況如下：

  • 您可以指定開發人員工具儲存變更的目錄。
  • 當您在開發人員工具中做出變更時，開發人員工具會將修改過的檔案副本儲存到目錄中。
  • 重新載入頁面時，開發人員工具會提供本機修改過的檔案，而非網路資源。

如何設定本機覆寫：

  1. 開啟「Sources」面板。

  2. 開啟「覆寫值」分頁。

    「覆寫」分頁

    圖 2：「覆寫值」分頁

  3. 按一下「設定覆寫」。

  4. 選取要儲存變更的目錄。

  5. 按一下可視區域頂端的「Allow」，授權 DevTools 對目錄的讀取和寫入權限。

  6. 進行所需的變更。

限制

  • 開發人員工具不會儲存您在「元素」面板的「DOM 樹狀結構」中所做的變更。請改為在「Sources」面板中編輯 HTML。
  • 如果您在「Styles」窗格中編輯 CSS，且該 CSS 的來源為 HTML 檔案，開發人員工具不會儲存變更。請改為在「Sources」面板中編輯 HTML 檔案。
  • 工作區。開發人員工具會自動將網路資源對應至本機存放區。當您在開發人員工具中進行變更時，這項變更也會儲存到本機存放區。

變更分頁

透過全新的「變更」分頁，追蹤您在開發人員工具中在本機所做的變更。

變更分頁

圖 3：「變更」分頁

全新無障礙工具

使用新的「Accessibility」窗格檢查元素的無障礙屬性，並在「Color Picker」中檢查文字元素的對比度，確保低視能障礙或色覺障礙者能夠存取這些元素。

無障礙窗格

您可以使用「Elements」面板的「Accessibility」窗格，調查目前所選元素的無障礙屬性。

無障礙窗格

圖 4 「Accessibility」窗格會顯示「Elements」面板的「DOM Tree」中目前所選元素的 ARIA 屬性和計算屬性，以及該元素在無障礙樹狀結構中的位置

請參閱下方 Rob Dodson 中有關標籤的 A11ycast 影片，瞭解「無障礙」窗格的實際運作情形。

顏色挑選器中的對比度

顏色挑選器現在會顯示文字元素的對比度。提高文字元素的對比度，可讓低視能障礙或色覺障礙者更容易使用您的網站。如要進一步瞭解對比度對無障礙功能的影響，請參閱「色彩和對比」。

改善文字元素的色彩對比，可讓「所有」使用者更容易使用您的網站。換句話說，如果文字在白色背景中為灰色，任何人都難以閱讀。

檢查醒目顯示 H1 元素的對比度。

圖 5：檢查醒目顯示 h1 元素的對比度

在圖 5 中，4.61 旁的兩個勾號表示該元素符合強化建議對比度 (AAA)。如果只有一個勾號，就表示符合最低建議對比度 (AA)。

按一下「Show More」圖示 顯示更多，展開「Contrast Ratio」區段。「Color Spectrum」(色彩頻譜) 方塊中的白色線，代表符合建議對比率的顏色之間的邊界。舉例來說，由於圖 6 中的灰色顏色符合建議，這表示白線下方所有顏色也符合建議。

展開的「對比度」區段。

圖 6：展開的「對比度」部分

「Audits」面板有自動化的無障礙功能稽核，可確保網頁上的「每個」文字元素都有足夠的對比度。

請參閱「在 Chrome 開發人員工具中執行 Lighthouse」一文，或觀看下方的 A11ycast 影片，瞭解如何使用「稽核」面板測試無障礙功能。

新稽核

Chrome 65 隨附全新的 SEO 稽核類別，以及許多新的效能稽核功能。

全新搜尋引擎最佳化 (SEO) 稽核

確保網頁通過新「SEO」類別的各項稽核，可能有助於提升搜尋引擎排名。

新的搜尋引擎最佳化 (SEO) 類別。

圖 7. 新的搜尋引擎最佳化類別

全新效能稽核功能

Chrome 65 也隨附許多新的效能稽核功能：

  • JavaScript 啟動時間過長
  • 對靜態資產使用效率不佳的快取政策
  • 避免頁面重新導向
  • 文件使用外掛程式
  • 壓縮 CSS
  • 壓縮 JavaScript

各位好！在 Mynet 將網頁載入速度提高 4 倍後，使用者在網站上停留的時間增加了 43%，網頁瀏覽量增加了 34%，跳出率則下降 24%，每次文章網頁瀏覽的收益則增加了 25%。瞭解詳情。

提示！如果您要改善網頁的載入效能，但不知道從何處著手，請嘗試使用「Audits」(稽核) 面板。只要提供網址，就能提供詳細報表，瞭解改善該網頁的各種方式。開始使用

其他更新內容

使用工作站和非同步程式碼執行可靠的程式碼步驟

Chrome 65 會在執行在執行緒之間傳遞訊息和非同步程式碼的程式碼時，更新「Step Into」踏步 按鈕的更新。如果您想使用上一個步驟的行為，可以改用新的「Step」步驟按鈕。

轉換為可在執行緒之間傳送訊息的程式碼。

當您逐步進入可在執行緒之間傳遞訊息的程式碼時，開發人員工具現在會顯示每個執行緒中的情況。

例如，圖 8 中的應用程式會在主執行緒和背景工作執行緒之間傳遞訊息。進入主執行緒的 postMessage() 呼叫後，開發人員工具會在背景工作執行緒的 onmessage 處理常式中暫停。onmessage 處理常式本身會將訊息發布回主執行緒。進入 該呼叫後，開發人員工具會在主執行緒中暫停。

在 Chrome 65 中執行訊息傳遞程式碼。

圖 8. 在 Chrome 65 中進入傳送郵件的程式碼

當您在舊版 Chrome 中進入這類程式碼時，Chrome 只會顯示程式碼的主要執行緒端，如圖 9 所示。

在 Chrome 63 中執行訊息傳遞程式碼。

圖 9. 在 Chrome 63 中進入訊息傳遞程式碼

改用非同步程式碼

進入非同步程式碼時，開發人員工具現在會假設您要暫停在最終執行的非同步程式碼中。

舉例來說，在逐步進入 setTimeout() 後，在圖 10 中，開發人員工具會執行前往幕後的所有程式碼，然後在傳遞至 setTimeout() 的函式中暫停程式碼。

在 Chrome 65 中進入非同步程式碼。

圖 10. 在 Chrome 65 中進入非同步程式碼

當您在 Chrome 63 中進入這類程式碼時，開發人員工具會因為按時間順序執行而暫停在程式碼中，如圖 11 所示。

在 Chrome 63 中進入非同步程式碼。

圖 11. 在 Chrome 63 中進入非同步程式碼

「效能」面板中的多個錄製內容

您現在可以使用「效能」面板暫時儲存最多 5 個錄製內容。當您關閉開發人員工具視窗時，系統會刪除這些記錄。請參閱「開始使用分析執行階段效能」，熟悉「效能」面板。

在「效能」面板中選取多個錄製內容。

圖 12. 在「Performance」(效能) 面板中選取多個錄音檔

額外優勢：透過 Puppeteer 1.0 自動執行開發人員工具操作

Puppeteer 1.0 版是 Chrome 開發人員工具團隊維護的瀏覽器自動化工具，現已推出。您可以使用 Puppeteer 來自動處理先前只能透過開發人員工具提供的許多工作，例如擷取螢幕截圖：

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});
  await browser.close();
})();

其中也具備多種 API，可處理許多一般實用的自動化工作，例如產生 PDF：

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'});
  await page.pdf({path: 'hn.pdf', format: 'A4'});
  await browser.close();
})();

詳情請參閱快速入門。

您也可以在不明確開啟開發人員工具的情況下，在瀏覽時使用 Puppeteer 公開開發人員工具功能。如需範例，請參閱「在不開啟開發人員工具的情況下使用開發人員工具功能」。

下載預覽管道

考慮使用 Chrome Canary 版、開發人員版或 Beta 版做為預設開發瀏覽器。這些預覽管道可讓您存取開發人員工具的最新功能、測試最先進的網路平台 API，並在使用者使用之前就在網站上發現問題！

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

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

  • 請透過 crbug.com 提交建議或意見回饋。
  • 如要回報開發人員工具的問題，請在開發人員工具中依序點選「更多選項」圖示 更多   >「說明」 >「回報開發人員工具的問題」。
  • 在 @ChromeDevTools 張貼推文。
  • 歡迎對開發人員工具的 YouTube 影片或開發人員工具秘訣 (YouTube 影片) 提供意見。

開發人員工具的新功能

這裡列出了「開發人員工具新功能」系列中已涵蓋的所有功能。

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 111

Chrome 110 版本

Chrome 109 版

Chrome 108 版

Chrome 107 版

Chrome 106 版

Chrome 105

Chrome 104 版

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98 版

Chrome 97

Chrome 96

Chrome 95

Chrome 94 版

Chrome 93 版

Chrome 92 版

Chrome 91 版

Chrome 90

Chrome 89

Chrome 88 版

Chrome 87

Chrome 86

Chrome 85 版

Chrome 84 版

Chrome 83 版

Chrome 82 版

Chrome 82 已取消。

Chrome 81 版

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