个人前端工程师开发工具记录

github地址我们前端,每个人都有自己的开发工作环境,工具等,所以我写了这一篇文章,为自己方便把自己常用的**前端工具**记录下来,以便到时候在新的电脑上可以快速搭建自己熟悉的工作环境和使用自己熟悉的工具,同时可能也会对你有少少的帮助吧!

前端环境需要的软件

nvm 管理node 版本, nvm-windows
volta 同node版本管理,支持目录级别使用不同node版本
n 同node版本管理
~~node 如果不需要多个node版本管理，直接下载这个（不推荐）~~
npm , cnpm , 建议使用nrm 包镜像地址管理, spm 安装可以更换淘宝的安装包地址(淘宝镜像)
pnpm 全新包管理
nrm 包链接管理
Python 2.7
Ruby(git依赖)
git-ssh 配置和使用 coding
~~gulp 下面会列出常用插件 , F.I.S (百度前端工具框架)~~
sass 教程/ less
sass文件编译方案
git还有另外一个工具(在xp,win7上可用还是图形的哦,还有文章) 点我
node-sass 依赖node版本列表

安装顺序

1.window 下载 nvm-windows 直接安装好，再根据需要安装对应的node版本，报错请重启电脑后再试！

方法一： nvm 安装（官网默认下载安装即可），找node 官网找到需要安装的 node version，另外一个版本切换工具n 使用命令行

# 查看安装node 12.22.6, 64位版本
nvm install 12.22.6 64
# 查看已安装的node版本列表
nvm list
# 使用某版本
nvm use 12.22.6
# 后面直接使用npm即可

# 版本切换工具2
npm install -g n

# 安装node版本
n 12.22.6

# 切换,输入 n 然后根据列表选择回车即可

方法二：直接下载 node 应用程序安装即可

2.安装依赖包管理,更多用法请移步到nrm包官网

// 全局安装
npm i nrm - g

// 参考说明文章  https://juejin.cn/post/6969450118839795749
npm i pnpm -g

// 帮助
nrm help

// 查看列表
nrm ls
// eg:
// # 带有 * 为当前安装依赖源
  npm ---- https://registry.npmjs.org/
  cnpm --- http://r.cnpmjs.org/
* taobao - https://registry.npm.taobao.org/
  nj ----- https://registry.nodejitsu.com/
  npmMirror  https://skimdb.npmjs.com/registry/
  edunpm - http://registry.enpmjs.org/

// 切换源(镜像)
nrm use taobao

// 添加源
// eg:
nrm add taobao https://registry.npm.taobao.org/

// yarn
npm install --global yarn 或 npm i -g yarn

// 快速删除 node_modules
npm i -g npkill

npm 常用工具包（可选）

// gulp [使用 gulp 构建工程][16]
npm i gulp 

//Webpack
npm i -g webpack

//Browsersync
npm i -g browser-sync

// Debug log输出
npm i debug

// 多项目不同node自动切换
npm install -g avn avn-nvm avn-n
# https://github.com/wbyoung/avn

git 工具

git-for-windows
TortoiseGit 乌龟
SourceTree / SourceTree 证书下载
Git Extensions 缺点: 需要自己定义第三方differ工具
Sublime Merge 优点: 自动隐藏交叉合并,分支更清晰缺点:只支持x64

编辑器IDE

尝试工作流工具/手架

tmt-workflow 感觉不好用
WeFlow tmt-workflow的桌面版，也感觉不好用
iview iview ui自己的手架开发工具
vue-cli vue spa 方式的手架
Amazing-Windows-Apps

常用工具列表：

