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

歡迎閱讀開發人員工具版本資訊的下一期。觀看影片 。或者閱讀下文,瞭解 Chrome 開發人員工具 Chrome 59 版的新功能!

特色

新功能

CSS 和 JS 程式碼涵蓋率

透過全新的「涵蓋率」分頁,找出未使用的 CSS 和 JS 程式碼。載入或 而分頁則會指出網頁使用了多少程式碼 就會引發這個事件。如要縮減網頁大小,只需運送程式碼 您的需求

「涵蓋範圍」分頁

按一下網址,「來源」面板就會顯示該檔案的細目資訊 執行的程式碼

「來源」面板中的程式碼涵蓋率細目

每一行程式碼以不同顏色標示:

  • 深綠色代表已執行程式碼行。
  • 亮紅色代表未執行。
  • 一行紅色和綠色的程式碼,例如上方螢幕截圖的第 3 行 也就是說,該行僅執行部分程式碼。例如:三元組 var b = (a > 0) ? a : 0 之類的運算式會以紅色和綠色顯示。
,瞭解如何調查及移除這項存取權。

如何開啟「涵蓋範圍」分頁:

  1. 開啟「指令選單」
  2. 開始輸入 Coverage,然後選取「顯示涵蓋範圍」

全頁螢幕截圖

請觀看以下影片,瞭解如何從頂端擷取螢幕截圖 從網頁底部一直到底部

封鎖要求

想瞭解網頁在特定指令碼、樣式表或 無法使用其他資源嗎?在「網路」中的要求上按一下滑鼠右鍵 ,然後選取「Block Request URL」(封鎖請求網址)。新的「請求封鎖」分頁 彈出式視窗,供您管理已封鎖的要求。

封鎖要求網址

不對勁,等上去吧

到目前為止,嘗試逐步執行以下程式碼片段的做法: 頭痛。你正處於test()的中間,從頭走過一行,然後 避免受到 setInterval() 驗證碼中斷。接下來 非同步程式碼 (例如 test()),開發人員工具會從第一行到最後一行 保持一致

  function wait(ms) {
    return new Promise(r => setTimeout(r, ms)).then(() => "Yay");
  }

  // do some work in background.
  setInterval(() => 42, 200);

  async function test() {
    debugger;
    const hello = "world";
    const response = await fetch('index.html');
    const tmp = await wait(1000);
    console.log(tmp);
    return hello;
  }

  async function runTest() {
    let result = await test();
    console.log(result);
  }

備註:想提升偵錯技巧嗎?請參閱下列新文件:

異動

整合指令選單

現在開啟「指令選單」時,您會發現 前面加上大於字元 (>)。這是因為指令 選單已與「開啟檔案」選單整合, Command + O 鍵 (Mac),或 Control + O 鍵 (Windows、Linux)。

下載預覽頻道

建議您使用 Chrome CanaryDevBeta 版做為預設的開發瀏覽器。透過這些預覽版本,您可以存取開發人員工具中的最新功能、測試最先進的網路平台 API,以及找出網站的問題,以免使用者發現問題。

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

請使用下列選項,討論貼文中的新功能和異動,或與開發人員工具相關的其他事項。

  • 歡迎透過 crbug.com 提出建議或意見。
  • 使用「更多選項」更多 > 回報開發人員工具問題說明 >在開發人員工具中回報開發人員工具問題
  • 前往 @ChromeDevTools 張貼 Tweet。
  • 歡迎在「開發人員工具」推出「最新消息」YouTube 影片或「開發人員工具秘訣」YouTube 影片留言。

開發人員工具新功能

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