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

Paul Bakaus
Paul Bakaus

開發人員工具最新消息

這篇文章的第一則新聞有點特別,因為它就是這則更新本身!我會不定期 (至少每月一次) 總結 Chrome DevTools 的最新動態。

我說「最新」是認真的:我會談論 Chrome Canary 剛推出的新功能,如果您想使用穩定版,也沒問題。但如果你喜歡冒險,且想保持領先,這些貼文就是你的最佳選擇。除了最新功能和錯誤修正項目外,每篇貼文結尾處都會提供「社群心得」專區,精選最優質的使用者貢獻內容。

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


開發人員工具新功能

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

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

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

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

「Timeline」面板中,切換頂端工具列中的「螢幕截圖」核取方塊,即可啟用螢幕截圖擷取功能。相較於「網路」固定樣本,情況會有些許不同:在此例中,我們會盡可能地盡量擷取各種圖像, 以根據與時間軸中其他各列相關的線性時間量,來捨棄上述螢幕截圖。無須按兩下即可顯示預覽畫面,只要將滑鼠游標懸停在圖片上,就會顯示放大的畫面。

這些功能和使用者體驗方面有些許同步,因此歡迎您試用這項功能,並歡迎您透過 crbug.com/new 支援單或 Tweet 張貼意見回饋,將任何意見回饋提供給 @ChromeDevTools

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

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

網路節流運作情形

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

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

各種小道消息


社群心跳

使用 Chrome 開發人員工具進行深入分析

網路節流運作情形

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

開發人員工具 IDE…?

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

將開發人員工具轉換成功能完備的 IDE 是個好點子,許多團隊成員都曾經夢想過,但這同時也是絕佳的專案。


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

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