樂高渲染側(cè)面向的是C端用戶，C端設(shè)備參差不齊、環(huán)境復(fù)雜，因此給研發(fā)同學(xué)分配了許多> BUG。為了快速解決> BUG，因此需要靈活運(yùn)用調(diào)試工具，遂整理關(guān)于> Chrome瀏覽器的調(diào)試方法，有需取之。在Mac下，使用F12或右鍵“檢查（Inspect Element）”即可打開瀏覽器的調(diào)試工具。

0x01 動(dòng)態(tài)修改元素樣式類名

增刪類名在條件邏輯中比較常見，通過devtools可以直接動(dòng)態(tài)修改/激活/禁用類名

在DOM樹中選中元素
點(diǎn)擊激活.cls
可通過選擇框動(dòng)態(tài)修改是否使用該類名
可通過Add new class輸入框動(dòng)態(tài)添加已定義類名

除了給元素修改類名，還可以動(dòng)態(tài)添加css規(guī)則

0x02 強(qiáng)制激活偽類

網(wǎng)頁(yè)中一些動(dòng)效是基于例如:active、:hover等，當(dāng)鼠標(biāo)移動(dòng)到控制臺(tái)時(shí)，這些偽類就不生效，在控制臺(tái)中也無法調(diào)試css樣式，此時(shí)可以使用強(qiáng)制激活偽類

選中具有偽類效果的元素
點(diǎn)擊:hov
根據(jù)代碼情況，勾選相應(yīng)偽類
在styles面板可動(dòng)態(tài)調(diào)試偽類樣式

**操作方法2：**也可在DOM樹中右鍵菜單 -> Force State -> 勾選對(duì)應(yīng)偽類

0x03 計(jì)算樣式定位到CSS規(guī)則

一個(gè)工程項(xiàng)目的DOM層級(jí)是比較復(fù)雜（深），例如font-size這一樣式屬性，就可能存在多層覆蓋，我們必須定位到最終表現(xiàn)生效的CSS，才能做出有效修改。

在Computed面板中的filter輸入框篩選樣式屬性名
展開屬性，剋看到多處定義，且只有第一行生效
鼠標(biāo)hover時(shí)，左側(cè)顯示->，點(diǎn)擊可跳轉(zhuǎn)到Styles面板中的CSS規(guī)則
可在生效的CSS規(guī)則中修改樣式

在計(jì)算樣式中可以看到顯示在瀏覽器中的真實(shí)大小，在定位IOS客戶端中文字換行問題中，發(fā)現(xiàn)Android系統(tǒng)設(shè)置了字體大小為“極小”，導(dǎo)致學(xué)生端與教師端顯示不一致。

0x04 顏色選擇器

在調(diào)試CSS中，設(shè)置顏色相關(guān)屬性的值，顏色有HEX、RGBA、RGB、HSLA的形式，作為一名專業(yè)的前端開發(fā)工程獅，共 255^3 = 16581375種顏色，反正老夫是記不住。但可以通過Chrome提供的顏色選擇器，動(dòng)態(tài)修改顏色

找到CSS中設(shè)置顏色的屬性
點(diǎn)擊顏色值左側(cè)的選擇器（彩色方塊）

0x05 陰影選擇器

陰影選擇器用于box-shadow屬性，可以直接通過選擇器可視化調(diào)整

點(diǎn)擊box-shadow屬性右側(cè)的“層疊偏移圖標(biāo)”，彈出陰影選擇器
通過顏色選擇器面板可設(shè)置橫縱軸偏移量、陰影模糊度和擴(kuò)散度、內(nèi)外陰影

0x06 CSS屬性值快速調(diào)整

鼠標(biāo)滾輪可以實(shí)現(xiàn)css屬性值的微調(diào)或快速調(diào)整，比如字體大小、旋轉(zhuǎn)角度、寬高數(shù)值等鼠標(biāo)滾輪不只是+-1

