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