web前端開發教程系列-3 - 前端開發調試工具分享

• 前言
• 一. Bug出現的緣由
  • 1. 主觀緣由或者是出現這麼多瀏覽器的緣由
  • 2. 另外客觀緣由：
• 二. 調試工具
  • 1. Firebug
  • 2. Chrome
  • 3. IE11
  • 4. IETester
  • 5. 虛擬機
  • 6. Safari
  • 7. Opera
• 三. 其它常見Bug
• 四. 其它思路

 

前言

前幾年前端開發的難點在於沒有一個強大的調試工具可以快速的找到問題所在，直到2006年Firebug問世，真正的讓前端進入一個工程化可調試的時代。但隨着前端需求的不斷增長，任務的完成難度也隨着增大。Chorme的橫空出世讓從業者眼前一亮，他的調試工具，進一步細化了可調試的粒度，讓前端真正從全方位來把握代碼執行的流程性能等，更是與Chrome緊密結合，免去了安裝或兼容致使的其它問題，受到了不少開發者的信賴或推崇。但因爲一些歷史或平臺緣由，咱們必須得了解其它調試工具，使工做的效率更加的方便或快速。
下面將會從各個層面來介紹這幾個耳熟能詳的調試工具，分享一些我的的使用心得：

 

一. Bug出現的緣由

1. 主觀緣由或者是出現這麼多瀏覽器的緣由

• 各大巨頭之間的利益博弈
  由於互聯網作爲我的電腦向外延伸的有效手段，
• 爲了霸佔互聯網信息的入口
  瀏覽器是惟一互聯網的出入口，能夠綁定不少功能，即綁定用戶。好比chrome的收藏夾同步功能。
• 爲了搶佔市場，優化體驗
  爲了讓這個用戶量達到倍數級的增加，因此在細節方面不斷的優化，這個能夠從chrome的版本號上就能看出來。

 

2. 另外客觀緣由：

• 結構不合理，讓單一div承載更多的樣式
• 瀏覽器自己的問題，實現標準不一致
• 標準自己很混亂
• 編輯器致使的編碼問題

 

二. 調試工具

1. Firebug

• Firebug入門指南
• Firebug控制檯詳解
• Firebug高級用法
• Firebug是我的使用比較順手的CSS調試工具，多是先入爲主，或者是我的習慣的緣由。
  用Inspect工具可以有效的找到Html,CSS佈局的問題，單擊Inspect工具會在頁面上選擇須要調試的範圍塊，而後Firebug相應的焦點會逃到HTML面板中，在HTML面板中點擊相應的DOM結構，頁面上方的預覽區域就會有相應的佈局樣式呈現，細心的讀者應該會發現，Margin爲黃色，Padding爲藍色。
  而後如何調試的？
  若是頁面中出現bug時，本質的問題時：瀏覽器呈現的佈局與指望中有誤差，如何尋找誤差？就是利用Inspect觀察頁面中的佈局是否達到了預期的位置。
• Style 標籤中屬性的顯示
  Style裏邊顯示的樣式及屬性是全部應用到這個標籤上的列表集合，

2. Chrome

• 格式化代碼
• 查看元素綁定了哪些事件
• 快速的根據勾子找到核心代碼區域
• 高效的利用工做區，進行遠程調試
• 利用Profiles進行性能優化
• 利用Audits能夠進行頁面無用CSS的監測或其它方面的建議等。

其它技巧：

• ctrl+ shift + F:全部 js 文件中搜索&查找 js 函數定義
• 經過左右方向鍵能夠摺疊源碼
• JSONView 能夠在瀏覽器中以樹型的方式查看json
• Pretty Beautiful Javascript 格式化壓縮js
• Vimium vim的方式操做chrome
• Visual Event
  主要用途是查看某個元素具體綁定了哪些事件

爲何沒有提到Firebug，Firebug的JavaScript調試，新版加了代碼着色以後，有時候反應比較遲緩，甚至會有假死的狀況，另外因爲插件自身的緣由，並非真實的模擬代碼執行的流程。因此JavaScript的調試優先推薦Chrome調試工具。

3. IE11

通常用IE版本大於7的瀏覽器上根據版本信息來調試大於7的瀏覽器，基本沒有大的偏差，IE11的debuger我的感受仍是有進步的，是想從細節處來吸引用戶。可是因爲自己技術基因的欠缺，易用性方面與Chrome仍是有很大的差異，即便這樣，目前仍是IE版本下調試者的惟一選擇。

4. IETester

IeTester雖然有不少缺點，但就從目前的市場來看，他是惟一一款能夠方便測試Ie6的軟件。另外他還有一個插件能夠在有限範圍內像Firebug同樣調試IE6，也能夠安裝在虛擬機的IE6上。
另外仍是解決思路的分享，簡單的問題簡單處理。

5. 虛擬機

由於IETester並不能真實的模擬IE6，因此有些特殊的Bug只能到虛擬機真實的環境中調試，在直接的IE6上能夠安裝IETester的Debugger插件，能夠方便的解決一些Bug。

6. Safari

由於Mac上默認是Safari，並且有必定的用戶市場，因此safari的調試也得關注一下。

由於默認的開發菜單是不顯示的，因此經過下面的方法讓他顯示出來：

• 在偏好設置裏邊顯示常規選項卡。
• 高級選項，勾選在菜單欄顯示高級選項。
• 關閉選項卡，在瀏覽器的工具欄出現了開發菜單，就能夠調試，其實和Google Chrome瀏覽器是同樣的。可是功能沒有Chrome強大。

7. Opera

Opera的調試仍是須要手動來開啓。

• 點擊Opera按鈕菜單，選擇更多工具，點擊啓用開發者工具。
• 以後菜單裏就會多出來開發者工具一項。
• 從開發者工具中選擇WEB檢查器，也能夠呼出調試器窗口。

以上兩款只作爲輔助的調試手段，通常代碼結構寫的規範或標準，在這兩款上面基本沒有大的問題。

 

三. 其它常見Bug

• 檢查HTML元素是否有拼寫錯誤、是否忘記結束標記
• 檢查CSS是否書寫正確 （w3c文件校驗）
• 用刪除法肯定錯誤發生的位置
• Float元素的父元素必寫Clearfix
• 是否忘記了寫DTD?DTD是不是在第一行？
• 是否重設了默認的樣式?
• 是不是編碼問題？

 

四. 其它思路

遇到特別怪異的Bug解析不了，及時的尋求別人的幫助，可使問題快速的獲得解決。

 

---

西安中級前端開發：284216186 ，歡迎加入~！