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

Kayce Basques
Kayce Basques
X GitHub

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

請繼續閱讀，或觀看下方影片，瞭解這些版本資訊。

本機覆寫

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

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

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

運作方式：

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

如要設定本機覆寫，請按照下列步驟操作：

  1. 開啟「來源」面板。

  2. 開啟「覆寫」分頁。

    「覆寫」分頁

    圖 2. 「覆寫」分頁

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

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

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

  6. 進行變更。

限制

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

「變更」分頁

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

「變更」分頁

圖 3. 「變更」分頁

全新無障礙工具

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

「無障礙」窗格

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

「無障礙」窗格

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

請參閱下方的 Rob Dodson A11ycast 標籤，瞭解「無障礙功能」窗格的實際運作方式。

顏色挑選器的對比度

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

提高文字元素的色彩對比度，可讓所有使用者更輕鬆地瀏覽網站。換句話說，如果文字是灰色，背景是白色，任何人都不容易閱讀。

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

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

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

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

展開的「對比率」部分。

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

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

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

新稽核

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

新的 SEO 稽核

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

全新的搜尋引擎最佳化稽核類別。

圖 7. 全新的「搜尋引擎最佳化」SEO稽核類別

新的成效稽核

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

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

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

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

其他更新內容

使用 Worker 和非同步程式碼可靠地逐步執行程式碼

Chrome 65 更新了「Step Into」逐步執行按鈕，方便您逐步執行在執行緒之間傳遞訊息的程式碼，以及非同步程式碼。如要使用先前的逐步執行行為，請改用新的「逐步」步驟 按鈕。

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

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

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

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

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

在舊版 Chrome 中逐步執行這類程式碼時，Chrome 只會顯示程式碼的主執行緒端，如圖 9 所示。

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

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

逐步執行非同步程式碼

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

舉例來說，在圖 10 中逐步進入 setTimeout() 後，DevTools 會在背景執行所有程式碼，直到該點為止，然後在傳遞至 setTimeout() 的函式中暫停。

在 Chrome 65 中逐步執行非同步程式碼。

圖 10. 在 Chrome 65 中逐步執行非同步程式碼

在 Chrome 63 中，當您逐步執行這類程式碼時，開發人員工具會依時間順序暫停執行程式碼，如圖 11 所示。

在 Chrome 63 中逐步執行非同步程式碼。

圖 11. 在 Chrome 63 中逐步執行非同步程式碼

「效能」面板中的多筆記錄

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

在「效能」面板中選取多個記錄。

圖 12. 在「效能」面板中選取多個記錄

加碼：使用 Puppeteer 1.0 自動執行開發人員工具動作

Chrome 開發人員工具團隊維護的瀏覽器自動化工具 Puppeteer 1.0 版現已推出。您可以使用 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 開發人員工具團隊聯絡

如要討論開發人員工具的新功能、更新或其他相關事項，請使用下列選項。

開發人員工具新功能

「開發人員工具新功能」系列涵蓋的所有主題清單。