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

Kayce Basques

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

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

本機覆寫

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

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

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

運作方式：

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

如何設定本機覆寫：

  1. 開啟「來源」面板。

  2. 開啟「覆寫」分頁。

    「覆寫」分頁

    圖 2. 「覆寫」分頁

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

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

  5. 按一下可視區域頂端的「允許」，為開發人員工具授予 目錄。

  6. 進行變更。

限制

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

「變更」分頁

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

「變更」分頁

圖 3. 「變更」分頁

全新無障礙工具

使用新的「Accessibility」窗格檢查元素的無障礙屬性。 在顏色挑選器中檢查文字元素的對比度，確保 協助低視能或色覺障礙者使用

無障礙窗格

使用「Elements」面板中的「Accessibility」窗格調查無障礙屬性 就會遮蔽目前選取的元素

無障礙窗格

圖 4. 「Accessibility」窗格會顯示 「元素」面板上目前「DOM 樹狀結構」中的元素，以及其 無障礙功能樹狀結構中的位置

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

顏色挑選器的對比度

顏色挑選器現在會顯示文字元素的對比度。調高對比度 文字元素的比例，方便低視能或低視能的使用者閱讀您的網站內容 色彩/視覺障礙請參閱「色彩與對比」，進一步瞭解對比度 會影響無障礙功能

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

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

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

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

按一下「顯示更多」圖示 顯示更多 展開「對比」 比率部分。[Color Spectrum] (色彩頻譜) 方塊中的白色線條代表不同顏色之間的邊界 符合建議與非建議對比的比率舉例來說，由於 圖 6 符合建議條件，代表白色線下的所有顏色也符合建議條件 最佳化建議。

展開的「對比度」區段。

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

「Audits」面板可自動稽核無障礙設定，確保「每個」文字元素 網頁的對比度必須夠高

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

全新稽核

Chrome 65 內建一系列全新的 SEO 稽核，以及多項全新效能稽核服務。

新版 SEO 稽核

確保網頁通過全新搜尋引擎最佳化類別的各項稽核，有助於改善 搜尋引擎排名

新的 SEO 稽核類別。

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

新版效能稽核

Chrome 65 也內建多項全新效能稽核功能：

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

效能很重要！Mynet 將網頁載入速度提高 4 倍後，使用者在網站上停留的時間增加了 43% 次網頁瀏覽之後顯示。瞭解詳情。

小提示：如果您想改善網頁載入效能，但不知道該從何著手， 試用「Audits」面板。您只要提供網址，系統就會提供一份報表 瞭解如何改善網頁開始使用

其他更新內容

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

Chrome 65 更新了 Step Into 進入「逐步進入」按鈕時啟動 程式碼和非同步程式碼傳遞訊息。如要開始進行上一個步驟 您可以使用新的步驟 步驟 按鈕。

逐步編寫程式碼，以在執行緒之間傳遞訊息

當您試圖進入會在執行緒之間傳遞訊息的程式碼時，開發人員工具現在會顯示 。

例如，圖 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 影片留言。

開發人員工具新功能

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