即時掌握最新的開發人員工具
本文章的第一項新聞內容是小中繼資料,這是本身更新!之後,我每隔一段時間就會總結一下 Chrome 開發人員工具的世界 即時分享最新消息
我的意思是,我將來介紹 Chrome Canary 新推出的功能,如果您偏好停留在穩定的土地,那真是太厲害了。但如果你有出奇心 想要保持在最佳狀態,不妨發布這些貼文除了最新功能和錯誤修正外,每則貼文結尾處都有「社群活動訊號」部分,強調您 (也就是我們的忠實使用者) 貢獻的最傑出使用者。
無庸置疑的是,讓我們深入探討實際新聞。
開發人員工具的新功能
在網路和時間軸中呈現類似底片的螢幕截圖
我們在一週前將一項重要的新功能移出實驗: 在「聯播網」和「時間軸」分頁中擷取網頁螢幕截圖的功能。
在「Network」面板中,按一下小相機圖示啟用影格擷取功能,然後重新載入頁面以觸發擷取。除了使用 WebPageTest 等其他工具擷取的螢幕擷取畫面之外,我們目前只會顯示實際的影格。
按兩下其中一個影格時,畫面會顯示縮放後的檢視畫面 (然後使用向左/向右鍵進行瀏覽),將滑鼠遊標懸停在面板上時,系統會在面板和時間軸上顯示線條,視覺化呈現影格擷取的確切時間,協助您找出載入序列的關聯。如此一來,對常見載入問題 (例如轉譯封鎖網頁字型) 的偵錯就更加簡單。
在「時間軸面板」中,勾選頂端工具列中的「螢幕截圖」核取方塊,即可啟用螢幕截圖擷取功能。這裡的事物運作方式與「網路」面板稍有不同:在這個案例中,不論實際繪畫為何,我們都會盡量頻繁地拍攝,以便根據時間軸中其他資料列的線性時距捨棄上述螢幕截圖。將滑鼠遊標懸停在上方時,系統會顯示放大的影格,不必按兩下即可顯示預覽畫面。
由於這兩類的功能和使用者體驗有點不同步的情況,因此建議您試用這項功能,並透過 crbug.com/new 上的支援單或 推文至 @ChromeDevTools 提供意見回饋。
「網路」面板中的網路節流
網路節流是我們在推出裝置模式時新增的功能,可在「網路」面板工具列中找到第二個首頁,方便您集中專心處理網路最佳化作業。
這個新家就像一模一樣,但在裝置模式下仍可使用 因為在開發網站回應式設計時, 模擬連線品質不佳仍相當重要。
最後,你是不是曾經有過那種貧窮的人? 不知道為何自己的網路連線在漫長一整天後中斷,或者只是發現忘記停用網路節流功能?啟用網路節流功能時,「Network」面板分頁現在會顯示警告圖示。
各種精密
- 想知道網路時間軸上有那些奇怪的圓圈嗎?當然,這些是「擷取影格」 (在新電影膠捲中的時間點) 的時間點。現在只要將滑鼠遊標懸停在線條上,就會顯示為線條。
- 裝置模式現在會在您切換裝置時沿用螢幕方向
社群活動訊號
Chrome 開發人員工具的停機時間表
Bret Little 發布這堂簡短的逐步操作說明課程,不僅熟悉基本開發人員工具功能,也提供許多深入的提示與秘訣。這些資訊絕對非常實用, 而更多開發人員工具文件一定能派上用場!
是開發人員工具 IDE...?
網頁程式開發人員和開發人員工具愛好者 Kenneth Auchenberg 於幾個月前開發出獨立的開發人員工具應用程式,並在本週再次運用網誌文章 (駭客) 最新消息。
將 DevTools 變成完整的 IDE 真的很有趣,我們許多團隊成員以前都曾夢想過,但也是一種史詩般的提案。
你有什麼看法? 開發人員工具 IDE 是管線 dream,還是正常運作嗎?看起來如何?歡迎在留言中告訴我們!
我們到時見!
Paul Bakaus 與開發人員工具團隊