前端調試代碼最常用的應該就是浏覽器的debug了吧，也就是浏覽器調試工具。那麼我就以谷歌調試百度首頁為例來看看吧。
調試工具的簡單介紹：
打開谷歌的調試工具我比較習慣的用法是：右擊頁面----->檢查
打開之後是這個樣子：
首先，看一下功能菜單：
依次從左往右來看：
1.箭頭按鈕 用于在頁面選擇一個元素來檢視他的相關資訊。首先點選箭頭按鈕，然後在頁面中找到要檢視的元素點選。
2.裝置圖示 用于切換不同的終端開發模式，也可以選擇不同的尺寸比例。點選該按鈕進行切換。
3.Elements功能标簽頁 用來檢視，修改頁面的元素，包括DOM标簽，以及css樣式的檢視，修改，還有相關盒模型的圖形資訊。
（1）用滑鼠随便點選一個元素，然後按ctrl+f可以搜尋HTML的内容；
（2）在搜尋框中搜尋某個的字元串，即可找到相關的含有該字元串的元素；
（3）在樣式的方格中，點選Styles或Computed标簽，在Filter輸入框中輸入一個樣式，可以從目前頁面所使用到的樣式中進行篩選。
（4）我們可以直接在浏覽器的Styles中修改style屬性，檢視效果。
4.Console控制台 用于列印和輸出相關的指令資訊。
5.Source(js資源頁面) 用于找到目前浏覽器頁面中的js源檔案，一般大站的js代碼都是壓縮後的代碼，我們可以點選下面的{}大括号按鈕将代碼轉成可讀格式。
也可以設定斷點後，重新運作，進行斷點調試
6.Network（網絡請求标簽頁) 可以看到所有的資源請求，包括網絡請求，圖檔資源，html，css，js檔案等請求，可以根據需求篩選請求項，一般多用于網絡請求的檢視和分析，分析後端接口是否正确傳輸，擷取的資料是否準确，請求頭，請求數的檢視。這個功能頁在我們加載完畢之後再去打開時沒什麼意義，可以重新整理一下。他的主要目的就是抓包，抓的都是我們通過域名通路伺服器，伺服器傳回的資料在上面會全部展示出來。
當我選擇了All,就會把該頁面所有資源檔案請求下來。
如果隻選擇XHR異步請求資源，則我們可以分析相關的請求資訊。
打開一個Aajax異步請求，在展示欄的右邊關于這個資料的大部分資訊我們都可以去研究。Headers是頭資訊，Preview是具體的資料。
7.Performance（舊版浏覽器為Timeline） 時間表可以記錄和運作分析應用程式所有的活動，為了使得記錄頁面的互動，打開時間軸面闆，然後按開始錄制按鈕，或者通過鍵入鍵盤快捷鍵【ctrl+E】（Windows/Linux版）。這個按鈕會從灰色變成紅色，而TimeLine将開始從你的頁面擷取時間線（timeline）。在你的應用中完成一些操作，記錄到一些資料之後，再一次點選按鈕來停止記錄。
8.Memory（舊版為Profiles） 會列出所有的資源，以及HTML5的Database和LocalStore等，你可以對存儲的内容編輯和删除。
9.Application（舊版為Resources） 也比較重要，主要以cookie，本地存儲為主。
10.Security标簽頁 可以告訴你這個網站的安全性，檢視有效的證書等。
11.Audits标簽頁 可以幫您分析頁面性能，有助于優化前端頁面，分析後得到的報告。
Sources資源頁面的斷點調試：
1.在sources功能頁面下找到相應的js代碼，格式化壓縮代碼
點選{},即可格式化
2.然後在内容源代碼左側的代碼标記行處點選即可打上一個斷點。此時在右側的Breakpoints中會彙總你在JS檔案所打過的斷點，點選跟CheckBox同一行的會暫時取消或加上該斷點，若是點選CheckBox下一行的會直接跳轉到該斷點的位置。
3.點選執行代碼，代碼會執行到斷點處停下來，并把相關的資料展示一部分。接下來我們可以使用右側的功能鍵進行調試。
右側最上面一排分别是：
Pause script excution【單步執行，在斷點處暫停，等待調試】，暫停後這個按鈕會變成resume script excution【繼續執行】，快捷鍵【F8或者ctrl+\】
step over next function call【單步執行，不進入調用的其他函數】，快捷鍵【F10或者ctrl+’】
Step into next function call【單步執行，進入調用的其他函數】，快捷鍵【F11或者ctrl+；】
Step out of current function【單步跳出，會跳出目前這個斷點的函數】，快捷鍵【shift+F11或者ctrl+shift+；】
Step【單步執行，進入調用的其他函數】快捷鍵【F9】
Deactivate breakpoints：使所有斷點零時失效，快捷鍵【ctrl+F8】
Don’t pause on exceptions：不要在表達式處暫停，還有一個可選項【pause on caught exceptions–若抛出異常則需要暫停在那裡】