前端
工具
總結(jié)
github地址我們前端,每個(gè)人都有自己的開(kāi)發(fā)工作環(huán)境,工具等,所以我寫(xiě)了這一篇文章,為自己方便把自己常用的前端工具記錄下來(lái),以便到時(shí)候在新的電腦上可以快速搭建自己熟悉的工作環(huán)境和使用自己熟悉的工具,同時(shí)可能也會(huì)對(duì)你有少少的幫助吧!
前端環(huán)境軟件安裝
node.js很多東西都需要它
npm,cnpm,spm安裝可以更換淘寶的安裝包地址(淘寶鏡像)
Ruby(git依賴) ,msysgit/TortoiseGit/SourceTree[win7以上]
gulp下面會(huì)列出常用插件 ,F.I.S (百度前端工具框架)
git
還有另外一個(gè)工具(在xp,win7上可用還是圖形的哦,還有文章)點(diǎn)我
安裝順序 先安裝node
--> npm
--> gulp
使用 gulp 構(gòu)建工程先安裝ruby
--> git
,sass
,compass
常用工具列表：
WebStrom我個(gè)人比較喜歡這個(gè)軟件,功能非常強(qiáng)大已經(jīng)更新到第10版(點(diǎn)我下載注冊(cè)機(jī)和配色方案) ,sublime_text(文章介紹),HBuilder
cmder(類(lèi)似cmd的命令提示符,有自帶git版本)配置教程
koala考拉(Less、Sass、Compass、CoffeeScript編譯) ----免費(fèi)
Mark 馬克鰻(設(shè)計(jì)圖測(cè)量)
小蘋(píng)果服務(wù)器(手機(jī)調(diào)試專用win7以上)
F5自動(dòng)刷新瀏覽器
Notepad++不解釋
Photoshop CS4/CS6 不解釋,PS插件?建議去設(shè)計(jì)優(yōu)
計(jì)算器 不解釋
右鍵助手1.0 (我自己開(kāi)發(fā)的,詳細(xì)點(diǎn)這里) ,彗星小助手（取色） , W3Cfuns前端開(kāi)發(fā)工具箱 (到百度分享查看下載地址)
AdobeDreamweaverCS4 寫(xiě)表格,熱點(diǎn)圖
WampServer 搭建PHP環(huán)境服務(wù)器
MyWebServer 迷你型服務(wù)器
FlashFXP (ftp上傳工具)
Regex Match Tracer 2.1 (正則工具)
SETUNA2(圖片裁剪對(duì)比)
Markdown Pad 2(寫(xiě)Markdown格式文檔必備的軟件,我文章是用在線版)
Winmerge開(kāi)源的文件比較工具(如果你不能使用Beyond Compare)
Expresso是一個(gè).NET版本的正則表達(dá)式編輯器?？梢詼y(cè)試你的正則表達(dá)式。
頁(yè)面性能分析工具(比較重要就不分類(lèi),直接一個(gè)大類(lèi))
gtmetrix 網(wǎng)站性能分析 - 推薦不想用插件工具就直接訪問(wèn)網(wǎng)頁(yè)吧
WebPagetest一款非常優(yōu)秀的網(wǎng)頁(yè)前端性能測(cè)試工具國(guó)外在線地址國(guó)內(nèi)阿里在線地址
谷歌插件PageSpeed(頁(yè)面性能檢測(cè)優(yōu)化 - 我自己測(cè)試卡到一半?我瀏覽器逗比?)
谷歌插件Google Web Tracing Framework(持移動(dòng)、PC，性能分析的神器,又一個(gè)雞文,反正我是不懂怎么用~)
火狐請(qǐng)參考 YSlow
web應(yīng)用性能檢測(cè)-百度只支持移動(dòng)端頁(yè)面
性能檢測(cè)工具Tracker.js- 他的谷歌插件, WEB前端助手(FeHelper)
火狐瀏覽器插件
Firebug
YSlow 性能檢測(cè)
JSONView 在頁(yè)面查看那json數(shù)據(jù)
CSSUsage 檢測(cè)無(wú)效css
Dust-Me Selectors 檢測(cè)頁(yè)面css沉余
FireQuery jq語(yǔ)法高亮
FireRainbow js語(yǔ)法高亮
HtmlValidator html文檔標(biāo)準(zhǔn)檢測(cè)
NoScript 控制頁(yè)面和瀏覽器js
FireGestures用鼠標(biāo)手勢(shì)命令
Adblock Edge廣告過(guò)濾
webDeveloper1.2.2-(zh-cn) 中文版,點(diǎn)我
除了最后一個(gè)網(wǎng)上可能找不到中文版
谷歌瀏覽器插件 --用到谷歌插件其實(shí)很少(其實(shí)我自己用的蠻多),為了方便,因?yàn)楣雀璨寮螺d很多問(wèn)題,我直接發(fā)到網(wǎng)盤(pán),有需要的可以自己下載(360,獵豹應(yīng)用市場(chǎng)也有好多應(yīng)用)
Web Developer(居然被我找到谷歌版的,不過(guò)是英文的,不錯(cuò)了)
Window Resizer(允許你快速調(diào)整瀏覽器窗口分辨率)
CSSViewer(浮動(dòng)面板簡(jiǎn)單顯示CSS屬性)
Wappalyze(分析網(wǎng)站使用什么技術(shù),優(yōu)化的時(shí)候可以看人家網(wǎng)站使用什么技術(shù))
IE Tab(直接在Chrome中使用IE渲染引擎模仿IE,IE6、IE7、IE8和IE9,擴(kuò)展目前僅適用于Windows系統(tǒng),感覺(jué)有點(diǎn)不靠譜)
Clear Cache(能讓你從工具欄中清除緩存)
Image Downloader(批量下載圖片)
谷歌加速插件 替換一些需要翻墻才能鏈接的js替換為國(guó)內(nèi)鏈接
JetBrains IDE Suport (配合WS 在瀏覽器同步刷新,似乎在谷歌高版本已經(jīng)無(wú)效,如果你不使用ws,可以配合gulp的插件,也可以實(shí)現(xiàn)同步更新)
ReRes開(kāi)發(fā)的時(shí)候替換測(cè)試路徑為本地,實(shí)際是上線后的地址
Enable Copy 去除右鍵限制
JSON View 查看json格式數(shù)據(jù)
WEB前端助手(FeHelper)_v5.8
有道云筆記網(wǎng)頁(yè)剪報(bào) (保存頁(yè)面到有道筆記本)
Firebug Lite 谷歌用火狐插件(哈哈,開(kāi)發(fā)者用火狐提供的ie火狐js搞的吧)
網(wǎng)址轉(zhuǎn)二維碼(手機(jī)測(cè)試中有用,掃描就打開(kāi)測(cè)試地址了)
ScriptSafe漢化版 (可以控制頁(yè)面的js腳本)
Word Count 是一款用來(lái)統(tǒng)計(jì)選中網(wǎng)頁(yè)的字?jǐn)?shù)，支持中文的擴(kuò)展。
建議訪問(wèn)360云盤(pán)共享文件多,有點(diǎn)亂,自己翻 訪問(wèn)密碼 a505
其他軟件工具
Flux調(diào)整屏幕亮度,暖色調(diào)
ADSafe過(guò)濾廣告
Everything快速查詢
Wise Registry Cleaner注冊(cè)表清理
Clover讓你的Windows資源管理器擁有像谷歌瀏覽器一樣好用的多標(biāo)簽頁(yè)
360云盤(pán)同步數(shù)據(jù)文件
有道云筆記協(xié)作同步開(kāi)發(fā)
Proxy SwitchySharp 代理工具,翻墻用的,需要自己找賬號(hào)信息填寫(xiě)哦
其他一些網(wǎng)上工具
在線切圖工具(最近找到的,不知道如何,歡迎大家測(cè)試)
配色方案(美工的工具)
WhatTheFont-字體查詢1求字體網(wǎng)-字體查詢2What Font is-字體查詢3
gulp常用插件
整理了在自己工作當(dāng)中常用的一些gulp 插件
編譯Sass (gulp-ruby-sass)
編譯Map文件 (gulp-sourcemaps)
自動(dòng)添加css前綴 （gulp-autoprefixer）
壓縮css （gulp-minify-css）
壓縮css使用的 gulp-mini-css[國(guó)產(chǎn).配合清除沉余css插件后的壓縮插件,跟上面的不一樣哦]
js代碼校驗(yàn) （gulp-jshint）
合并js文件 （gulp-concat）
壓縮js代碼 （gulp-uglify）
壓縮圖片 （gulp-imagemin）
自動(dòng)刷新頁(yè)面 （gulp-livereload）//不建議配合WS一起用(WS的自動(dòng)保存,然后你懂的,但如果你不是用less或者sass開(kāi)發(fā),還是建議使用的)
圖片緩存，只有圖片替換了才壓縮 （gulp-cache） //我也沒(méi)用過(guò)
更改提醒 （gulp-notify） //我也沒(méi)用過(guò)
清除文件 （del）
替換內(nèi)容,需自定義范圍內(nèi)容,支持正則[常用于替換上線后的js,css文件路徑] （gulp-replace）
同上,更加智能 (gulp-rev-collector)
智圖圖片處理插件 (gulp-imageisux)
將文件轉(zhuǎn)成utf8編碼的gulp插件(gulp-utf8-convert)
合并按模塊引入的html文件(gulp-content-includer)
壓縮html (gulp-minify-html)
幫助文檔
css手冊(cè)在線(里面可以下載,感謝作者:飄零霧雨)
其他在線手冊(cè)自己看吧,應(yīng)該有的都有了
谷歌搜索地址(不用翻墻)
再一次感謝您花費(fèi)時(shí)間閱讀這篇文章,如果你有更好的工具,可以給我留言,其他資料還在整理當(dāng)中,感謝你的閱讀!
作者@黑色技術(shù)、
