前言

Chrome Devtools應(yīng)該是每一位做前端都會(huì)用到的一個(gè)工具吧！

菜單面板結(jié)束

Chrome菜單面板

• Elements 頁(yè)面Dom元素
• Console 控制臺(tái)
• Source 頁(yè)面加載靜態(tài)資源
• Network 網(wǎng)絡(luò)
• Performance 設(shè)備新能加載分析
• Application 應(yīng)用信息
• Security 安全分析
• Audits 審計(jì) 自動(dòng)化測(cè)試工具

CSS相關(guān)的

有時(shí)我們?cè)趯?xiě)網(wǎng)頁(yè)的時(shí)候，需要模仿別人的樣式，然后就是復(fù)制就好了。

直接選取查看

如我們想查看Ant Design的按鈕樣式蹋订，我們就可以直接選擇元素，然后就能在Styles面板中看到按鈕樣式了。

直接選取元素

查看通過(guò)hover顯示樣式

比如我們喜歡一個(gè)按鈕的hover樣式忌堂，但是按鈕只有在hover的時(shí)候才會(huì)顯示。

hover

查看樣式在源文件的位置

通過(guò)上面的兩個(gè)小例子酗洒，基本的元素查找士修。但是我們?nèi)绾慰焖購(gòu)?fù)制別人的樣式呢？

• 1.我們可以直接在Styles面板中樱衷，鼠標(biāo)左鍵選取樣式棋嘲，然后Ctrl + c 復(fù)制就好了。

鼠標(biāo)左鍵選取樣式

• 2.通過(guò)查看源文件直接復(fù)制矩桂。

通過(guò)查看源文件查看復(fù)制樣式

選取通過(guò)JS才顯示的元素CSS

在開(kāi)發(fā)工具中的Elements面板查找大多數(shù)的元素的css其實(shí)并不難沸移。大多數(shù)情況下可以直接鼠標(biāo)右鍵該元素，點(diǎn)擊檢查，然后就能在Elements面板中找到它雹锣；或者按F12通過(guò)左上方的↖箭頭選取元素流妻，然后在Styles中就能看到該元素的樣式了。

但是有些元素是基于JavaScript的笆制，只有用戶進(jìn)行了操作了才會(huì)顯示绅这，如：通過(guò)click，mouseover等事件在辆。這個(gè)時(shí)候我們就無(wú)法用過(guò)審查元素快速查找到元素和查找樣式了证薇。

解決方案：

• 打開(kāi)開(kāi)發(fā)者工具（按F12或者Ctrl + Shift + I）
• 打開(kāi)Source面板
• 執(zhí)行用戶操作讓元素可見(jiàn)（如鼠標(biāo)懸停）
• 在元素可見(jiàn)的情況下按下F8（與“暫停腳本執(zhí)行”按鈕相同）
• 點(diǎn)擊左上方的“選取元素”按鈕
• 選擇頁(yè)面的元素（此時(shí)會(huì)自動(dòng)進(jìn)入到Elements面板中）

選取通過(guò)JS才能顯示的元素樣式

通過(guò)CSS選擇器尋找元素

打開(kāi)開(kāi)發(fā)者工具在Elements面板中，按（Ctrl + F）即可在下面看到一個(gè)“find”欄

元素搜索

在這里可以使用字符串匆篓、選擇器以及Xpath尋找元素

這里也是可以直接使用類(lèi)似于CSS的選擇器那樣查找元素的浑度，如我們可以使用div.samples選擇器來(lái)搜索以及遍歷文檔下所有的class為samples的div元素

直接編輯元素盒模型

在審查頁(yè)面上的一個(gè)元素時(shí)，可以在Styles面板的旁邊看到一個(gè)Computed面板鸦概，點(diǎn)擊就可以看到該元素的可視化盒模型箩张，上面有各部分的值

Computed面板

雙擊上面的數(shù)值即可對(duì)它們的值進(jìn)行編輯

