# 調試前端代碼 ## 使用 Chrome 開發者工具調試 本文主要是簡單介紹了 Chrome 的開發者工具的使用，進階學習可以參考文末的鏈接。 在 Chrome 中打開一個網站后，右箭點擊檢查 (快捷鍵：Shift+Ctrl+i) 即可調出 Chrome 的開發者工具。 ## 功能標簽 開發者工具共有8個功能標簽，當然安裝特定的 Chrome 插件會增加功能標簽，例如前端框架 React 調試插件等，新增標簽的功能是由插件實現的，所以本文不再介紹。 1. Console 命令窗口，當前網頁中 JavaScript 的調試信息，例如 console.log、console.info、console.error 等會在此輸出。同時，在這里我們可以運行一些命令、針對當前頁面的測試腳本等。 > 點擊上方的 ?? (clear console) 會清除頁面，但是不會重置環境，也就是之前定義的方法、變量等依然會存在。但是刷新會重置環境。 2. Elements 顯示當前頁面的 DOM 元素，用于查看和修改當前頁面的 HTML 元素和 CSS 元素。 當我們點擊其中的一個 HTML 元素之后，在頁面的下方或者右方會顯示選中元素的定義的 CSS 屬性。 3. Sources 顯示了當前頁面加載的各種資源文件。在此標簽下還有數個子標簽，Page 標簽對應的就是當前頁面的各種資源，并且會以資源文件的引用域名分類顯示。 4. Network 用于查看 HTTP 請求的詳細信息，如請求頭、響應頭及返回內容等。 5. Performance 記錄顯示網頁的完整過程，就想它的名字，一般用于性能分析。 需要手動點擊 Record 和 Stop，之后就會顯示記錄的這段時間瀏覽器的行為，用于網頁的性能分析。 6. Memory 記錄了 Chrome 的內存使用情況。 7. Application 主要顯示當前網站使用的一些資源，例如的 storage 和 cache。 8. Audits 可以使用此標簽實現更加細節的網頁分析，例如首次有效繪制的情況，可用于分析網站首屏加載時間等。 ## 調試技巧 ### 錯誤處自動暫停 我們可以通過開啟運行時錯誤自動暫停這一功能，更加方便快速的定位錯誤代碼。 開啟這個功能很簡單，點擊 Source 標簽中的 `Pause on exceptions` 即可。 如下圖：