JSON 数据的简单可视化工具
数据库关系图设计
github start收藏项目管理工具-AStral
jscpd 重构,找到重复代码
jsinspect 重构,检测相似的代码片
[Shadowsocks 科学上网带有一个免费账号 https://github.com/yyman001/software] (https://github.com/shadowsocks/shadowsocks-windows)
Beyond Compare 4 文件对比
cmder(类似cmd的命令提示符,有自带git版本) 配置教程
WeChatPlugin-MacOS 微信小助手-调试开发
右键助手1.0 (我自己开发的,详细点这里) ,彗星小助手（取色） , W3Cfuns前端开发工具箱 (到百度分享查看下载地址)
AdobeDreamweaverCS4 写表格,热点图
FlashFXP (ftp上传工具)
Markdown Pad 2 (写Markdown格式文档必备的软件,我文章是用在线版)
Winmerge 开源的文件比较工具(如果你不能使用Beyond Compare)
DocBlockr Sublime Text 2/3-注释生成插件
JSDOC 注释文档生成工具
字体解决方案1-字蛛是一个中文字体压缩器,让网页自由引入中文字体成为可能
字体解决方案2-Fontmin,第一个纯 JavaScript 字体子集化方案
docker GUI - Now part of the Docker Toolbox

模拟数据/请求工具

Easy Moc 模拟数据最好方案,提供的功能非常强大
postwoman 在线
postman 测试请求接口
Postman中文版
APIPOST
Apifox API 文档、API 调试、API Mock、API 自动化测试

css 工具

把CSS代码转成SASS的应用
CSS Sprites 样式生成工具
koala考拉(Less、Sass、Compass、CoffeeScript编译) ----免费

设计

Mark 马克鳗 (设计图测量)
PxCook 像素大厨智能标注绝对可以解放双手了，强烈推荐。
Assistor PS (切图工具)

正则

在线正则regex pal
正则图形显示
Expresso是一个.NET版本的正则表达式编辑器。可以测试你的正则表达式。
Regex Match Tracer 2.1 (正则工具)

服务器

[nginx]
brower-sync 自动刷新页面-多端同步,支持gulp
WampServer 搭建PHP环境服务器
phpStudy php搭建环境,包含多个版本随便切换
MyWebServer 迷你型服务器
F5 自动刷新浏览器(本地开发)
小苹果服务器(手机调试专用win7以上)

抓包/数据拦截

whistle
Fiddler2 数据拦截或 360管理软件下载

图片处理

Photoshop CS4/CS6 不解释,PS插件?建议去设计优
APNG Software 转APNG软件
iSparta 图片压缩
limitPNG 无损压缩的极限
智图客户端
雪碧图合并 Cyotek Spriter
雪碧图合并 TexturePackerGUI - 这个厉害点,支持生成雪碧图后的坐标值文件
gka 是一款简单的、高效的帧动画生成工具，图片处理工具,快速制作高性能帧动画解决方案
熊猫png压缩
智图(多种图片压缩)
雪碧图坐标查询
在线切图工具 (最近找到的,不知道如何,欢迎大家测试)
SETUNA2 (图片裁剪对比)

页面性能分析工具

gtmetrix 网站性能分析 - 推荐不想用插件工具就直接访问网页吧
WebPagetest 一款非常优秀的网页前端性能测试工具国外在线地址国内阿里在线地址
谷歌插件 PageSpeed (页面性能检测优化 - 我自己测试卡到一半?我浏览器逗比?)
谷歌插件 Google Web Tracing Framework (持移动、PC，性能分析的神器,又一个鸡文,反正我是不懂怎么用~)
火狐请参考 YSlow
web应用性能检测-百度只支持移动端页面
性能检测工具Tracker.js
他的谷歌插件, WEB前端助手(FeHelper)

火狐浏览器插件

Firebug
YSlow 性能检测
JSONView 在页面查看那json数据
CSSUsage 检测无效css
Dust-Me Selectors 检测页面css沉余
FireQuery jq语法高亮
FireRainbow js语法高亮
HtmlValidator html文档标准检测
NoScript 控制页面和浏览器js
FireGestures 用鼠标手势命令
Adblock Edge 广告过滤
webDeveloper1.2.2-(zh-cn) 中文版,点我（除了最后一个网上可能找不到中文版）

谷歌浏览器插件

Sight 通过各种主题和字体选项，Sight将网站的源代码以更为视觉舒适的形式强调。
海淘访问助手 -免费翻墙谷歌插件-强烈推荐
octotree 看github的时候生成项目tree 推荐
Awesome Autocomplete for GitHub - github搜索异步查询结果
Quick CSS 快速在 Chrome 开发环境检测 CSS 代码的规范性
AlloyDesigner 嵌入式开发插件-详情自己看连接
Web Developer (居然被我找到谷歌版的,不过是英文的,不错了)
Window Resizer (允许你快速调整浏览器窗口分辨率)
CSSViewer (浮动面板简单显示CSS属性)
Wappalyze (分析网站使用什么技术,优化的时候可以看人家网站使用什么技术)
IE Tab (直接在Chrome中使用IE渲染引擎模仿IE,IE6、IE7、IE8和IE9,扩展目前仅适用于Windows系统,感觉有点不靠谱)
Clear Cache(能让你从工具栏中清除缓存)
Image Downloader (批量下载图片)
谷歌加速插件替换一些需要翻墙才能链接的js替换为国内链接
JetBrains IDE Suport (配合WS 在浏览器同步刷新,似乎在谷歌高版本已经无效,如果你不使用ws,可以配合gulp的插件,也可以实现同步更新)
ReRes 开发的时候替换测试路径为本地,实际是上线后的地址
Enable Copy 去除右键限制
~~JSON View 查看json格式数据~~
WEB前端助手(FeHelper)_v5.8
有道云笔记网页剪报 (保存页面到有道笔记本)
Firebug Lite 谷歌用火狐插件(哈哈,开发者用火狐提供的ie火狐js搞的吧)
网址转二维码 (手机测试中有用,扫描就打开测试地址了)
ScriptSafe汉化版 (可以控制页面的js脚本)
Word Count 是一款用来统计选中网页的字数，支持中文的扩展。
Chrono下载管理器(https://chrome.google.com/webstore/detail/chrono-download-manager/mciiogijehkdemklbdcbfkefimifhecn)
ShoeBox 雪碧图-支持多款游戏js框架

其他软件工具

Flux 调整屏幕亮度,暖色调
ADSafe 过滤广告
Everything 快速查询
Wise Registry Cleaner 注册表清理
Clover 让你的Windows资源管理器拥有像谷歌浏览器一样好用的多标签页
360云盘同步数据文件
有道云笔记协作同步开发
Proxy SwitchySharp 代理工具,翻墙用的,需要自己找账号信息填写哦
Snipaste 截图工具
[Q-Dir 多窗口文件夹管理]
[Xmanager Enterprise 5 远程服务器连接xshell]
自同步（zisync）多电脑同步数据

其他一些网上工具

gulp常用插件

编译Sass (gulp-ruby-sass || gulp-sass)
编译Map文件 (gulp-sourcemaps)
自动添加css前缀（gulp-autoprefixer）
压缩css （gulp-minify-css）
压缩css使用的 gulp-mini-css[国产.配合清除沉余css插件后的压缩插件,跟上面的不一样哦]
js代码校验（gulp-jshint）
合并js文件（gulp-concat）
压缩js代码（gulp-uglify）
PreCSS预处理1--处理CSS优化 (cssnano)
BASE64编码图片 (gulp-base64)
压缩图片（gulp-imagemin）
雪碧图 (gulp.spritesmith) https://github.com/twolfson/gulp.spritesmith
自动刷新页面（gulp-livereload）//不建议配合WS一起用(WS的自动保存,然后你懂的,但如果你不是用less或者sass开发,还是建议使用的)
图片缓存，只有图片替换了才压缩（gulp-cache） //我也没用过
更改提醒（gulp-notify） //我也没用过
外链文件合并（gulp-htmlone）https://github.com/amfe/or.htmlone.gulp //我也没用过
清除文件（del）
替换内容,需自定义范围内容,支持正则[常用于替换上线后的js,css文件路径] （gulp-replace）
同上,更加智能 (gulp-rev-collector)
智图图片处理插件 (gulp-imageisux)
将文件转成utf8编码的gulp插件(gulp-utf8-convert)
合并按模块引入的html文件(gulp-content-includer)
提取html标记内容合并到指定位置 gulp-html-merge
压缩html (gulp-minify-html)

帮助文档

WebStorm配置

VsCode配置

Sublime Text 3配置

Sublime Text 3 代码片段插件

webpack常用插件

Webpack Monitor 使用图表显示打包后文件包含内容百分比如果页面打开一直load，请修改node_modules\_webpack-monitor@1.0.13@webpack-monitor\build\index.html 里面js的链接
webpack进阶面板
webpack-dev-server 实时重新加载

再一次感谢您花费时间阅读这篇文章,如果你有更好的工具,可以给我留言,其他资料还在整理当中,感谢你的阅读!

作者 @黑色技术创建时间: 2015 年 3月 15日更新时间: 2020 年 1月 18日

yyman001/web_tools

ErrorLooks like something went wrong!

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages