前端學習中，要用到各種各樣的軟件和插件、好的軟件和插件能夠提高我們的開發速度。在此分享幾個我用過的軟件和插件，覺得很方便。

? 當然，有些軟件或插件只是對初學者學習有用，在實際開發中，有UI給psd設計圖，在各種協作平臺（比如藍湖）中各種屬性及其屬性值一目了然。

? 話有點多了，看第一軟件：PxCook。這是一個測量工具，幾M的軟件，比ps方便多了。看效果就知道了。

PxCook，測量工具

第一種效果（設計模式）

? 針對圖片的時候，當您拿到一張圖片想要做靜態頁面時，就要做很多的測量，取顏色。看圖，是不是比用ps或者fw方便多了，當然也可能還存在更好的軟件。

第二種效果（開發者模式）

? 這就需要文件格式是psd文件了，都是內行人，直接看圖就知道能做什么了。

Css satyr 精靈圖制作軟件

下載安裝后，直接拖圖片進來，點擊生成

會生成兩個文件，一個圖片，一個是代碼。

看代碼，各圖片的位置和調用方式都給出來了，爽不爽你說了算。

圖片下載插件 Image Downloader

谷歌的圖片下載插件，在谷歌商店下載，谷歌商店是需要fq(要綠色上網哦），添加到擴展程序后，直接在想要下載圖片的網站點擊一下就一目了然了。看圖

爽吧，點一下紅色框的地方，頁面顯示的圖片都能下載，可以全選，可以單選；需要注意的是，藍色框的為文件夾名字是我自己寫的，不寫的后果是下載的圖片都在瀏覽器的下載路徑，有個文件夾裝著就方便操作了。

自動更新插件 livereload

在每次編寫完代碼時打開瀏覽器每次都是刷新看效果時是不是很煩，裝 這個插件你就沒有這個煩惱了。

步驟有點長，直接看這個博主Evil__的，寫得很詳細。我就不想再寫了，主要注意的是，每次運行新的文件，都是需要點一下谷歌的插件，和在vsCode中按一下Ctrl shift p ，彈出的輸入框輸入livereload，點擊一下enable 關聯一下當前文件就可以自動刷新 了，會有點點小麻煩，但是對于長時間同一個文件的餓開發還是建議可以用一下的。

推薦兩個日常使用的插件

屏蔽廣告插件：adblock 裝了這個插件，告別一刀99999貪玩藍月，麻麻再也不用擔心我瀏覽的網頁有小廣告了。

插件2：crxMouse 鼠標手勢軟件。

總結

以上是生活随笔為你收集整理的前端学习便捷软件，插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。