Chrome Dev Summit 2018 is happening now and streaming live on YouTube. Watch now.

DevTools 更新點 (Chrome 58)

歡迎來到首期的 DevTools 發版日誌!從這一版本開始,首次打開新版 Chrome 你會看到 DevTools 有一個 What's New 標籤,裏面含有當前版本發版日誌的鏈接。

亮點

  • Timeline 面板更名爲 Performance 面板。
  • Profiles 面板更名爲 Memory 面板。
  • 可直接編輯 Cookie 值。
  • 在內存溢出前 DevTool 會自動暫停。

新功能

可編輯的 Cookie

雙擊 Cookies 標籤裏的表格項可直接編輯。

圖 1. 編輯 Cookie

感謝 kdzwinel 的貢獻!

CSS 變量可以在 Styles 面板中進行審查和編輯

現在,Styles 面板中可審查和編輯 CSS 變量了。查看此示例親自體驗一把吧。

內存溢出斷點

當程序在短時間內分配佔用了大量內存時,DevTools 會自動暫停並且加大堆棧的上限。 這樣你就可以審查堆棧,在控制檯執行命令來釋放內存,然後繼續進行調試。想了解更多, 請移步 Chrome的一小步,V8堆棧的一大步

圖 2. 在內存溢出點的暫停

Canvas 被創建的斷點

你可以創建一個基於 canvas 上下文被創建時所觸發的事件斷點

圖 3. 從事件斷點面板 canvas 上下文被創建複選框生成的斷點

瀑布流時間線中新增開始時間

在瀑布流時間線頂部,可以看到一條請求是何時加入隊列以及何時開始的。

圖 4. 瀑布流時間線中新增開始時間

用時統計標籤中的服務器信息

現在可以向網絡面板的用時統計標籤中插入自定義的服務器用時統計了。查看服務器用時統計示例

圖 5. 用時統計標籤中的服務器時間統計

變更

Timeline 面板變更爲了現在的 Performance 面板

Timeline 面板更名爲了 Performance 面板,以更好地反映它的功能。

Profiles 面板變成了現在的 Memory 面板

Profiles 面板更名爲了 Memory 面板,以更好地反映它的功能。

CPU 分析器位置變更

既然 Profiles 面板已經更名爲了 Memory 面板,再把 CPU 分析器放這裏面就不合適了。此外,從長遠來看後續 會把所有分析相關的放入性能面板。目前,你仍然可以通過 設置 > 更多工具 > JavaScript Profiler 來訪問老版的 CPU 分析器。

查看 Chrome DevTools: 在 Chrome 58 中進行 JavaScript CPU 分析以瞭解如何在 Performance 面板中 分析 CPU。

全新的控制檯界面

控制檯及相關的標籤進行了界面的更新。一些不太常用的功能進行了隱藏,露出了更加常用的功能。

  • 點擊 控制檯設置圖標 控制檯設置圖標 來進行控制檯相關的設置。
  • Preserve log 被挪到了 控制檯的設置界面.
  • 去掉了 Filters 按鈕及相應的面板。換成了現在的下拉菜單樣式。
  • 過濾控制檯信息的文本輸入框從之前不可見的二級面板中挪了出來,始終顯示。
  • 過濾控制檯信息的文本輸入自動接收正則作爲輸入,所以不需要之前的正則開關了。
  • 去掉了 Hide violations 複選框,取而代之的是日誌等級下拉框中的 Verbose
  • 新版控制檯中,勾選 控制檯設置 中的 Selected context only 的效果和之前老界面裏 去掉 Show all messages 的效果是一樣的。
圖 6. 全新的控制檯界面

WebGL 事件監聽器斷點位置有所變更

WebGL 事件監聽器斷點 從原來的 WebGL 分類中移動到了 Canvas 分類中。 去掉了WebGL 這個分類。