Chrome開發者工具介紹
- 前言
- 1 打開DevTools
- 2 命令菜單
- 3 Elements面板
- Console
- JavaScript調試
- Network
前言
Chrome開發者工具是谷歌瀏覽器自帶的一款開發者工具，它可以給開發者帶來很大的便利。常用的開發者工具面板主要包含Elements面板、Console面板、Sources面板、Network面板、Performance面板、Memory面板、Application面板。
| 名稱 | 說明 |
|---|---|
Elements | 查找網頁源代碼HTML中的任一元素，手動修改任一元素的屬性和樣式且能實時在瀏覽器里面得到反饋 |
Console | 記錄開發者開發過程中的日志信息，且可以作為與JS進行交互的命令行Shell |
Sources | 用于查看頁面的HTML文件源代碼、JavaScript源代碼、CSS源代碼，可以調試JavaScript源代碼，可以給JS代碼添加斷點等 |
Network | 從發起網頁頁面請求Request后分析HTTP請求后得到的各個請求資源信息（包括狀態、資源類型、大小、所用時間等），可以根據這個進行網絡性能優化。 |
Performance | 評估實時網頁性能以及相關的數據 |
Memory | 堆棧快照、JavaScript函數內存分配、隔離內存泄漏 |
Application | 記錄網站加載的所有資源信息，包括存儲數據（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、緩存數據等 |
1 打開DevTools
路徑1：菜單——>更多工具——>開發者工具
路徑2：快捷鍵F12
路徑3：右鍵——>檢查
2 命令菜單
在控制臺中，可以打開命令菜單的快捷鍵：
mac：command+shift+p
win：ctrl+shift+p
一些實用的命令：
| 說明 | 命令 |
|---|---|
| 切換主題顏色 | switch to dark theme切換黑色主題switch to light theme切換白色主題 |
| 截屏 | Capture area screenshot截取網頁上任意區域的屏幕，不包括控制臺Capture full size screenshot截取全屏，包括滾動條的區域Capture node screenshot截取某個元素的屏幕（選擇該命令后，使用左上角的箭頭選中頁面上某個元素，再打開命令菜單輸入該命令）Capture screenshot截取網頁當前的屏幕 |
| 切換調試工具的位置 | Dock to bottom底部顯示調試工具Dock to right右邊顯示調試工具Dock to left左邊顯示調試工具 |
3 Elements面板
ctrl+F 查找
//section/p 查找section下面的p標簽
Console輸入 inspect(dom節點) 查找dom節點
auto-complete添加樣式 輸入屬性名稱或者屬性值，自動補充
user agent stylesheet 瀏覽器內置樣式
inherited from div… 從…繼承來的樣式A
Pseudo 定義的偽類
:hov 查看hover
:cls 可以去掉類名，也可以更改某個元素的類名
復制樣式：選中某個元素，右鍵，選擇copy——>copy styles
Conputed列出了所有生效的樣式，Show all可以看到從父元素繼承來的樣式，Group：對樣式進行功能上的區分
Layout分成了grid和flexbox，列出了所有用到彈性布局和網格布局的容器
show line numbers 展示列數行數
show line labels 展示名稱
show track size 網格所在空間大小
show area names 每個網格名稱
extend grid lines 延長輔助線
列出頁面中所有的綁定的事件，remove去掉事件監聽
DOM Breakpoints
subtree modifications：以當前節點為根節點，子節點修改了會暫停運行
attribute modifications：當前節點屬性被修改了，會暫停
node removal：當前節點被刪除了，會暫停
節點屬性
構建無障礙頁面
Console
快捷鍵：Ctrl+shift+J
$_返回上一條語句執行結果
$0返回上一個選擇的節點
查看代碼執行時間
JavaScript調試
debugger 調試命令
一步一步
打斷點
斷點位置
跳到下一個斷點
將代碼折疊起來
當在頁面中點擊就會暫停
如果進入源碼不想調試，call stack，忽略當前文件
Network
Name
Status
Type
Initiator：什么東西發起的請求
Size：資源的大小
Time：發起請求的時間
WaterFall：瀑布流信息
WS：Websocket
保留歷史請求
模擬用戶設備
請求數量 多少字節數據被傳輸 傳輸來的文件大小（壓縮） 請求完成時間 DOM節點渲染完畢 加載時間
)
