前端基础：初步认识Chrome调试面板，学会简单的代码调试，必会！
在前端開發(fā)過程中，我們通過瀏覽器的頁面來查看我們代碼編寫的成果。然而瀏覽器的功能非常強(qiáng)大，它不只是能展示我們編寫的頁面，還能夠幫助我們定位開發(fā)過程中遇到的問題，提升我們的開發(fā)效率。有些時候我們甚至還可以通過瀏覽器的調(diào)試工具來查看一些網(wǎng)站酷炫效果的實現(xiàn)方式。下面我們以Chrome瀏覽器為例，來介紹一些常用的調(diào)試技巧。
?
1. Chrome開發(fā)者工具
首先我們打開Chrome的開發(fā)者工具（又稱控制臺），打開方式有以下幾種：
通過以上任意一種方式打開開發(fā)者工具后，我們能夠看到這樣的界面（一般F12可以查看）。
?
開發(fā)者工具界面的信息量比較大，不過不用擔(dān)心，我們一點點來看。工具欄上前幾個tab是我們最常用的調(diào)試模塊。
Element：?用于查看和編輯DOM節(jié)點和節(jié)點相對應(yīng)的CSS樣式。
Console：用于打印運行時拋出的信息，我們可以通過它查看異常信息或主動拋出信息進(jìn)行調(diào)試。
Sources：?用于查看資源信息，我們編寫和運行的代碼都可以在這里找到。我們可以通過在這里設(shè)置斷點來達(dá)到調(diào)試的目的。
Network：?用于查看請求信息，這里可以看到所有的頁面資源請求，包括網(wǎng)絡(luò)請求、圖片資源、HTML、CSS、JS等。可以根據(jù)需求篩選請求項，一般多用于網(wǎng)絡(luò)請求的查看和分析。
Performance：?用于查看頁面加載的性能情況，包括頁面渲染時間、JS執(zhí)行時間等。
Application：用于查看 cookie、localStorage 等信息。
以上是Chrome開發(fā)者工具的主要功能模塊，雖然內(nèi)容略多，但是正因為有了這些信息，瀏覽器的調(diào)試功能才會如此強(qiáng)大。現(xiàn)在記不住這些模塊也沒關(guān)系，接下來我們將通過使用這些調(diào)試工具，來加深對它們的理解，并看看它們能為我們的開發(fā)帶來怎樣的幫助。
2. DOM調(diào)試
2.1 查看 DOM
在瀏覽器中，如果我們想要了解一個頁面的 DOM 結(jié)構(gòu)，我們可以通過開發(fā)者工具中的 Element 模塊進(jìn)行查看。我們首先編寫一段 HTML
?
保存這段 HTML 后在瀏覽器打開，并開啟控制臺。我們將工具欄選中到 Element ，會看到這樣的信息
?
你會發(fā)現(xiàn)這里展示的 DOM 結(jié)構(gòu)就是我們寫的 HTML ，瀏覽器不僅將我們的 HTML 渲染成頁面，還將它的 DOM 顯示在控制臺中方便我們調(diào)試。
用鼠標(biāo)在控制臺里選中不同的 DOM 節(jié)點，會發(fā)現(xiàn)頁面中有藍(lán)色區(qū)塊會隨著鼠標(biāo)選中 DOM 節(jié)點的變化而調(diào)整，實際上?藍(lán)色區(qū)塊就是當(dāng)前 DOM 節(jié)點對應(yīng)渲染的頁面部分?。
2.2 定位 DOM
當(dāng)一個頁面結(jié)構(gòu)比較復(fù)雜，層級較深的時候，我們通過移動鼠標(biāo)在 DOM 節(jié)點中尋找需要查看的節(jié)點就會變得比較麻煩。要點開它的外層節(jié)點并一級一級找下去，這樣的查找方式費時費力，因此瀏覽器控制臺提供了一個方便定位 DOM 的功能。
依然是上面那個例子，如果我們需要去找到 table 中的第一行第二列的那個單元格，怎樣操作比較迅速？這里我們通過點擊控制臺左上角的一個定位按鈕來進(jìn)行快速選中。打開控制臺，點擊定位按鈕，點擊后該按鈕會變成藍(lán)色，標(biāo)志我們當(dāng)前正處于定位模式（定位模式下鼠標(biāo)無法觸發(fā)頁面交互，如按鈕事件等）。
?
接下來我們在頁面上點擊我們想要查看的元素，點擊頁面上table 中第一行第二列的單元格（顯示 2 的那個）。點擊后我們發(fā)現(xiàn)控制臺的 Element 直接將那個 <td> 節(jié)點高亮定位了。
?
?
這樣我們就迅速的定位了我們想要查看的 DOM 節(jié)點，此時定位按鈕從藍(lán)色變?yōu)榛疑?#xff0c;標(biāo)志著定位完成，退出定位模式。快速定位的功能在復(fù)雜結(jié)構(gòu)的頁面中尤為實用，我們可以在開發(fā)過程中充分利用起來。
2.3 操作 DOM
完成了 DOM 的定位，接下來我們可以對 DOM 元素做一些操作。對當(dāng)前選中的 DOM 元素點擊右鍵可以看到一系列的操作選項。
?
點擊?Edit as HTML?來對當(dāng)前的 DOM 節(jié)點做改寫和添加，例如這里我們對 <p> 標(biāo)簽做編輯，在后面添加另一個 <p> 標(biāo)簽。
?
完成后點擊旁邊未被選中到元素即可保存編輯，并在瀏覽器頁面上同步生效。此時可以發(fā)現(xiàn)頁面上已經(jīng)出現(xiàn)了我們剛剛添加的節(jié)點了。
?
如果你想撤銷上一次 DOM 變更，按 ctrl + Z 即可，重做則按 ctrl + shift + Z。
其他的一些 DOM 操作也都很直觀，比如可以點擊 Add attribute 給選中節(jié)點添加屬性；Delete element會刪除選中節(jié)點等等。操作很簡單，這里就不一一演示，讀者可以自己嘗試一下。
3. CSS調(diào)試
除了對 DOM 的操作，我們還能夠方便得對CSS進(jìn)行調(diào)試。不知大家在查看 DOM 的時候有沒有關(guān)注到界面上還有這么一塊區(qū)域？
?
這里就是 CSS 的地盤。我們可以在這里看到選中的 DOM 節(jié)點上已添加的樣式，可以對里面對值進(jìn)行修改，或是添加其他 CSS 樣式。這里我們給 <p> 標(biāo)簽添加一個 color 樣式。
?
先用 DOM 調(diào)試的技巧選中這段文字，再對它添加完 color:red ，這時我們發(fā)現(xiàn)頁面上的文字變成了紅色，與此同時控制臺對 DOM 節(jié)點樹中也對這個節(jié)點動態(tài)得添加了一個 style 屬性，于是我們完成了樣式添加。這就是瀏覽器調(diào)試 CSS 樣式的便捷之處 —— 簡單且直觀。甚至于接下來如果我想改變一下文字的顏色，只需要在樣式欄里點擊一下 color 屬性，就可以進(jìn)行變更了，所見即所得。
?
我們再注意到樣式欄的頂部，有一些 :hover 的圖標(biāo)，點開來看，發(fā)現(xiàn)這里可以設(shè)置 DOM 的交互狀態(tài)。假設(shè)勾選一個 :focus 復(fù)選框，當(dāng)前選中的 DOM 節(jié)點便被模擬了獲取焦點的樣式特性。
?
最后我們再看一下右側(cè)部分，上面有個矩形，它就是我們在 CSS 部分中學(xué)習(xí)過的“盒子模型”。通過將鼠標(biāo)在盒子模型上移動，頁面上會顯示出相對應(yīng)的 DOM 節(jié)點，通過它我們能夠更好得了解頁面上的布局結(jié)構(gòu)。選中 Computed ，下方顯示出一系列的樣式，這些樣式就是節(jié)點經(jīng)過瀏覽器計算后渲染在頁面上的最終樣式，如果某一個節(jié)點受到多個地方的樣式影響，我們就可以在這里看到它最終的樣式屬性（與頁面上的渲染效果相對應(yīng)）。
?
4. JS調(diào)試
本節(jié)內(nèi)容將簡單介紹如何使用瀏覽器對 JS 進(jìn)行調(diào)試，由于很多時候我們所說的瀏覽器調(diào)試都是指 JS 調(diào)試，因此這部分有很多調(diào)試的方法和技巧。具體的調(diào)試技巧將在下一章節(jié)詳細(xì)介紹，本節(jié)只做一個熟悉的過程。
JS 的調(diào)試主要關(guān)注的區(qū)域是 Console 和 Sources 模塊，前文說過 Console 模塊是用于打印運行時拋出的信息，我們可以通過它查看異常信息或主動拋出信息進(jìn)行調(diào)試。 Sources 用于查看資源信息，我們編寫和運行的代碼都可以在這里找到。我們可以通過在這里設(shè)置斷點來達(dá)到調(diào)試的目的。那么接下來我們分別對這兩個模塊加以認(rèn)識。
首先點擊進(jìn)入 Console 模塊，會看到一個可輸入的控制臺界面。在這里我們可以輸入一些簡單的 JS 指令，按回車鍵執(zhí)行。
?
通過簡單的嘗試可以看到，在這里我們可以能夠執(zhí)行 JS 腳本，并且直觀得看到輸出結(jié)果。這意味著當(dāng)我們希望看到 JS 代碼運行時的數(shù)據(jù)狀態(tài)時，我們可以利用這個工具來給我們展現(xiàn)。那么如何在 JS 中使用 Console 控制臺呢？其實很簡單，只要在你希望查看的數(shù)據(jù)處加上一行代碼
console.log(希望查看的數(shù)據(jù));即可在 Console 控制臺中查看數(shù)據(jù)。有了它我們不需要等到 JS 代碼執(zhí)行完畢才能看是否符合預(yù)期，在執(zhí)行過程中我們就可以很方便得查看動態(tài)數(shù)據(jù)并打印記錄在控制臺中，這對我們的編程有很大的幫助。
接下來我們來看 Sources 模塊。我們可以任意訪問一個在線網(wǎng)站，然后打開控制臺，點擊 Sources 會看到一些代碼。這些代碼就是當(dāng)前這個頁面所引用的資源，包括 JS 文件，樣式文件等等，由于線上運行的代碼通常是經(jīng)過混淆和壓縮的,可能難以定位和閱讀。我們在文件底部可以看到一個花括號 {} ,點擊這個花括號我們能將壓縮了的文件格式化成正常的語法縮進(jìn)。
?
?
我們注意到代碼的左側(cè)是一列數(shù)字，標(biāo)記著當(dāng)前的代碼處于第幾行。這列數(shù)字是可以點擊的，當(dāng)點擊某個數(shù)后，數(shù)字被標(biāo)記成藍(lán)色，此時標(biāo)記著我們在這一行代碼處設(shè)置了斷點，當(dāng)程序運行到這段代碼處時會停止運行并保留運行現(xiàn)場。我們可以查看當(dāng)下運行時的數(shù)據(jù)和方法的執(zhí)行情況，實際上這就是我們所謂的“斷點調(diào)試”，下一章節(jié)會詳細(xì)演示。
這里我們關(guān)注到當(dāng)程序運行到斷點處時，頁面上會出現(xiàn)一個條形的操作欄顯示 paused in debugger ，右邊緊跟著兩個按鈕。第一個三角形的按鈕表示 “跳過斷點” ，點擊它之后腳本會繼續(xù)往下執(zhí)行，直到完成運行或是進(jìn)入到下一個設(shè)置的斷點。另一個弧形的按鈕表示 “單步調(diào)試” ，代碼會進(jìn)入到斷點的下一行，我們可以查看下一行代碼的運行情況。由于此時仍然是斷點狀態(tài)我們可以重復(fù)點擊 “單步調(diào)試” 的按鈕達(dá)到逐步運行的調(diào)試效果。
?
?
最后再介紹一些 Sources 模塊下實用的快捷鍵，選中控制臺的 Sources 之后按下 ctrl + P ，能夠搜索當(dāng)前頁面引用的資源。通過它我們可以迅速找到希望調(diào)試的 JS 文件。當(dāng)我們選中某個文件之后，可以使用快捷鍵 ctrl + F 進(jìn)行文件內(nèi)容檢索，方便快速定位代碼片段和查看變量使用。
?
?
?
5. 網(wǎng)絡(luò)請求調(diào)試
接下來我們再來看看網(wǎng)絡(luò)請求的調(diào)試。在網(wǎng)頁開發(fā)中網(wǎng)絡(luò)請求是的數(shù)據(jù)的來源渠道，加載一個頁面所需的 HTML 、 CSS 、JS 以及圖片等資源都是通過網(wǎng)絡(luò)請求獲取的。數(shù)據(jù)的獲取直接影響著頁面內(nèi)容的展示，如此重要的環(huán)節(jié)瀏覽器自然也對其做了監(jiān)控。我們可以通過 Network 模塊來對網(wǎng)絡(luò)請求進(jìn)行分析和調(diào)試。
任意打開一個在線網(wǎng)址如 https://github.com ，進(jìn)入控制臺并點擊 Network ，我們能夠看到很多資源請求。
?
?
?
工具欄上有很多分類：XHR、JS、CSS、Img、Media、Font、Doc、WS、Manifest等，這些是請求資源的分類。默認(rèn)是展示全部 All ，點擊到其中某一項則能夠?qū)⒄埱罅斜磉^濾為只有該類型。如點擊 JS 則下面的請求列表全部為 JS 資源，點擊 XHR 則過濾為向后端發(fā)送的異步請求。
大部分時候我們用到最多的分類是 XHR ，它能夠幫助我們調(diào)試異步請求。從我們發(fā)送請求到我們接收響應(yīng)數(shù)據(jù)的過程中，大量細(xì)節(jié)都記錄在控制臺中。我們可以點擊一個具體的異步請求進(jìn)行查看
?
?
首先看到 Header 這一欄，里面包含了很多信息，這些信息分成4個模塊： General 、 Response Headers 、 Request Headers 和 Query String Parameters。
- General里面記錄的是請求的基本信息，包括請求地址（Request URL）、請求類型（Request Method）、請求發(fā)送狀態(tài)（Status Code）等
- Response Headers是響應(yīng)頭，里面記錄了返回數(shù)據(jù)的類型（Content-Type）,瀏覽器數(shù)據(jù)的壓縮格式(Content-Encoding),服務(wù)器的類型(Server),當(dāng)前時間(Date)等
- Request Headers是請求頭，里面記錄了本次請求的客戶機(jī)支持的數(shù)據(jù)類型（Accept），緩存控制（Cache-Control），Cookie，訪問的主機(jī)名（Host），處理完這次請求后的連接方式（Connection）等
- Query String Parameters是異步請求的參數(shù)，如果是 get 請求，則參數(shù)為加在url后面的一串查詢參數(shù)，如果是post請求，則參數(shù)為 body 體里的 json 對象。
然后我們切到 Preview 這里我們看到的內(nèi)容是異步請求返回的數(shù)據(jù)，數(shù)據(jù)格式是 JSON 對象。很多時候我們就是通過查看這里的數(shù)據(jù)來進(jìn)行異步請求的數(shù)據(jù)查看和問題排查。當(dāng)我們調(diào)用了一個后端提供的接口，我們第一時間就該來到這里查看后端返回了怎樣的數(shù)據(jù)，我們才能繼續(xù)利用這些數(shù)據(jù)進(jìn)行后續(xù)的操作。
?
?
?
接下來我們再看 Response ，里面的內(nèi)容是也是異步請求返回數(shù)據(jù)，不過它跟 preview 的區(qū)別在于 preview 中的數(shù)據(jù)是以 JSON 對象的形式返回的，而在 Response 中是以 JSON 字符串的形式返回。
?
?
最后的 Timing 一欄中，展示了本次異步請求的時間開銷。在哪個環(huán)節(jié)消耗了多少時間在這一欄里都能很明確得展示出來，因此當(dāng)一個異步請求的等待時間較長時，我們不妨可以到這里來看看是在哪個環(huán)節(jié)能夠進(jìn)行優(yōu)化。
?
?
怎么樣？一個異步請求的發(fā)送過程是不是在瀏覽器中記錄得非常詳細(xì)了？正是因為有了這樣強(qiáng)大的功能，Chrome瀏覽器才會成為眾多前端開發(fā)人員鐘愛的調(diào)試?yán)鳌?/p>
總結(jié)
介紹了 Chrome 瀏覽器的基本調(diào)試場景和調(diào)試方法，并分別對?DOM 調(diào)試，CSS調(diào)試，JS調(diào)試和網(wǎng)絡(luò)請求的調(diào)試做了展示。當(dāng)然， Chrome 瀏覽器的調(diào)試功能并不僅限于此，還有很多模塊值得大家去探索。瀏覽器是前端開發(fā)用于展示的平臺，更是我們提升效率的利器，大家一定要多多嘗試，將它充分利用起來。
總結(jié)
以上是生活随笔為你收集整理的前端基础：初步认识Chrome调试面板，学会简单的代码调试，必会！的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： LeetCode 20. 有效的括号(V
- 下一篇： LeetCode 53. 最大子序和(M