開發人員工具摘要,2016 年 8 月

您好,我是開發人員工具技術撰稿人 Kayce,現在要與您分享 DevTools 領域的最新進展。

「Resources」(資源) 面板現已改為「Application」(應用程式) 面板

自 Chrome 52 版起,「資源面板」已全面停用!且已重新命名為「應用程式」面板。您仍可使用「資源」面板的所有舊功能,以及許多新功能來協助您對漸進式網頁應用程式進行偵錯。現在,您也會親身體驗對於服務工作站生命週期和快取時間問題偵錯的樂趣。

如要進一步瞭解新功能,請參閱我們自行撰寫的全新指南:偵錯漸進式網頁應用程式

ChromeLens

Chrome 鏡頭。

ChromeLens 是全新的擴充功能,能幫助視障人士更輕鬆地存取您的網站。

P.S. Rob Dodson 推出了新的無障礙功能係列影片 a11ycasts

Canary 版新功能

Canary 版目前為 Chrome 54。因此,如果您是 Chrome 54 以上版本,不妨使用這些功能!

顏色挑選器位於「來源」面板中。

來源面板顏色挑選器。

在「Network」(網路) 面板中的「Resources」(資源) 窗格按一下滑鼠右鍵,即可複製 cURL 要求字串,用來下載所有資源。

以 curl 格式複製所有項目。

JavaScript 可以透過指令選單停用。過去只能透過「設定」存取。

停用 JavaScript。

console.warn() 現在包含堆疊追蹤。

主控台.warn() 堆疊追蹤。

這項最後一項功能已經推出數個月,但也值得一提。啟用「JS 設定檔」選項建立時間軸記錄,即可在「來源」面板中查看各函式的執行時間細目。

來源面板中的函式執行時間。

社群的新想法

以下是社群成員分享的一些新想法,未來您附近的開發人員工具可能會提供給您。

  • @matthewcp:顯示不斷增加的物件清單,加速記憶體流失偵錯作業。
  • @jonathanbingram:使用遞增 / 遞減快速鍵增加 / 減少 font-weight 值。
  • @_bl4de:編輯 Cookie (這其實是長期的要求,但感謝送出此要求)。很可惜,@kdzwinel 有工作中的 PR。
  • @kienzle_s:在「Network」面板篩選器中加入 OR 篩選器。

有新點子嗎?我們希望能聽聽您的想法!請透過 @ChromeDevTools 傳送 Twitter 通知,告訴我們發生什麼事。

瞭解您之後,如果有任何需要修正的文件或需要說明的功能,歡迎在文件存放區中開啟問題

下個月見!