工欲善其事必先利其器,有了本文介紹的工具和一些功能,你就可以高效的處理任務和信息。下面的這些工具都是本人平時經常用到的,如果你有更好的更有效率的工具,請告知一聲,補充一下!
火狐浏覽器
前端要看網頁,浏覽器是必備的,但為什麼要選擇火狐浏覽器而不是谷歌、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++
非常小巧好用的文本編輯器。用來快速高效的搜索修改代碼。如果你想修改一點小代碼的時候,卻要忍受幾秒的編輯軟件啟動時間,那麼就用這個吧。無論是 寫代碼還是修改代碼,個人覺得都比那些功能齊全的編輯軟件好很多。當然文本編輯器也有很多,但是用了一遍我個人覺得這是最好的。