+-0.1：Option+鼠標(biāo)滾輪，windows系統(tǒng)是Alt+滾輪
+-1：滾輪前后滾動(dòng)
+-10：Shift+鼠標(biāo)滾輪
+-100：Command+鼠標(biāo)滾輪，Windows系統(tǒng)是Ctrl+滾輪

0x07 animation動(dòng)畫調(diào)試

某些元素動(dòng)畫效果可以通過“幀動(dòng)畫”、transition實(shí)現(xiàn)，開發(fā)實(shí)現(xiàn)過程中的代碼過于抽象，實(shí)際上還是得在瀏覽器中查看效果。Chrome開發(fā)工具提供了針對(duì)animation的調(diào)試面板。該面板可提供動(dòng)畫重播、暫停、預(yù)覽、修改操作方法：

打開控制臺(tái)，鍵盤按“ESC”，調(diào)出Console面板
點(diǎn)擊Console面板左上角“豎三點(diǎn)”，彈出菜單選擇“Animations”，即可打開動(dòng)畫調(diào)試面板

在動(dòng)畫面板可以看到幀動(dòng)畫的名稱和對(duì)應(yīng)DOM節(jié)點(diǎn)，點(diǎn)擊第一列的DOM節(jié)點(diǎn)，可以快速定位到Elements面板中DOM所在位置，同時(shí)Styles面板也會(huì)更新，可滾動(dòng)Styles面板到底部即可看到已定義的“幀動(dòng)畫” 動(dòng)畫面板的作用：

定位動(dòng)畫作用的DOM結(jié)構(gòu)
控制動(dòng)畫執(zhí)行過程：播放、暫停、重播、減速動(dòng)畫、控制執(zhí)行時(shí)間
預(yù)覽動(dòng)畫執(zhí)行過程、動(dòng)畫時(shí)間曲線
偵聽記錄所有動(dòng)畫過程

0x08 復(fù)制控制臺(tái)變量到剪貼板

Console面板輸出了很多日志，當(dāng)我們想要復(fù)制一個(gè)打印的復(fù)雜對(duì)象時(shí)，發(fā)現(xiàn)直接復(fù)制會(huì)導(dǎo)致數(shù)據(jù)丟失，此時(shí)只需要一個(gè)copy()函數(shù)，即可將變量復(fù)制到剪貼板

0x09 網(wǎng)頁(yè)可視化編輯

F12工程師，可以快速偽造網(wǎng)頁(yè)了在控制臺(tái)(Console)執(zhí)行：

document.body.contentEditable="true"
或document.designMode = "on"

0x0A 模擬弱網(wǎng)環(huán)境

在Network Tab下，可在Online下拉框選擇模擬弱網(wǎng)環(huán)境同時(shí)還可以添加自定義的網(wǎng)絡(luò)環(huán)境可設(shè)置上傳網(wǎng)速、下載網(wǎng)速和網(wǎng)絡(luò)延時(shí)

0x0B XHR重放

XML HTTP Request會(huì)在Network Tab下記錄，選中對(duì)應(yīng)的XHR記錄，右鍵可以重放網(wǎng)絡(luò)請(qǐng)求。此外，如果還想在重放請(qǐng)求時(shí)修改請(qǐng)求參數(shù)，則可以復(fù)制請(qǐng)求包到命令行下修改后執(zhí)行

