Web開發經驗談之F12開發者工具/Web調試

**引語：**現在的整個Web開發行業甚至說整個軟件開發行業，已經至關成熟，基本上已經不多找不到沒有前人作過的東西了，或者換句話說，你想要實現的功能，你總能在某個地方搜索到答案，關鍵是你有沒有這個時間精力去搜尋！以致於大多數的開發，其實就是一個找資料的過程，一個複製粘貼的過程，這的確也是一個可悲的現象。不過，換個角度來看，其實也挺好，如今我們凡事都講求一個效率問題，只要能實現功能，就甭管他複製粘貼抄襲了。問題的關鍵是，你得會複製、粘貼、抄襲，你得會調試你的代碼啊！難道有人給了你全部的配件你就能把車子給組裝起來？難道有人送你一輛好車你就會改裝了？然並卵，關鍵還得看你本身有幾斤幾兩了。

　　我記得我曾經有一位資深的運維同事給我說過一句話：所謂的開發不過是僅僅掌握了一些調試代碼的技巧而已。雖然我本人對於運維的工做也不怎麼看得上眼，可是，不得不說，我很贊同他這句話。由於現在互聯網橫行的今天，有太多太多的參考，你能夠實現全部你想實現的。但又正是由於有太多太多的參考，以致於咱們都不知道選擇什麼好，哪一個是對的，哪一個是錯的？誰說不是呢，沒有選擇是一種無奈，太多選擇總會讓人浮躁！你若是可以爲所欲爲地調試你的代碼，誰敢說你不牛掰我都不信了？

　　看本文標題，是講Web調試的，可是我估計廢話所佔的篇幅不小，由於，哈哈，我TM就是一個喜歡來虛的這麼一我的！我所謂的虛的，是指理論級別的東西而非實戰級別。可是，我始終堅信，理論是實踐的基礎，實踐會加深真理論的認識！想成爲一個真正的開發人員，我以爲，至少你得了解計算機它是怎麼工做的。基礎知識真的是必不可少的，如：計算機原理，彙編，單片機，C，VB，VC，數據結構，經典算法！這些無疑都會加深你對理論的瞭解！

　　好，廢話已經太多。下面進入正題，做爲Web開發者，Web調試工具天然是必不可少的。那麼，咱們就來聊聊Chrome, Firefox, IE三你們的Web調試的一些特色(雖然市面有數不清的瀏覽器，可是糾其內核，基本都是這三者之一)，以及都有哪些技巧？

1、Firefox 插件之 Firebug, 火狐調試利器【初學必備】

　　爲何要第一個提到火狐呢？由於啊，這東西確實是太方便了，剛開始接觸開發那會兒，根本都不知道調試，只是憑着感受去作事。後來看到有人在用Firefox 的 Firebug，一下就愛上了，緣由以下。優勢：1 中文；2 直觀；3 定位超級快！缺點：1 插件每次都須要從新下載；2 每次都要從新啓用纔可使用各類調試功能。

　　下面咱們先看幾個主要功能模塊截圖，稍後稍細做解析！

. 控制檯

.. 腳本調試

... 網絡收發情況查看

　　裏面主要用到的功能是，1. 控制檯，可心直觀的看到一些頁面的基本狀況，如上圖所示的錯誤信息，以及一些ajax的請求，很輕鬆的點開就可看到訪問的參數等等，基本上經過這裏的調試，能夠給你省去30%~40%的錯誤了；2. 腳本頁，若是js腳本比較複雜，那頁面js單步調試等功能就頗有必要了，Firebug中有一個很好的搜索功能@多文件搜索，也就是說，你只要能說出其個別的關鍵詞，他就能夠幫你找到具體在哪一個腳本頁面哪一行。3. 網絡功能，用於查看各個頁面的具體請求狀況很方便，用於定位哪一個節點是否出問題是必須的，固然，多瞭解一點http協議對於這一塊的理解仍是頗有好處的。

2、Google Chrome 之F12自帶控制檯【水平的進階】

　　Google做爲W3C標準制定者之一（好像是的），是個絕對的W3C標準支持者，所以對於不少的標準屬性，在chrome都有很好的展示。可是有一點讓人很困惑，那就是整個頁面都是英文，描述也和咱中國人的習慣不太吻合，因此適合用於進階卻不適合用於初學，適合用於英語水平稍好點的同窗(固然了，看習慣也就都同樣了)。優勢：1 瀏覽器自帶；2 官方標準適合本身寫標準語法；3 功能齊全；4 控制檯調試很是方便幾乎能夠看成一個簡單的幫助文檔來使用！缺點：如前所述！

　　下面先看幾個截圖，稍後細做講解！

. 頁面元素查看

.. 網絡情況查看

... 資源使用狀況(腳本調試)

.... 控制檯臨時運行

　　做爲一個經驗稍微豐富點的開發人員，我認爲chrome的調試是必備的，雖然有不少亂七八糟的英文，但咱們仍是能夠克服的嘛，並且他功能特別齊全。基本功能和火狐的firebug差很少，不一樣的只是一個展示方式的不同，那我就說幾個特殊的或者前面沒有說到的點好了。1. 很方便地動態編輯html元素，從而避免反覆改代碼調試的工做，同理於css樣式的編寫。寫html頁面我有一個不成熟想法：其實我不會寫什麼頁面，我不過知道幾個標籤html,div,span和幾個css名稱display,position,font-size，而後我就不停在瀏覽器控制檯裏猜想各類想法，而後複雜的效果就出來了；2. 做爲腳本調試，我本人尚未習慣chrome的調試方式，不支持多文件搜索，這對於包含文件不少的地方並非好事，不過你能夠把全部的資源都打開，這時候再搜索就能夠給你定位了；3. 適應他的網絡查看工具(點擊連接後具體信息在右邊展現，時間軸根據狀況適當隱藏)；4. 多利用控制檯寫一些嘗試操做，對於已經加載了的全局變量，你能夠直接在控制檯使用，如要查看某元素高度，$('#ele').height();這裏的'$'就是文檔中已經加載的jquery變量。5. 其餘一些優化工具能夠嘗試使用！（哈哈，我只是看並不用）

3、IE 工具之 httpwatch 【看我的喜愛了】

　　其實，我基本上不會用IE去調試代碼的了，可是做爲一個知名度不低的瀏覽器，以及名聲赫赫的httpwatch仍是有必要了解一下的。優缺點自行判斷，我就說兩句就好。1. 功能強大，能夠將訪問日誌導出，在另外的地方進行靜態分析；2. 抓包，其實他就是幹這個事的！3. IE的F12反正和其餘的也差很少(我說的是高版本)，簡單搞搞就行，反正我僅僅用來調試兼容性問題！

　　工欲善其事，必先利其器！只有有一個好的順手的調試工具幫助你，你才能更快地進行你的工做。固然，你最好有一些基礎理論知識，這對於你排查問題找方向會有很大的幫助！So, Debug your code, Debug yourself.

　　注：本文主要講web控制檯調試，看起來好像全是前端工做，可是其實每每是和後端緊密相連的！一個字，去了你就知道了！