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

嗨,我是Kayce,我是開發人員工具的技術作家,今天要向您介紹開發人員工具的最新消息。

「Resources」面板現已改為「Application」面板

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

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

ChromeLens

Chrome 鏡頭。

ChromeLens 是全新的擴充功能,可協助您讓視障人士更容易存取網站。

附註:Rob Dodson 剛推出一系列新的無障礙影片,請參閱 a11ycasts

Canary 版現已推出新功能

Canary 目前為 Chrome 54 版。因此,日後閱讀這篇文章的讀者,如果使用的是 Chrome 54 以上版本,就可以使用這些功能!

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

「來源」面板的顏色挑選器。

按一下網路面板中的「資源」窗格,即可複製一串 cURL 要求,下載所有資源。

以 curl 格式複製所有內容。

您可以透過指令選單停用 JavaScript。這項功能原本只能在「設定」中使用。

停用 JavaScript。

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

console.warn() 堆疊追蹤。

這項功能已推出數個月,但仍值得一提。建立啟用 JS 設定檔選項的時間軸記錄,您就可以在「來源」面板中看到函式逐項的執行時間。

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

社群提供的新點子

以下是社群提供的幾項新想法,可能會在未來的 DevTools Near You 中實現。

  • @matthewcp:顯示簡單的物件成長清單,加快記憶體外洩偵錯作業。
  • @jonathanbingram:使用遞增 / 遞減鍵盤快速鍵,增加 / 減少 font-weight 值。
  • @_bl4de:編輯 Cookie (其實這是長期以來的請求,感謝您再次提出)。據傳 @kdzwinel 正在處理 PR。
  • @kienzle_s:在「Network」面板篩選器中新增「OR」篩選器。

有新想法嗎?我們很樂意聽取你的意見。請透過 Twitter 與我們聯絡 (@ChromeDevTools),並告訴我們發生了什麼事。

在您閱讀本文的同時,如果有任何需要修正的文件,或需要說明的功能,歡迎在文件存放區中提出問題

下個月見!