curl 'https://www.baidu.com/s?ie=utf-8&csq=1&pstg=21&mod=2&isbd=1&cqid=8e79bf0d0004f40d&istc=8905&ver=0QxsJN2ZOr4aje7f6_0UmO9Z20VzWyiNCYC&chk=5fc9f524&isid=F000276D55E53989&ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E5%AD%97%E8%8A%82%E8%B7%B3%E5%8A%A8&fenlei=256&rsv_pq=aa5b9db10000e460&rsv_t=5c57hKI5zVEqdfLfosNaYFxE%2B4vOfqPH059N%2FYFLF1bEBAux2Mo0HRD%2FeQA&rqlang=cn&rsv_enter=1&rsv_dl=ib&rsv_sug3=14&rsv_sug1=12&rsv_sug7=100&_ck=115040.0.-1.-1.-1.-1.-1&rsv_isid=33213_1459_33061_33113_33098_33101_33183_33181_33145_33211_33199_33217_22159_33216_33215_33185&isctg=5&rsv_stat=-2&rsv_sug7=100' \
  -H 'Connection: keep-alive' \
  -H 'Pragma: no-cache' \
  -H 'Cache-Control: no-cache' \
  -H 'Accept: */*' \
  -H 'is_xhr: 1' \
  -H 'X-Requested-With: XMLHttpRequest' \
  -H 'is_referer: https://www.baidu.com/' \
  -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.67 Safari/537.36' \
  -H 'Sec-Fetch-Site: same-origin' \
  -H 'Sec-Fetch-Mode: cors' \
  -H 'Sec-Fetch-Dest: empty' \
  -H 'Referer: https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E5%AD%97%E8%8A%82%E8%B7%B3%E5%8A%A8&fenlei=256&rsv_pq=aa5b9db10000e460&rsv_t=5c57hKI5zVEqdfLfosNaYFxE%2B4vOfqPH059N%2FYFLF1bEBAux2Mo0HRD%2FeQA&rqlang=cn&rsv_enter=1&rsv_dl=ib&rsv_sug3=14&rsv_sug1=12&rsv_sug7=100' \
  -H 'Accept-Language: zh-CN,zh;q=0.9' \
  -H 'Cookie: BIDUPSID=7FFA50202A583B0E5768F9404E44F84B; PSTM=1594532284; BD_UPN=123253; BAIDUID=F00027F4581A89A057BFF664D0C6D55E:FG=1; sugstore=0; H_WISE_SIDS=163166_163200_161505_150967_160246_160663_156287_161253_159548_159610_162915_155225_161299_163302_162372_159382_163162_160443_161421_157264_163396_161420_127969_161771_159066_161961_160898_161729_161922_131423_163164_128701_162117_158055_162168_161965_159954_160422_144966_162186_154213_161241_139884_158640_155529_160980_163114_147552_161880_161891_162268_162334_162851_162816_162642_159092_162264_162261_162155_110085_162026_163168_163317_163318_163319_163321; delPer=0; PSINO=2; BD_HOME=1; BD_CK_SAM=1; COOKIE_SESSION=769033_0_9_0_63_84_1_6_3_8_1_16_0_0_0_0_1605507855_0_1607056101%7C9%230_0_1607056101%7C1; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598; H_PS_PSSID=33213_1459_33061_33113_33098_33101_33183_33181_33145_33211_33199_33217_33149_22159_33216_33215_33185; H_PS_645EC=9555H%2BItaTBsNu7fj7yuWi%2BorvZXCBbqUWWWLmv7EAQQAseiCtR626mbuWU; BA_HECTOR=002105ah8g2l2h01c11fsjt950r' \
  --compressed

針對(duì)XHR請(qǐng)求，一般業(yè)務(wù)場(chǎng)景下返回的數(shù)據(jù)包都是json數(shù)據(jù)，因此還可以右鍵彈出菜單中選擇復(fù)制response（常見于渲染側(cè)同學(xué)拿到mock數(shù)據(jù)）

0x0C 不一樣的Console

12.1 console.log( ) | info( ) | debug( ) | warn( ) | error( )

在瀏覽器控制臺(tái)中打印原始的字符串內(nèi)容，并且根據(jù)不同的“等級(jí)”，而文字的顏色有所不同。

12.2 占位符

Javascript提供了很多占位符，可以用于調(diào)試輸出的有如下：

%o — 對(duì)象占位
%s — 字符串占位
%d — 數(shù)字占位

12.3 Console也支持CSS

使用%c占位符，可以像寫行內(nèi)樣式一樣，自定義輸出內(nèi)容的樣式