通過(guò)Computed改變盒模型各部分的值

在Style面板地增減屬性值

我們選取元素后再Style面板中可以直接更改元素的屬性值， 點(diǎn)擊屬性值然后輸入我們想要的值如： “50px"這里是必須帶單位的窗市。

直接輸入屬性值

但是其實(shí)我們可以讓數(shù)值以不同的方式遞增遞減的

• 上方向鍵(↑)/下方向鍵(↓)可以讓值以1遞增/1遞減
• ALT + 上方向鍵(↑)/下方向鍵(↓) 可以讓屬性值以 0.1遞增 / 0.1遞減
• SHIFT + 上方向鍵(↑)/下方向鍵(↓) 可以讓屬性值以 10 遞增 / 10 遞減
• CTRL + 上方向鍵(↑)/下方向鍵(↓) 可以讓屬性值以 100 遞增 / 100 遞減

開(kāi)發(fā)工具顏色功能

在CSS中處理顏色是經(jīng)常會(huì)遇到的先慷，而開(kāi)發(fā)者工具剛好可以方便快捷的編輯、測(cè)試顏色值咨察。

1.對(duì)比度

首先论熙，在開(kāi)發(fā)者工具中查看選取選取元素，并在Style面板中查看元素的Colors屬性時(shí)（background-color是沒(méi)有對(duì)比度的）摄狱，可以點(diǎn)擊顏色值旁邊的顏色采集器脓诡。在顏色采集器中，可以看到對(duì)比度選項(xiàng)媒役，指示你所選擇的文本顏色搭配背景顏色是否有可訪問(wèn)的對(duì)比度祝谚。

顏色工具-對(duì)比度

顏色采集器在色譜中顯示兩條彎曲的白線，第一條白線表示最小可接受對(duì)比度開(kāi)始和結(jié)束位置酣衷，第二條白線表示次于第一個(gè)的最小接受對(duì)比度開(kāi)始和結(jié)束位置交惯。

2.調(diào)色板
除了可訪問(wèn)性功能外，還可以訪問(wèn)不同的調(diào)色板鸥诽，包括Material商玫，Custom箕憾，CSS Variables牡借，Page colors。

顏色工具-調(diào)色板

3.切換顏色值語(yǔ)法

在Styles面板中會(huì)顯示CSS里寫(xiě)的顏色的語(yǔ)法袭异，但是開(kāi)發(fā)工具可以通過(guò)按住SHIFT然后點(diǎn)擊顏色小方塊钠龙，在HEX，RGBA，HSLA之間切換顏色值碴里。

SHIFT切換顏色值

或者可以在色譜中點(diǎn)擊切換按鈕

切換顏色值

其他

調(diào)試工具的其他功能

編輯CSS陰影

text-shadow和box-shadow的css手寫(xiě)有時(shí)無(wú)法直觀預(yù)測(cè)到它的效果沈矿，以及語(yǔ)法也容易忘記，且兩種語(yǔ)法略有不同咬腋。

好在Chrome的開(kāi)發(fā)者工具可以讓我們方便的調(diào)試text-shadow和box-shadow的內(nèi)外陰影羹膳。

編輯元素陰影

上面這個(gè)Dome是使用的QQ瀏覽器演示的。

但是最新版的Chrome好像舍棄了直接給元素添加text-shadow和box-shadow的功能根竿，但如果你的元素有作用了text-shadow或者box-shadow依然可以點(diǎn)擊box-shadow或者text-shadow旁邊的小方塊調(diào)出該調(diào)試面板陵像。

chrome調(diào)試box-shadow

Firefox的filter編輯器

filter是現(xiàn)在幾乎在移動(dòng)端和PC端都支持的一個(gè)新功能，而Firefox提供了一個(gè)友好的小工具讓我們更加方便的編輯filter值寇壳。

