Chrome DevTools手冊中文版分享給大家,從最基礎的介紹到技巧, 通過使用DevTools,可以更加高效的定位頁面布局問題, 設置JavaScript斷點并且更好的理解代碼優(yōu)化。
Chrome DevTools手冊中文版預覽
Chrome DevTools手冊中文版目錄
致謝
介紹
學習基礎
概覽
開發(fā)工作流
使用控制臺
小技巧——控制臺篇
小技巧——Timeline篇
小技巧——Profiles篇
小技巧——代碼篇
小技巧——頁面元素篇
小技巧——網(wǎng)絡篇&設置
工具使用
CSS預處理器(todo)
應用存儲(todo)
Chrome主要有9個功能組,分別對應了9個面板:
Elements:在 Elements 面板中可以通過 DOM 樹的形式查看所有頁面元素,同時也能對這些頁面元素進行所見即所得的編輯
Console:一方面用來記錄頁面在執(zhí)行過程中的信息(一般通過各種 console 語句來實現(xiàn)),另一方面用來當做 shell 窗口來執(zhí)行腳本以及與頁面文檔、DevTools等進行交互
Sources:Sources 面板主要用來調試頁面中的 JavaScript
Network:在 Network 面板中可以查看通過網(wǎng)絡來請求來的資源的詳細信息以及請求這些資源的耗時
Performance:在 Performance 面板可以查看頁面加載過程中的詳細信息,比如在什么時間開始做什么事情,耗時多久等等。有人會問,這個跟上面的 Network 有什么區(qū)別呢,上面也能顯示耗時信息。在 Performance 面板中,你不僅可以看到通過網(wǎng)絡加載資源的信息,還能看到解析 JS、計算樣式、重繪等頁面加載的方方面面的信息
Memory:Memory 面板主要顯示頁面 JS 對象和相關聯(lián)的 DOM 節(jié)點的內存分布情況
Application:記錄網(wǎng)頁加載的所有資源,包括存儲信息、緩存信息以及頁面用到的圖片、字體、腳本、樣式等信息
Security:用于檢測當面頁面的安全性
Audits:審計面板會對頁面的加載進行分析,然后給出提高頁面性能的建議,官網(wǎng)建議查看 PageSpeed Insights 來獲得更多的頁面加載建議。
- PC官方版
- 安卓官方手機版
- IOS官方手機版