12.4 表格形式展示JSON數(shù)據(jù)

console.table()更加直觀/美觀展示JSON格式數(shù)據(jù)

12.5 log組合

console.group()
console.groupEnd()

盡可能地將打印的信息組織在一起，如此可以是的我們的輸出看起來就更加的有層次、有組織*預(yù)知更多，請(qǐng)參考：[翻譯]你真的會(huì)用console.log嗎？^[1]

0x0D 截圖

網(wǎng)頁(yè)截圖，一般情況下我們都是使用第三方工具，其實(shí)Chrome已提供了截圖功能。其使用方法如下圖：命令解釋：

Capture area screenshot

自定義選中截圖區(qū)域，和常用截圖工具類似

Capture full size screenshot

截取HTML完整渲染圖

Capture node screenshot

截取某個(gè)DOM節(jié)點(diǎn)的渲染圖，使用前得先在Elements Tab下選中DOM節(jié)點(diǎn)

Capture screenshot

截取瀏覽器視窗所見屏幕

0x0E Performance

性能監(jiān)控，在調(diào)試某個(gè)web網(wǎng)頁(yè)，想要查看從HTML渲染到屏幕的過程或運(yùn)行時(shí)用戶交互時(shí)的渲染、重繪、重拍，內(nèi)存占用、頁(yè)面變化過程。那么就可以在Performace Tab下，點(diǎn)擊紅色小圓點(diǎn)即可錄制頁(yè)面的完整變化過程。

截圖
內(nèi)存占用，如果要更專注了解內(nèi)存情況，可在Memory Tab下錄制查看，其右側(cè)的“垃圾桶”按鈕是主動(dòng)垃圾回收

js調(diào)用棧，可定位到對(duì)應(yīng)的js文件可在source中預(yù)覽

通過該面板，可更直觀看到畫面與腳本代碼執(zhí)行的表現(xiàn)關(guān)系，方便定位在渲染中出現(xiàn)的顯示問題。

0x0F Source Tab

在調(diào)試工具中的Source Tab是非常實(shí)用的一個(gè)面板，熟練運(yùn)用可以快速?gòu)谋硐蠖ㄎ坏酱a問題。在開發(fā)調(diào)試的過程中，我們常常會(huì)console很多log，但在定位BUG原因時(shí)，如果代碼調(diào)用層級(jí)比較深，那么僅通過console來解解決問題的效率就比較低。Source面板中可以預(yù)覽當(dāng)前網(wǎng)頁(yè)調(diào)用的所有靜態(tài)資源以及源代碼。整個(gè)面板的大致功能如下圖：

16.1 DEBUG工具欄

每個(gè)圖標(biāo)分別對(duì)應(yīng)：

暫停（繼續(xù)）
單步跳過
進(jìn)入函數(shù)
跳出函數(shù)
單步執(zhí)行
激活（關(guān)閉）所有斷點(diǎn)
代碼執(zhí)行異常處自動(dòng)斷點(diǎn)

需要勾選“Pause On Caught Exceptions”

16.2 右側(cè)調(diào)試器

16.2.1 Watch

變量監(jiān)控，對(duì)加入監(jiān)聽列表的變量進(jìn)行監(jiān)聽,在該面板的右側(cè)有“添加”和“刷新”變量列表的按鈕

16.2.2 Call Stack

函數(shù)調(diào)用棧，斷點(diǎn)執(zhí)行到當(dāng)前函數(shù)的調(diào)用棧，根據(jù)調(diào)用棧可以非常方便檢索到項(xiàng)目中何處主動(dòng)“遞進(jìn)”調(diào)用了該函數(shù)。非常有用啊！實(shí)際案例，在解決編輯器做分頁(yè)異常時(shí)通過調(diào)用棧以及源碼面板中實(shí)時(shí)展示的變量，及時(shí)得定位到了產(chǎn)生問題的原因。

16.2.3 Scope