一旦你的代碼中有filter（提示：如果你不知道實(shí)際的語(yǔ)法醒颖，可以先寫(xiě)上filter：none）然后就可以在filter旁邊看到一個(gè)黑邊相間的堆疊方塊，點(diǎn)擊即可進(jìn)入到filter編輯器中壳炎。

firefox的filter編輯器

可以個(gè)單個(gè)值加不同的filter泞歉，刪除單個(gè)filter值，或者拖動(dòng)filter重新排列它們的層次匿辩。

firefox-filter

Styles面板中編輯CSS動(dòng)畫(huà)

在Chrome中的Styles面板中編輯靜態(tài)元素非常簡(jiǎn)單腰耙，那么編輯animation屬性以及@keyframes創(chuàng)建動(dòng)畫(huà)呢？

這個(gè)時(shí)候我們就可以使用瀏覽器為我們提供的Animation面板了铲球，默認(rèn)是沒(méi)有開(kāi)啟的沟优。

開(kāi)啟Animation面板的步驟

這里使用https://animate.style/ 上的案例測(cè)試。

瀏覽器-Animation面板

查看未使用的CSS&JS

有大量的工具可以幫助我們追蹤未在頁(yè)面上使用的CSS睬辐，這樣我們就可以選擇刪除它們挠阁，沒(méi)必要加載它們，來(lái)提高頁(yè)面的加載速度溯饵。

默認(rèn)也是沒(méi)有開(kāi)啟該面板的侵俗，開(kāi)啟步驟如下：

Coverage開(kāi)啟步驟

這不光是可以查看CSS對(duì)于JS的代碼重復(fù)的也是可以查看的

Coverage的使用

常用命令和調(diào)試

打開(kāi)指令面板

在Devtools打開(kāi)的情況下，輸入Ctrl + Shift + P 來(lái)將其激活丰刊， 不同的操作系統(tǒng)可能快捷鍵不一樣隘谣，可以打開(kāi)Source面板查看。

Source面板

然后可以在欄中刪除默認(rèn)的">"就會(huì)提示你 “鍵入"?"查看可用的命令”

command可用命令

• ...： 打開(kāi)文件
• !: 運(yùn)行腳本
• ::前往文件
• @：前往表示符(函數(shù)啄巧，類(lèi)名)
• >： 打開(kāi)某菜單功能

常用命令

性能監(jiān)視器

>performance monitor

performance monitor

將顯示性能監(jiān)視器以及相關(guān)信息寻歧，例如CPU，JS堆大小和DOM節(jié)點(diǎn)秩仆。

FPS實(shí)時(shí)監(jiān)控

> FPS

chrome FPS

整個(gè)頁(yè)面截圖

有時(shí)我們想截圖真整個(gè)網(wǎng)頁(yè)码泛，可能需要一些軟件在完成，最為方便的可以使用QQ的長(zhǎng)截圖澄耍。

QQ的長(zhǎng)截圖

鍵入> full然后選擇

Capture full size screenshot

Capture full size screenshot

截圖單個(gè)元素

鍵入>node 選擇

Capture node screenhot

`Capture node screenhot`

DOM調(diào)試

當(dāng)要調(diào)試特定元素的DOM中更改時(shí)噪珊，這可以用到這些DOM更改斷點(diǎn)的類(lèi)型

DOM斷點(diǎn)

DOM調(diào)試

• Subtree modifications: 子節(jié)點(diǎn)刪除或添加時(shí)
• Attributes modifications: 屬性修改時(shí)
• Node Removal: 節(jié)點(diǎn)刪除時(shí)

例子

Attributes modifications

監(jiān)聽(tīng)input的屬性變化晌缘，來(lái)觸發(fā)斷點(diǎn)調(diào)試。

DOM增刪復(fù)制

