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

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

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

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

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

0x02 強制激活偽類

網頁中一些動效是基于例如:active、:hover等，當鼠標移動到控制臺時，這些偽類就不生效，在控制臺中也無法調試css樣式，此時可以使用強制激活偽類

1. 選中具有偽類效果的元素
2. 點擊:hov
3. 根據代碼情況，勾選相應偽類
4. 在styles面板可動態(tài)調試偽類樣式

**操作方法2：**也可在DOM樹中右鍵菜單 -> Force State -> 勾選對應偽類

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

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

1. 在Computed面板中的filter輸入框篩選樣式屬性名
2. 展開屬性，剋看到多處定義，且只有第一行生效
3. 鼠標hover時，左側顯示->，點擊可跳轉到Styles面板中的CSS規(guī)則
4. 可在生效的CSS規(guī)則中修改樣式

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

0x04 顏色選擇器

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

1. 找到CSS中設置顏色的屬性
2. 點擊顏色值左側的選擇器（彩色方塊）

0x05 陰影選擇器

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

1. 點擊box-shadow屬性右側的“層疊偏移圖標”，彈出陰影選擇器
2. 通過顏色選擇器面板可設置橫縱軸偏移量、陰影模糊度和擴散度、內外陰影

0x06 CSS屬性值快速調整

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

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

0x07 animation動畫調試

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

1. 打開控制臺，鍵盤按“ESC”，調出Console面板
2. 點擊Console面板左上角“豎三點”，彈出菜單選擇“Animations”，即可打開動畫調試面板

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

• 定位動畫作用的DOM結構
• 控制動畫執(zhí)行過程：播放、暫停、重播、減速動畫、控制執(zhí)行時間
• 預覽動畫執(zhí)行過程、動畫時間曲線
• 偵聽記錄所有動畫過程

0x08 復制控制臺變量到剪貼板

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

0x09 網頁可視化編輯

F12工程師，可以快速偽造網頁了 在控制臺(Console)執(zhí)行：

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

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

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

0x0B XHR重放

XML HTTP Request會在Network Tab下記錄，選中對應的XHR記錄，右鍵可以重放網絡請求。此外，如果還想在重放請求時修改請求參數(shù)，則可以復制請求包到命令行下修改后執(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

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

0x0C 不一樣的Console

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

在瀏覽器控制臺中打印原始的字符串內容，并且根據不同的“等級”，而文字的顏色有所不同。

12.2 占位符

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

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

12.3 Console也支持CSS

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

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

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

12.5 log組合

• console.group()
• console.groupEnd()

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

0x0D 截圖

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

• Capture area screenshot
• 自定義選中截圖區(qū)域，和常用截圖工具類似
• Capture full size screenshot
• 截取HTML完整渲染圖
• Capture node screenshot
• 截取某個DOM節(jié)點的渲染圖，使用前得先在Elements Tab下選中DOM節(jié)點
• Capture screenshot
• 截取瀏覽器視窗所見屏幕

0x0E Performance

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

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

• js調用棧，可定位到對應的js文件可在source中預覽

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

0x0F Source Tab

在調試工具中的Source Tab是非常實用的一個面板，熟練運用可以快速從表象定位到代碼問題。在開發(fā)調試的過程中，我們常常會console很多log，但在定位BUG原因時，如果代碼調用層級比較深，那么僅通過console來解解決問題的效率就比較低。Source面板中可以預覽當前網頁調用的所有靜態(tài)資源以及源代碼。整個面板的大致功能如下圖：

16.1 DEBUG工具欄

每個圖標分別對應：

• 暫停（繼續(xù)）
• 單步跳過
• 進入函數(shù)
• 跳出函數(shù)
• 單步執(zhí)行
• 激活（關閉）所有斷點
• 代碼執(zhí)行異常處自動斷點
• 需要勾選“Pause On Caught Exceptions”

16.2 右側調試器

16.2.1 Watch

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

16.2.2 Call Stack

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

16.2.3 Scope

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

16.2.4 Breakpoints

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

16.2.5 XHR Breakpoints

調試XHR，輸入XHR的URL中的關鍵詞，即可對URL中含有關鍵詞的XHR做攔截

16.2.6 DOM Breakpoints

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

• subtree modifications：子節(jié)點變化
• attribute modifications：當前節(jié)點屬性修改
• node remove：當前節(jié)點被移除

16.2.7 Global Breakpoints

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

16.2.8 Event Listener Breakpoints

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

16.3 左側導航欄

16.3.1 Page

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

16.3.2 Content Scripts

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

16.3.3 Snippets

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

• 右鍵即可“run”
• 不需要的時候可以右鍵“remove”

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

16.4 主視圖區(qū)

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

16.4.1 普通斷點

點擊代碼行序號可以直接添加斷點，效果類似于在代碼里手動寫入

debugger;

16.4.2 條件斷點

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

16.4.3 黑盒script

項目中例如引用了jquery.min.js之類的庫文件，我們調試的時候并不需要關心，那么可以將此類腳本文件右鍵選擇添加到“黑盒腳本”中，那么在debug單步調試時，就不會進入到此類庫文件中，減少了調試步驟。

0x10 Coverage

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

0x11 Rendering

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

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

0x12 Layers

層，當一個頁面足夠復雜的時候，在css加持下，可能會出現(xiàn)一些渲染性能問題，這時候可以通過Layers工具顯式地查看DOM層關系。

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

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

0x13 移動端H5調試

Chrome瀏覽器支持移動端Android移動端設備的調試，Safari支持IOS移動端設備的調試。Chrome調試Android移動設備的步驟如下：

1. 數(shù)據線鏈接PC與Android設備，Android設備允許調試（開啟調試模式，并允許當前設備調試移動端）
2. Chrome瀏覽器地址欄訪問：chrome://inspect，可進入調試網頁

• 支持設備、網頁App、頁面、Chrome插件、Works和“其他”類型的調試

3. 點擊inspect就可以如正常考試網頁一樣，調試移動端里的webview中運行的web程序

關于APP中的H5調試可參考文章：APP中h5調試^[3]

總結

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

參考資料