作用域，當(dāng)前斷點(diǎn)所在函數(shù)所有屬性的值。Scope 會(huì)顯示三種類型的值：Local、Closure 和 Global。

16.2.4 Breakpoints

展示斷點(diǎn)列表，將每個(gè)斷點(diǎn)所在文件/行數(shù)/該行簡(jiǎn)略內(nèi)容展示，勾選/取消勾選斷點(diǎn)列表中的選擇框，可激活/禁用斷點(diǎn)

16.2.5 XHR Breakpoints

調(diào)試XHR，輸入XHR的URL中的關(guān)鍵詞，即可對(duì)URL中含有關(guān)鍵詞的XHR做攔截

16.2.6 DOM Breakpoints

DOM斷點(diǎn)，在Elements面板中右鍵DOM樹中的節(jié)點(diǎn)，可以設(shè)置條件斷點(diǎn)：

subtree modifications：子節(jié)點(diǎn)變化
attribute modifications：當(dāng)前節(jié)點(diǎn)屬性修改
node remove：當(dāng)前節(jié)點(diǎn)被移除

16.2.7 Global Breakpoints

全局監(jiān)聽，在這里可以看到全局有哪些事件監(jiān)聽被注冊(cè)綁定了什么函數(shù)，還可移除（Remove）對(duì)應(yīng)的全局事件監(jiān)聽

16.2.8 Event Listener Breakpoints

事件監(jiān)聽斷點(diǎn)，打開這個(gè)列表，在觸發(fā)該事件時(shí)進(jìn)入斷點(diǎn)，調(diào)試器會(huì)停留在觸發(fā)事件代碼行。展開事件列表，選擇要監(jiān)聽的事件，勾選即可

16.3 左側(cè)導(dǎo)航欄

16.3.1 Page

整個(gè)Source Tab顧名思義就是源碼面板，默認(rèn)選中“Page欄目”在這里可以看到以域名為列表的靜態(tài)資源文件目錄樹，點(diǎn)擊文件在主視圖中可以預(yù)覽靜態(tài)文件

16.3.2 Content Scripts

Chrome瀏覽器插件在內(nèi)容區(qū)域的js腳本代碼，如果調(diào)試工具不太能滿足，大家也可以開發(fā)一個(gè)Chrome插件來提升開發(fā)調(diào)試效率（比如洪巖開發(fā)的在快速建課下生成roomid的二維碼）

16.3.3 Snippets

代碼片段，開發(fā)者自己寫一些調(diào)試代碼的代碼片段，比如解析json數(shù)據(jù)等工具函數(shù)。在代碼片段中的代碼可以訪問當(dāng)前頁(yè)面中的變量和函數(shù)，不會(huì)因刷新而丟失。

右鍵即可“run”
不需要的時(shí)候可以右鍵“remove”

其他的tab不太常用，暫時(shí)就不介紹了。。。

16.4 主視圖區(qū)

即預(yù)覽靜態(tài)資源的區(qū)域，類似于編輯器，頂部可以切換已打開的腳本/資源文件。預(yù)覽是最基本的功能，主視圖/面板還有其他重要功能。斷點(diǎn)的類型有三種：

16.4.1 普通斷點(diǎn)

點(diǎn)擊代碼行序號(hào)可以直接添加斷點(diǎn)，效果類似于在代碼里手動(dòng)寫入

debugger;

16.4.2 條件斷點(diǎn)

與此同時(shí)可修改當(dāng)前斷點(diǎn)為條件斷點(diǎn)，需要添加條件代碼片段用于判斷當(dāng)前斷點(diǎn)是否需要中斷如上圖，增加了條件斷點(diǎn)，相當(dāng)于修改了源代碼，主視圖區(qū)的背景色會(huì)變成淺黃色，表示“已編輯”。

16.4.3 黑盒script

