工欲善其事必先利其器，有了本文介紹的工具和一些功能，你就可以高效的處理任務和信息。下面的這些工具都是本人平時經常用到的，如果你有更好的更有效率的工具，請告知一聲，補充一下!

　　火狐瀏覽器

　　前端要看網頁，瀏覽器是必備的，但為什么要選擇火狐瀏覽器而不是谷歌、IE、opera、360?首先，IE就不要談了，360那些國產的也不要提 了，opera 國內使用率并不高。使用谷歌瀏覽器也是一個好的選擇，但是我本人傾向于使用火狐。因為在之前的使用過程中，感覺 chrome 是拿來上網用的，而 Firefox 才是拿來開發用的，特別是下面介紹的一些功能插件都是基于火狐瀏覽器的。當然谷歌瀏覽器上面也有一套不錯的開發工具。

　　Firebug

　　這個插件具有非常強大的功能，它把網頁的 HTML 結構進行了整理，查看和修改 CSS 也非常方便。這只是基礎的功能，還有控制臺等可以調試 JavaScript 等，是前端不可缺少的工具。具體使用方法不再贅述。

　　查看選中部分源代碼

　　這是火狐瀏覽器中內置的一個功能，通過選取網頁上的一快內容，然后右擊查看選中部分源代碼，可以快速查看到你選中部分的源代碼內容。這樣就可以非常快速的了解到某個區域的 HTML 結構，從而避免從海量文件中尋找對應代碼。

　　Yslow

　　網站性能優化也是前端的一個重要任務，而雅虎出品的 Yslow 插件，就是進行網站性能測試的工具。使用它進行測試之后，會給出一個等級以及存在哪些問題以及如何進行修正。官方地址：點擊這里

　　查看元素(三維視圖)

　　火狐瀏覽器自帶的查看源代碼功能還是比較弱的，于是有 查看元素 這個功能。使用鼠標放在某個元素上，右擊 查看元素 ，即可看到這個元素的 HTML 結構和對應的 CSS 樣式，也可以很方便的修改。但是通常使用 FireBUG 來完成這個任務，因為自帶的功能不是特別強。這里主要介紹的是 查看元素 功能中的 三維視圖 功能。這個功能可以把你的網頁變成三維視圖，從而可以非常方便的查看到網站的結構是否合理、是否正確閉合、是否嵌套層數太多。

　　自適應設計視圖

　　目前響應式設計越來越流行，這個功能就是來測試網頁的響應式布局效果。同樣也是火狐瀏覽器中內置的功能，在 菜單 中 Web開發者 選項中可以找到。雖然網上也有一些網頁版的響應式測試工具，但是我個人覺得還是瀏覽器自帶的比較方便實用，速度也比較快。此外，據說 chrome 上面也有類似的工具。

　　IE9

　　IE9 是用來做兼容性測試用的。如何做 IE 兼容性測試呢?IE9 已經像 firefox chrome 一樣，內置了非常簡陋、難用的頁面調試功能，但是其中有一個非常重要的功能，就是設置瀏覽器和文檔解析模式。它可以方便的切換到 IE7 、IE8 文檔渲染模式，此外還有怪異模式等等。這樣，用IE9就可以同時做IE7和IE8的兼容性測試。對了，IE6呢，IE6怎么辦。原來你還在費力的做IE6 的兼容?

　　有道云筆記

　　前端也是需要不斷學習的，包括一些總結或者網上的資料。以及一些優秀作品的網頁截圖、圖片資源等等，都是需要分類整理的。面多這么多的信息，你如果 用文件夾和 Word文檔或者瀏覽器的收藏夾來整理，那簡直是弱爆了。有道云筆記是我用過最好的比較，容量大，使用方便。可以直接使用網易郵箱登陸開通，如果你還沒有 賬號，可以通過我的邀請鏈接注冊。

　　火狐剪報

　　快速對當前網頁進行截圖，并且可以進行簡單編輯。搭配有道云筆記，可以記錄優秀的設計，提供一些靈感。此外有很多類似的網頁截圖工具。

　　notepad++

　　非常小巧好用的文本編輯器。用來快速高效的搜索修改代碼。如果你想修改一點小代碼的時候，卻要忍受幾秒的編輯軟件啟動時間，那么就用這個吧。無論是 寫代碼還是修改代碼，個人覺得都比那些功能齊全的編輯軟件好很多。當然文本編輯器也有很多，但是用了一遍我個人覺得這是最好的。