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

Kayce Basques

Chrome 65 中開發人員工具的新功能包括：

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

本機覆寫

本機覆寫值可讓您在開發人員工具中進行變更，並在頁面載入時保留這些變更。過去，您在開發人員工具中所做的任何變更，在重新載入網頁時都會遺失。本機覆寫值適用於多數檔案類型，但有幾種例外情況。請參閱「限制」。

使用本機覆寫值，在各網頁載入時保留 CSS 變更。

圖 1. 使用本機覆寫值在各網頁載入時保留 CSS 變更

運作方式：

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

如何設定本機覆寫值：

  1. 開啟「來源」面板。

  2. 開啟「覆寫」分頁。

    「覆寫」分頁

    圖 2. 「覆寫值」分頁

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

  4. 選取要儲存變更內容的資料夾。

  5. 按一下檢視區頂端的「允許」，即可授予開發人員工具讀取和寫入目錄的權限。

  6. 進行變更。

限制

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

「變更」分頁

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

「變更」分頁

圖 3. 「變更」分頁

全新無障礙工具

使用新的「無障礙」窗格檢查元素的無障礙屬性，並在「顏色挑選器」中檢查文字元素的對比度，確保視力受損或色盲的使用者也能使用這些元素。

無障礙窗格

使用「元素」面板中的「無障礙」窗格，查看目前所選元素的無障礙屬性。

「無障礙」窗格

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

請參閱 Rob Dodson 的 A11ycast 標記說明，瞭解「無障礙」窗格實際運作情形。

顏色挑選器中的對比度

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

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

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

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

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

按一下「顯示更多」圖示 顯示更多，展開「對比度比率」部分。「色彩光譜」方塊中的白線代表符合建議對比度和不符合對比度的顏色之間的界線。舉例來說，由於圖 6 中的灰色符合建議，因此白線下方的所有顏色也符合建議。

已展開的「對比率」部分。

圖 6. 已展開的「對比率」部分

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

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

新稽核

Chrome 65 推出全新的搜尋引擎最佳化 (SEO) 稽核類別，以及許多新的效能稽核。

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

確保網頁通過新 SEO 類別中的每項稽核，有助於提升搜尋引擎排名。

新的 SEO 稽核類別。

圖 7. 新的SEO 稽核類別

新的效能稽核

Chrome 65 也提供許多新的效能稽核功能：

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

Perf 很重要！在 Mynet 將網頁載入速度提升 4 倍後，使用者在網站上的停留時間增加了 43%，瀏覽的網頁數量增加了 34%，跳出率降低了 24%，每篇文章的網頁瀏覽收益也增加了 25%。瞭解詳情。

提示！如果您想改善網頁的載入效能，但不知道從何著手，不妨試試「稽核」面板。只要提供網址，這項工具就會提供詳細的報告，說明如何改善該網頁。開始使用

其他更新內容

透過 worker 和非同步程式碼，可靠地執行程式碼步驟

在 Chrome 65 中，當您在程式碼中逐步執行時，Step Into 逐步執行 按鈕會更新，以便在執行緒之間傳遞訊息，以及非同步程式碼。如果您想要使用先前的逐步操作行為，可以改用新的「Step」步驟 按鈕。

逐步進入在執行緒之間傳遞訊息的程式碼

當您逐步進入在執行緒之間傳遞訊息的程式碼時，DevTools 會顯示各執行緒的情況。

舉例來說，圖 8 中的應用程式會在主執行緒和工作執行緒之間傳遞訊息。在主執行緒上逐步執行 postMessage() 呼叫後，DevTools 會在背景工作執行緒的 onmessage 處理常式中暫停。onmessage 處理常式本身會將訊息發回至主執行緒。逐步進入呼叫會暫停 DevTools 並返回主執行緒。

在 Chrome 65 中逐步進入訊息傳遞程式碼。

圖 8. 在 Chrome 65 中逐步進入訊息傳遞程式碼

在早期版本的 Chrome 中，如果您要逐步進入類似這種程式碼，Chrome 只會顯示程式碼的主執行緒端，如圖 9所示。

在 Chrome 63 中逐步進入訊息傳遞程式碼。

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

進入非同步程式碼

在逐步進入非同步程式碼時，DevTools 會假設您想在最終執行的非同步程式碼中暫停。

舉例來說，在圖 10中，在逐步執行 setTimeout() 後，DevTools 會在幕後執行所有導致該點的程式碼，然後在傳遞至 setTimeout() 的函式中暫停。

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

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

在 Chrome 63 中，如果您逐步進入類似上述的程式碼，開發人員工具會在程式碼依時間順序執行時暫停，如圖 11所示。

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

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

效能面板中的多個錄影

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

在「成效」面板中選取多個錄影檔。

圖 12. 在「成效」面板中選取多個錄影

額外內容：使用 Puppeteer 1.0 自動執行開發人員工具動作

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

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 版設為預設開發人員版瀏覽器。這些預覽管道可讓您存取最新的 DevTools 功能，測試最新的網路平台 API，並在使用者發現問題前，協助您找出網站的問題！

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

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

開發人員工具的新功能

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