前端mock数据使用_web抓包

大家好，我是编程小6，很高兴遇见你，有问题可以及时留言哦。

前言

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

最近不少人私信怪怪，问我工作中都用到哪些工具，今天就分享给大家~~

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

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

通用小工具系列

Homebrew

官网地址：brew.sh/

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

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

前端mock数据使用_web抓包_https://bianchenghao6.com/blog_前端_第2张

iterm2

官网地址：www.iterm2.com/

Iterm2 用来代替系统自带的Terminal，提高工作效率~

前端mock数据使用_web抓包_https://bianchenghao6.com/blog_前端_第3张

uTools

官网地址：u.tools/

提高工作效率的又一大神器，跨平台，插件非常多，像查个JavaScript，免费图床啊，都有，强推！！

这个工具基本上能解决掉，你日常工作能够用到的所有的零碎小功能~

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

前端mock数据使用_web抓包_https://bianchenghao6.com/blog_前端_第4张

Snip

官网地址：snip.qq.com/

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

前端mock数据使用_web抓包_https://bianchenghao6.com/blog_前端_第5张

CleanMyMac X

官网地址：macpaw.com/cleanmymac

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

前端mock数据使用_web抓包_https://bianchenghao6.com/blog_前端_第6张

1 Password

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

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

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

关于安全问题，大家可以放心，已经咨询过专业的安全朋友，没毛病~~

前端mock数据使用_web抓包_https://bianchenghao6.com/blog_前端_第7张

xclient

官方地址：xclient.info/

里面汇聚了很多mac软件，并且都提供激活成功教程的方式，小伙伴们可以自取所需~

前端mock数据使用_web抓包_https://bianchenghao6.com/blog_前端_第8张

笔记系列

Notion

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

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

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

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

前端mock数据使用_web抓包_https://bianchenghao6.com/blog_前端_第9张

Typora

官网地址：www.typora.io

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

怪怪所有的文章都是在这个上面写滴~

前端mock数据使用_web抓包_https://bianchenghao6.com/blog_前端_第10张

Ipic

官网地址：ipic.ca

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

使用 Ipic 的免费图床，就可以解决啦~

Ipic 的免费图床是新浪滴，如果失效的话，可以自行配置X里云 OSS，很便宜~

前端mock数据使用_web抓包_https://bianchenghao6.com/blog_前端_第11张

Markdown 格式美化

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

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

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

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

前端mock数据使用_web抓包_https://bianchenghao6.com/blog_前端_第12张

抓包系列

Charles

官网地址：www.charlesproxy.com/

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

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

Mock 接口数据也可以用这个工具，map local 到本地自己写的 json 文件即可

前端mock数据使用_web抓包_https://bianchenghao6.com/blog_前端_第13张

wireshark

官网地址：www.wireshark.org/

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

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

前端mock数据使用_web抓包_https://bianchenghao6.com/blog_前端_第14张

UI 系列

ProcessOn

官网地址：www.processon.com/

怪怪所有文章里面画图，都是用这个神器，各种原型图，思维导图，网络拓扑图都支持！！

日常开发，先画个图理一下思路，还是很有必要滴~

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

前端mock数据使用_web抓包_https://bianchenghao6.com/blog_前端_第15张

Sketch

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

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

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

前端mock数据使用_web抓包_https://bianchenghao6.com/blog_前端_第16张

Zeplin

官网地址：zeplin.io/

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

前端mock数据使用_web抓包_https://bianchenghao6.com/blog_前端_第17张

Adobe Photoshop CC 2019

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

Ps嘛大家都知道的，没事帮妹子P下图，搞不好能找个女朋友啥滴~~

前端mock数据使用_web抓包_https://bianchenghao6.com/blog_前端_第18张

开发系列

Devdocs

官网地址：devdocs.io

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

各种技术文档都很齐全

前端mock数据使用_web抓包_https://bianchenghao6.com/blog_前端_第19张

CodeLF

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

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

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

前端mock数据使用_web抓包_https://bianchenghao6.com/blog_前端_第20张

SwitchHosts

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

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

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

前端mock数据使用_web抓包_https://bianchenghao6.com/blog_前端_第21张

极简二维码

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

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

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

前端mock数据使用_web抓包_https://bianchenghao6.com/blog_前端_第22张

Visual Studio Code

官网地址：code.visualstudio.com

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

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