• Add attribute : 為當(dāng)前元素添加屬性
• Eidit as HTML: 編輯當(dāng)前元素的HTML標(biāo)簽
• Duplicate element: 復(fù)制當(dāng)前元素痢站，并粘貼到當(dāng)前元素下放
• Delete element: 刪除選中的DOM元素
• Hide element：隱藏當(dāng)前DOM元素
• Expand recursively: 無(wú)論頁(yè)面層級(jí)多深都能全部打開(kāi)
• Collapse children: 這個(gè)和Expand recursively相反磷箕，會(huì)將子元素全部折疊起來(lái)。
• Capture node screenhot: 截圖當(dāng)前元素
• scroll into view:將頁(yè)面滾動(dòng)到元素
• Store as global variable: 將當(dāng)前選定的元素添加到全局變量中阵难，類(lèi)似于使用document.querySelector()選取當(dāng)前元素（JS）

DOM小例子

查看當(dāng)前元素作用的事件

有的是有我們想看當(dāng)前元素的點(diǎn)擊事件岳枷，對(duì)應(yīng)在源文件哪一行，如果是在Resource中查看源文件很難找到具體的位置呜叫。我們可以直接選取元素在Event Listeners面板中查看當(dāng)前元素作用的事件有哪些嫩舟，并查看對(duì)應(yīng)的源碼。

通過(guò)DOM找事件

黑盒腳本

所有的前端開(kāi)發(fā)人員都會(huì)遇到的問(wèn)題怀偷，在應(yīng)用程序中會(huì)出現(xiàn)錯(cuò)誤家厌。當(dāng)開(kāi)始調(diào)試的時(shí)候，但是經(jīng)過(guò)逐行調(diào)試的時(shí)候椎工，調(diào)速器會(huì)跳轉(zhuǎn)到不是自己的焦點(diǎn)文件中（如第三方庫(kù)JQuery饭于、JQuer插件庫(kù)等）。

這個(gè)時(shí)候Blackboxing就可以解決這一問(wèn)題维蒙，以便于可以繞過(guò)一個(gè)第三方庫(kù)掰吕，當(dāng)您黑箱一個(gè)源文件時(shí)，調(diào)試時(shí)代碼,調(diào)試器將不會(huì)跳轉(zhuǎn)到該文件(黑箱中的文件)颅痊。

原理

• 1.進(jìn)入\退出\過(guò)渡繞過(guò)庫(kù)代碼
• 2.事件偵聽(tīng)器斷點(diǎn)不會(huì)破壞庫(kù)代碼
• 3.調(diào)試器不會(huì)暫停代碼庫(kù)中設(shè)置的任何斷點(diǎn)

所以當(dāng)黑箱一個(gè)腳本時(shí)殖熟，能讓你更加方便專(zhuān)注于自己調(diào)試代碼。

設(shè)置

打開(kāi)Devtools打開(kāi)設(shè)置

設(shè)置黑盒機(jī)制

可以直接快捷鍵F1或者SHIFT + ?即可進(jìn)入到設(shè)置界面斑响。

chorme setting

現(xiàn)在最新的Chrome叫Igore List菱属，以前的叫Blackboxing。

在這里可以輸入添加到黑名單的腳本的文件名：

• 輸入文件的名稱(chēng)
• 使用正則表達(dá)式來(lái)定位
• 包含特定名稱(chēng)的文件 如： /jquery.js$
• 某些類(lèi)型的文件 如： .min.js$
• 列表內(nèi)容 列表內(nèi)容或者輸入想要加入忽略的文件夾

直接在源文件中右鍵 —> Add script to ignore list

Add script to ignore list

事件監(jiān)聽(tīng)器

• 1.在Source面板中

• 2.展開(kāi)Event Listener Breakpoints

• 3.選擇監(jiān)聽(tīng)的事件類(lèi)型舰罚，觸發(fā)事件啟用斷點(diǎn)纽门。

Event Listener Breakpoints

如上當(dāng)我們監(jiān)聽(tīng)了鼠標(biāo)事件，就會(huì)跳入到斷點(diǎn)處营罢。

