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