項(xiàng)目中例如引用了jquery.min.js之類的庫(kù)文件，我們調(diào)試的時(shí)候并不需要關(guān)心，那么可以將此類腳本文件右鍵選擇添加到“黑盒腳本”中，那么在debug單步調(diào)試時(shí)，就不會(huì)進(jìn)入到此類庫(kù)文件中，減少了調(diào)試步驟。

0x10 Coverage

代碼使用率（有效率）統(tǒng)計(jì)，支持運(yùn)行時(shí)錄制統(tǒng)計(jì)。在例如我們引入了jquery但是只用了一個(gè)hide()方法，那么對(duì)于jquery的代碼使用率就比較低。該統(tǒng)計(jì)支持css和js代碼使用率的統(tǒng)計(jì)

0x11 Rendering

監(jiān)控頁(yè)面重繪、重排時(shí)變化的區(qū)域進(jìn)行高亮處理，還可查看幀率相關(guān)信息，用于網(wǎng)頁(yè)性能優(yōu)化

在more tools菜單中可選擇Rendering工具

0x12 Layers

層，當(dāng)一個(gè)頁(yè)面足夠復(fù)雜的時(shí)候，在css加持下，可能會(huì)出現(xiàn)一些渲染性能問題，這時(shí)候可以通過Layers工具顯式地查看DOM層關(guān)系。

在more tools菜單中可選擇Layers工具

更多關(guān)于瀏覽器渲染可以參考文章：深入瀏覽器渲染^[2]

0x13 移動(dòng)端H5調(diào)試

Chrome瀏覽器支持移動(dòng)端Android移動(dòng)端設(shè)備的調(diào)試，Safari支持IOS移動(dòng)端設(shè)備的調(diào)試。Chrome調(diào)試Android移動(dòng)設(shè)備的步驟如下：

數(shù)據(jù)線鏈接PC與Android設(shè)備，Android設(shè)備允許調(diào)試（開啟調(diào)試模式，并允許當(dāng)前設(shè)備調(diào)試移動(dòng)端）
Chrome瀏覽器地址欄訪問：chrome://inspect，可進(jìn)入調(diào)試網(wǎng)頁(yè)

支持設(shè)備、網(wǎng)頁(yè)App、頁(yè)面、Chrome插件、Works和“其他”類型的調(diào)試

點(diǎn)擊inspect就可以如正常考試網(wǎng)頁(yè)一樣，調(diào)試移動(dòng)端里的webview中運(yùn)行的web程序

關(guān)于APP中的H5調(diào)試可參考文章：APP中h5調(diào)試^[3]

總結(jié)

Chrome瀏覽器為WEB應(yīng)用開發(fā)者提供了功能豐富的開發(fā)調(diào)試工具，本文敘述了部分工具的使用場(chǎng)景、方法以及個(gè)人理解，工具只是作為開發(fā)的輔助，想要高效率地開發(fā)和解決BUG，還需要在開發(fā)實(shí)踐過程中不斷積累并總結(jié)經(jīng)驗(yàn)。

參考資料

[1]

[翻譯]你真的會(huì)用console.log嗎？: https://blog.dyboy.cn/program/181.html

[2]

深入瀏覽器渲染: https://bytedance.feishu.cn/docs/doccnHAeCE9IydcYLoFkptEYAjd

[3]

APP中h5調(diào)試: https://bytedance.feishu.cn/docs/doccnk8b5kmUrlehWIGeVcUAsNC

[4]

移動(dòng)端真機(jī)調(diào)試指南: https://aotu.io/notes/2017/02/24/Mobile-debug/index.html

[5]

Chrome開發(fā)者工具: https://developers.google.com/web/tools/chrome-devtools?hl=zh-cn

[6]

Chrome DevTools的Network面板: https://juejin.cn/post/6844903698850643982

歡迎關(guān)注「前端雜貨鋪」，一個(gè)有溫度且致力于前端分享的雜貨鋪

關(guān)注回復(fù)「加群」，可加入雜貨鋪一起交流學(xué)習(xí)成長(zhǎng)

【工具】你不知道的 Chrome DevTools