開發人員工具摘要:幻燈片以及新的節流園地

Paul Bakaus
Paul Bakaus

開發人員工具最新消息

這篇文章的第一則新聞是稍微偏向元敘述,也就是這則更新本身!我會不定期 (至少每月一次) 總結 Chrome 開發人員工具的最新動態。

我說「最新」是認真的:我會談論 Chrome Canary 剛推出的新功能,如果您想使用穩定版,也沒問題。但如果你喜歡冒險,並想保持領先,這些貼文就是你的最佳選擇。除了最新功能和錯誤修正項目外,您還會在每則貼文的結尾看到「社群心跳」專區,這裡會精選您 (我們的親愛使用者) 最棒的貢獻。

廢話不多說,現在就讓我們來看看實際的新聞。


開發人員工具的新功能

網路和時間軸中的膠卷式螢幕截圖

就在一週前,我們將一項重要的新功能從實驗階段移至正式版:在「Network」和「Timeline」分頁中擷取網頁螢幕截圖。

在「Network」面板中,按一下小相機圖示啟用影格擷取功能,然後重新載入網頁來觸發擷取作業。除了使用 WebPageTest 等其他工具擷取的螢幕截圖,我們目前只會顯示實際來自繪製作業的影格。

雙擊其中一個影格會顯示經過縮放的檢視畫面 (然後使用向左/向右方向鍵瀏覽),將滑鼠游標懸停在影格上會在面板和時間軸上顯示線條,以便顯示影格擷取的確切時間,讓您能與載入序列建立關聯。這樣一來,您就能更輕鬆地偵錯常見的載入問題,例如轉譯阻斷的網路字型。

「時間軸」面板中,只要切換頂端工具列的「螢幕截圖」核取方塊,即可啟用螢幕截圖功能。與「Network」面板相比,這裡的運作方式稍有不同:在這種情況下,我們會盡可能頻繁地擷取畫面,無論實際繪製為何,都能在與時間軸中其他列相關的線性時間軸上放置上述螢幕截圖。無須按兩下即可顯示預覽畫面,只要將滑鼠游標懸停在圖片上,就會顯示放大的畫面。

由於這兩者在功能和使用者體驗方面稍有落差,我們建議您試用這項/這些功能,並透過 crbug.com/new 建立的支援單或透過推文向 @ChromeDevTools 提供任何意見回饋。

「網路」面板中的「網路節流」

網路節流是我們在推出裝置模式時新增的功能,現在已在「網路」面板工具列中找到第二個家,讓您可以專注於單一位置的網路最佳化。

網路節流運作情形

不過,這個新首頁只是一個鏡像:它仍可在裝置模式下使用,因為在讓網站回應式時,模擬連線不良的情況仍非常重要。

最後,您是否曾經有過這樣的經驗:在工作一整天後,您想知道為什麼網路連線中斷,最後才發現自己忘記停用網路節流功能?啟用網路節流功能後,網路面板分頁現在會顯示警告圖示

各種小道消息


社群心跳

深入瞭解 Chrome 開發人員工具

網路節流運作情形

Bret Little 發布了這個精彩的逐步解說課程,讓您瞭解基本 DevTools 功能,同時提供許多深入的訣竅和技巧。這裡的資訊絕對實用,而且多一點開發人員工具文件總是好事!

開發人員工具 IDE…?

網頁程式開發人員兼 DevTools 愛好者 Kenneth Auchenberg 在幾個月前開發了概念驗證的獨立 DevTools 應用程式,而他的網誌文章 也再次成為本週的 (駭客) 新聞。

將 DevTools 轉換為完整的 IDE 是個有趣的想法,也是許多團隊成員過去的夢想,但這也是一項規模龐大的專案。


你有什麼看法? 開發人員工具 IDE 是空想還是可行?應該長什麼樣子?歡迎在留言中告訴我們!

我們到時見!
Paul Bakaus 和開發人員工具團隊