Overrides

在新的chrome中赏陵，我們可以使用本地資源覆蓋網(wǎng)頁(yè)所使用的資源，可以使用本地的CSS覆蓋網(wǎng)頁(yè)上CSS文件饲漾，修改樣式蝙搔。或者添加JSON文件模擬Mock虛擬數(shù)據(jù)考传。

使用步驟

• 1.打開(kāi)Devtools工具的Source面板

Sources -> Overrides

• 2.我們可以在本地磁盤(pán)中建立一個(gè)文件夾吃型，專(zhuān)門(mén)用local Override的根目錄。

控制臺(tái)指令

使用控制臺(tái)指令我們使用的最多應(yīng)該就是Console了伙菊，進(jìn)行日志打印败玉。其實(shí)Console控制臺(tái)可以像Linux一樣使用很多命令，甚至可以用于臨時(shí)的腳本腳本調(diào)試镜硕。

$ 選擇器

這里的$符號(hào)類(lèi)似于JQuery的選擇器运翼，其實(shí)也是document.querySelecotr()的簡(jiǎn)寫(xiě)。

$選擇器

? 選擇器

這個(gè)其實(shí)就是document.querySelectorAll()的簡(jiǎn)寫(xiě)兴枯， 返回一個(gè)數(shù)組標(biāo)簽元素

?(".btn")

$x選擇器

$x(path)返回與給定的xpath表達(dá)式匹配的DOM元素?cái)?shù)組血淌。

例子

$x('//h1[@class="title"]');
// 選取頁(yè)面上class為title的h1標(biāo)簽

$x("http://p[a]");
// 選取頁(yè)面上p標(biāo)簽下包含a標(biāo)簽的所有元素

getEventListeners

獲取指定對(duì)象綁定的事件

getEventListeners

getComputedStyle

獲取元素的樣式

getComputedStyle

clear

有的時(shí)候控制臺(tái)會(huì)有很多日志信息或者報(bào)錯(cuò)信息，這時(shí)也是可以像Linux一樣清屏的

clear()

clear

copy

有時(shí)調(diào)試的時(shí)候财剖，我們需要復(fù)制一些數(shù)據(jù)

[圖片上傳失敗...(image-bbdacf-1616328356868)]

keys/values

打印一個(gè)對(duì)象的所有鍵或者所有的值

keys & values

table

Devtools提供了將對(duì)象數(shù)組打印為表格的API

table

花式Console

我們經(jīng)常能在各大網(wǎng)站上看到一些有趣的console

簡(jiǎn)書(shū)的console

知乎的console

天貓的console

console

console能用的方法

變量打印

使用%s, %o, ·%d和%c

var text = "測(cè)試文本";
console.log(`${text}`); // 使用ES6模板字符串輸出變量
console.log("打印 %s", text); // 使用 %s 打印字符串
var obj = {"name": "曌明", "age": 18};
console.log("打印 %o", obj);
var num = 1024;
console.log("打印 %d", num);

測(cè)試結(jié)果

%c 打印

這個(gè)%c比較特殊悠夯，可用于改寫(xiě)輸出樣式。

console.log('%c 測(cè)試文本', 'font-size:50px; background: ; text-shadow: 10px 10px 10px red')

cosole-log %c

當(dāng)然也是配合其他的占位符一起使用

console-log-%s-%c

所以我們也可以模仿簡(jiǎn)書(shū)的打印

console.log('%c Environment %c production',
           'padding: 1px; border-radius: 3px 0 0 3px; color: #fff;background:#606060;',
           'padding: 1px; border-radius: 0 3px 3px 0; color: #fff;background:#42c02e'
            );
console.log('%c Platform %c shakespeare',
           'padding: 1px; border-radius: 3px 0 0 3px; color: #fff;background:#606060;',
           'padding: 1px; border-radius: 0 3px 3px 0; color: #fff;background:#1475b2'
            );
