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