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

Kayce Basques

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

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

本機覆寫

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

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

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

運作方式：

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

如何設定本機覆寫值：

  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

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

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

其他更新內容

使用工作站和非同步程式碼逐步導入可靠的程式碼

當目標嵌入會在執行緒之間傳遞訊息的程式碼和非同步程式碼時，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 會假設您想在最終執行的非同步程式碼中暫停。

舉例來說，在進入 setTimeout() 後，在圖 10 中，開發人員工具會執行指向該位置的所有程式碼，並在傳遞至 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 開發人員工具團隊聯絡

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

開發人員工具的新功能

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