《吐血整理》系列大厂前端必备工具集合（抓包、调试、Mock数据等等）

时间 2020-04-05

标签吐血整理系列大厂前端必备工具集合抓包调试 mock 数据等等栏目快乐工作繁體版

原文原文链接

前言

Coding 应当是一辈子的事业，而不只仅是 30 岁的青春饭
本文已收录 Github https://github.com/ponkans/F2E，欢迎 Star，持续更新html

最近很多人私信怪怪，问我工做中都用到哪些工具，今天就分享给你们~~前端

做为一名 nice 的大前端开发，用好一些不错的工具，能给工做带来事半功倍的效果哦~node

这期纯干货，都是精心挑选的工具~git

通用小工具系列

Homebrew

官网地址：brew.sh/

HomeBrew是Mac下面的一个包管理器，方便咱们安装一些Mac OS没有的UNIX工具、软件github

一键安装应用十分方便，好比命令行直接安装QQ：web

iterm2

官网地址：www.iterm2.com/

Iterm2 用来代替系统自带的Terminal，提升工做效率~chrome

uTools

官网地址：u.tools/

提升工做效率的又一大神器，跨平台，插件很是多，像查个JavaScript，免费图床啊，都有，强推！！数据库

这个工具基本上能解决掉，你平常工做可以用到的全部的零碎小功能~npm

本文最强推荐的一个工具就是这个，没装的小伙伴必定要去试试，真的超赞！！！json

Snip

官网地址：snip.qq.com/

腾讯的一个轻量级的截屏软件，浏览器滚屏截图也支持哦~，用起来还行~

CleanMyMac X

官网地址：macpaw.com/cleanmymac

清理 Mac，协做软件的不二之选，十分强大！！

1 Password

官网地址：1password.com/zh-cn/

这个密码管理的工具是被作安全朋友强推滴，很好用，强推！

强推，不再用担忧密码想不起来了，不再用担忧密码泄露了~

关于安全问题，你们能够放心，已经咨询过专业的安全朋友，没毛病~~

xclient

官方地址：xclient.info/

里面汇聚了不少mac软件，而且都提供破解的方式，小伙伴们能够自取所需~

笔记系列

Notion

官网地址： www.notion.so/desktop

做为一名前端，这种颜值高的笔记本是必定要拥有滴啦~~

将笔记、知识库和任务管理无缝整合的协做平台，颜值超高超好用。

固然，印象笔记也不错哦，不过 Notion 功能更加丰富与强大~

Typora

官网地址：www.typora.io

Typora是一款写Markdown的工具，好用到不行，配合下面的ipic图床，直接爽翻天~

怪怪全部的文章都是在这个上面写滴~

Ipic

官网地址：ipic.ca

上面的 Typora 美中不足的就是图片是本地的地址，发到网上就会失效。

使用 Ipic 的免费图床，就能够解决啦~

Ipic 的免费图床是新浪滴，若是失效的话，能够自行配置X里云 OSS，很便宜~

Markdown 格式美化

官网地址：www.npmjs.com/package/lin…

一个npm包，经过命令将 Markdown文件中，中英文进行隔开，基于 AST 开发，且方便集成 ci

就颇有规范，颇有格局，很好看了~

有兴趣的小伙伴还能够去研究一下源码~

抓包系列

Charles

官网地址：www.charlesproxy.com/

抓包必备神器，实际上就是个代理服务器

跟后端联调，有问题，先抓包看看准没错~

Mock 接口数据也能够用这个工具，map local 到本地本身写的 json 文件便可

wireshark

官网地址：www.wireshark.org/

也是用来抓包滴，不过抓的是网络层的~

偶尔作一些网络层优化的时候，这个工具就能够派上用场啦哈~

UI 系列

ProcessOn

官网地址：www.processon.com/

怪怪全部文章里面画图，都是用这个神器，各类原型图，思惟导图，网络拓扑图都支持！！

平常开发，先画个图理一下思路，仍是颇有必要滴~

下面是怪怪以前写 Node.js 秒杀系统画的图~

Sketch

官网地址：www.sketch.com/get/

通常企业产品级的东西都是用 sketch 设计啦~~

这个工具，作出来的ppt，那也是一绝，不再用为ppt烦恼了~~

Zeplin

官网地址：zeplin.io/

一些平常的H5活动，用这个工具，或者下面要说的 Adobe Photoshop CC 2019

Adobe Photoshop CC 2019

官网地址：www.adobe.com/cn/products…

Ps嘛你们都知道的，没事帮妹子P下图，搞很差能找个女友啥滴~~

开发系列

Devdocs

官网地址：devdocs.io

开发技术文档，直接在线快速搜索哦，十分方便~

各类技术文档都很齐全

CodeLF

官网地址：unbug.github.io/codelf

GItHub的一个爬虫工具，估计很多小伙伴开发时都会苦恼给方法取名字，这个网站直接给你一步到位，多种选择。

不再怕写代码的时候取方法名啦~

SwitchHosts

官方地址：github.com/oldj/Switch…

前端开发中，老是要不断切换各类环境（线下，预发，线上），那这个小工具就是为你量身定作滴~~

SwitchHosts 其实也不是很完美，真正企业里面，我以为应该有一套统一的host切换工具，什么线下环境啊，预发环境啊，都统一在远端进行配置。（怪怪正在开发中，后面会开源出来）

极简二维码

地址：chrome 扩展商店中搜索【极简二维码】，添加到 chrome 插件

开发H5页面的时候，老是须要在移动端访问在pc端开发的页面，这个小工具直接生成当前网页的二维码，扫一扫就很快乐~~

好比，下面的蘑菇街主页。

Visual Studio Code

官网地址：code.visualstudio.com

Visual Studio Code是一个轻量且强大的跨平台开源代码编辑器（IDE），支持Windows，OS X和Linux。内置JavaScript、TypeScript和Node.js支持，并且拥有丰富的插件生态系统，可经过安装插件来支持C++、C#、Python、PHP等其余语言。

占据了前端大部分的市场~ 写代码的不二之选~~