最近看到很多准備入行前端的小伙伴，不僅僅是我的學員，還有很多自學的。感覺慢慢都是回憶與過去啊，他們遇到的苦逼事，我相信你們也遇到過。
尤其是越往后面學代碼越多得時候代碼一旦出錯，就基本要找好幾個小時。不知道你經歷過沒有，反正我當年學的時候都快被虐到懷疑人生了。好吧，辛虧有我在，哈哈！
首先我們調試代碼的要用到啥了，那就是瀏覽器的debug，也就是瀏覽器調試工具。個人推薦使用Chrome的調試工具，因為用的比較習慣，如果你想用火狐的firebug，我也不反對，都一樣。反正都是F12快捷鍵，或者右擊鼠標點擊審查元素or檢查都可以。
那么怎么用了，我現在以debug為例子。先看看它長什么樣子吧：
首先關注選項卡有些啥：
也不少，而且都是英文。首先先看Elements，這個是為了調試前端代碼以及樣式使用的，比如說我想知道一個頁面中用什么樣式寫的，哪些樣式影響了它。很簡單，你知道鼠標移動到那個地方，再右擊檢查：
現在，再檢查右側欄的Style里面就可以看到所有的跟這個span相關的所有樣式了。我們還可以在這個樣式里面去直接改變樣式：
所以其實很多時候，我們都沒有必要老師在代碼上動刀子，如果項目比較大很容易動錯地方。因為CSS不會報錯，最多是無效，所以大項目一旦出錯不好找出錯的具體地方，所以就一定程度上考驗你的HTML和CSS的設計能力了。
這些事對樣式的檢查，前提你先把樣式基礎知識學扎實，不然也是白搭喲。
除了Elements之外，另外比較常用的還有console，netWork，application,Sources這些。我都稍微簡單介紹下；
console:
這一塊主要是調試JS以及在這里做一些簡單代碼的實驗的。比如我們如果想知道 123+'' 是什么數據類型的，這么簡單的代碼重新寫一個頁面去查看沒必要，直接打開F12的console。可以看到會有一個空白框，里面有光標，我們可以輸入內容的：
我們接着去調試我們的需求
其實我們也不需要console.log
直接干：
因為這里的typeof會有返回值出現，而回車后如果有東西出現，其實那就是返回值。很多情況我們看到返回值為underfind
實際上很多情況下一個函數沒有具體的返回值得時候其實都是underfind，這個關於返回值可以以后再說
netWork：
這個是我們前端比較忽略的一點，應該如果只做頁面的話，這個欄目也確實沒有啥作用。但是如果在學習ajax，或者我們要去分析調用其他網站的數據API的話，還是需要了解的。這一點對於學后台的同學應該是爛熟於心了，我大概介紹一下它有啥作用。
這個欄目在我們加載完畢之后再去打開時沒什么意義的，當你打開網站的時候就這個欄目就開始有變化了，它的主要目的就是抓包，抓什么了，抓的都是我們通過域名訪問服務器，服務器返回的數據在這上面會全部都展示出來。這些數據包括什么了。頁面也就是我們所說的html代碼，其實就是主頁面，然后CSS,JS，媒體文件，文檔以及其他類型的文件全部都有展示，並且一些獲取的狀態包括途徑都會很詳細的展示。比如：
除了這些東西，還有很多我們前端可能會涉及的跨域或者數據API。比如百度關鍵字聯想：
當我們點擊這個url之后，在展示欄的右邊關於這個數據的大部分信息我們都可以去研究的。headers是頭信息，如果你不是走全棧，那么沒必要去看。preview就是具體數據了，其實我們具體去看這個數據，拿到之后我們是可以用script標簽訪問並編譯的。而大部分的后台數據其實很多都是通過JSscript方式獲取訪問並調用使用的，所以，這個東西需要我們好好的去了解和研究一下。
以上就是初學時用的比較多的調試菜單，今后的話，像application也是比較重要的，主要以cookie，本地存儲為主。
這個debug很強大，作用不言而喻。更多的細小功能一篇文章是說不完的，基本上也適用於你找到工作之前了。