Chrome 開發(fā)者工具
打開Chrome 開發(fā)者工具
- 在Chrome菜單中選擇 更多工具 > 開發(fā)者工具
- 使用
快捷鍵Ctrl+Shift+I(Windows) 或 Opt+Cmd+I (Mac) - 在頁面元素上右鍵點擊约郁，選擇 “檢查”
面板
- Elements: 操作DOM和CSS
- Console: 與頁面交互歇盼，顯示日志等
- Sources: 調(diào)試
- Network: 網(wǎng)絡(luò)抓包分析
- Performance: 性能面板
- Memory: 內(nèi)存面板
- Application: IndexedDB精盅，cookie，應(yīng)用程序緩存...
- Security: 安全面板
- Audits: 性能測試報告
Network
Network 面板概覽
- 選項卡: 控制 Network 面板的外觀和功能
- 過濾: 資源列表中顯示哪些資源况凉。提示：按住 Cmd 或 Ctrl 可以多選
- 時間線: 測量加載資源的時間
- 資源列表: 每一條都代表一個請求資源
- 狀態(tài)欄: 顯示請求總數(shù)谨湘、傳輸?shù)臄?shù)據(jù)量和加載時間等等
資源時間
- Queuing: 請求排隊時間
- Stalled/Blocking: 請求等待發(fā)送所用的時間
- Request sent: 發(fā)出網(wǎng)絡(luò)請求所用的時間
- Waiting (TTFB): 等待初始響應(yīng)所用的時間绽快，也稱為到第一字節(jié)的時間芥丧。
- Content Download: 接收響應(yīng)數(shù)據(jù)所用的時間
上一節(jié) Electron開發(fā)實戰(zhàn)之12-應(yīng)用架構(gòu)
目錄
下一節(jié) Electron開發(fā)實戰(zhàn)之14-webwxapi-02