console.log('%c Version %c 1.1.0',
           'padding: 1px; border-radius: 3px 0 0 3px; color: #fff;background:#606060;',
           'padding: 1px; border-radius: 0 3px 3px 0; color: #fff;background:#1475b2'
            );
console.log('%c Build Date %c 2021-03-11T08:05:31.530Z',
           'padding: 1px; border-radius: 3px 0 0 3px; color: #fff;background:#606060;',
           'padding: 1px; border-radius: 0 3px 3px 0; color: #fff;background:#1475b2'
            );
console.log('%c Auth ', 
            'color: white; background-color: #2274A5', 
            'Login page rendered');
console.log('%c GraphQL ', 
            'color: white; background-color: #95B46A', 
            'Get user details');
console.log('%c Error ', 
            'color: white; background-color: #D33F49', 
            'Error getting user details');

美化console

對(duì)象打印

當(dāng)我們需要答應(yīng)對(duì)象的時(shí)候躺坟，異常要一個(gè)個(gè)的去輸出沦补，且看不到對(duì)象名稱(chēng)，不利于debug

console打印對(duì)象

但是其實(shí)我們也是可以使用ES6的對(duì)象結(jié)構(gòu)咪橙，所謂的結(jié)構(gòu)賦值

console.log({"location": location, "navigator": navigator})
// 或者簡(jiǎn)寫(xiě)
console.log({location, navigator})

console

斷言

當(dāng)你需要在特定的條件下判斷時(shí)打印日子夕膀，這個(gè)將十分有用。

• 如果斷言為false美侦， 則將一個(gè)錯(cuò)誤信息寫(xiě)入到控制臺(tái)中产舞。
• 如果斷言是true， 則控制臺(tái)不輸出任何信息菠剩。

var val = 100;
console.assert(val === 102, "val does not equal 102")

console.assert

測(cè)試執(zhí)行效率

var i = 0;
console.time("while loop");
while(i < 100000){
    i++;
}
console.timeEnd("while loop");

console.time&console.timeEnd

分組

console.group('用戶列表');
console.log('name: 曌明');
console.log('job: student');
// 內(nèi)層0
console.group('地址');
console.log('Street: 123 街');
console.log('City: 湖北');
console.log('State: 在職');
console.groupEnd(); // 結(jié)束內(nèi)層0
// 內(nèi)層1
console.group("愛(ài)好")
console.log('hobby1: play football');
console.log('hobby2: play basketball');
console.log('hobby3: play badminton');
console.groupEnd(); // 結(jié)束內(nèi)層1
console.groupEnd(); // 結(jié)束外層

執(zhí)行結(jié)果

console.group

dir

利用console.dir可以用來(lái)答應(yīng)DOM節(jié)點(diǎn)對(duì)象

console.log(document);

這個(gè)和console.log是有點(diǎn)一點(diǎn)區(qū)別的易猫，log打印的是DOM樹(shù)形結(jié)構(gòu)，而dir打印的是純標(biāo)簽具壮。

網(wǎng)絡(luò)Network

網(wǎng)絡(luò)請(qǐng)求這個(gè)面板是否非常有用的准颓，不管是前后端協(xié)同開(kāi)發(fā)還是做爬蟲(chóng)分析一般都會(huì)使用到這個(gè)功能。

chrome-network面板

捕捉屏幕截圖

通過(guò)capture screenshots 可以查看這個(gè)時(shí)間段頁(yè)面的加載情況棺妓。

capture screenshots

查看響應(yīng)信息

http響應(yīng)信息

這個(gè)里面可以很清楚查看Http的請(qǐng)求頭瞬场，Http的狀態(tài)碼，Http的返回內(nèi)容等這種這樣的信息涧郊。

調(diào)試Nodejs

關(guān)于chrome調(diào)試Nodejs教程