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

Kayce Basques

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

請參閱下列版本資訊，或觀看這些版本資訊的影片版本。

本機覆寫

本機覆寫可讓您在開發人員工具中進行變更，並在載入網頁的同時保留這些變更。 在此之前，如果您在開發人員工具中所做的變更，都會在重新載入頁面時遺失。本機覆寫適用於所有檔案類型，但有幾個例外。請參閱「限制」一節。

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

圖 1：使用本機覆寫功能，在網頁載入期間持續進行 CSS 變更

具體情況如下：

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

如何設定本機覆寫：

  1. 開啟「來源」面板。

  2. 開啟「覆寫」分頁。

    「覆寫」分頁

    圖 2：「覆寫」分頁

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

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

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

  6. 進行所需的變更。

限制

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

「變更」分頁

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

「變更」分頁

圖 3：「變更」分頁

全新無障礙工具

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

無障礙窗格

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

無障礙窗格

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

如要瞭解「無障礙」窗格的實際運作情形，請查看 Rob Dodson 對下方標籤功能的 A11ycast。

顏色挑選器的對比度

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

改善文字元素的色彩對比，可讓所有使用者更輕鬆地使用您的網站。換句話說，如果文字是灰色且背景為白色，任何人都難以閱讀。

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

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

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

按一下「Show More」圖示 顯示更多 展開「Contrast Raatio」區段。「Color Spectrum」(色彩頻譜) 方塊中的白線代表符合建議對比度與不符合建議色彩之間的邊界。例如，由於圖 6 中的灰色顏色符合建議事項，因此白線下方的所有顏色也符合建議內容。

展開的「對比度」區段。

圖 6：展開的「對比度」區段

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

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

全新稽核

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. 在「效能」面板中選取多段錄音檔

額外步驟：使用 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、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