前端工具--软件篇
前言
用好软件，让工作变得更美好。
正文
一、调试工具（断点调试）
vscode、google浏览器
说出来不怕大家笑，做前端3年了，平时使用的调试方式都是console.log，和debugger。其中使用console.log的频率很高，其实这样的习惯不好，console.log只能看到结果，看不到代码运行过程。
这两种方式的坏处是效率不高，因为看不到循环的过程，浪费多些时间，而且很容易代码遗留跟着到测试和生成环境，造成一些不良影响。
最好的是方式是在谷歌浏览器--开发者工具--source的断点调试或者使用vscode自带的调试工具，节省时间。
1、在浏览器--开发者工具--source的断点调试。按下ctrl + p（打开指定名字的文件），这个方式对于经过webpack打包过的和没有经过wepack打包的项目都是适用的。例如在大型的vue项目，需要调试xxx.vue文件中的代码中的77行代码，这时输入xxx.vue就能打开该文件，然后ctrl + G ，输入77快速跳到77行代码，这时就可以打断点，刷新页面就是调试了，简单快速。
2、vscode--文件--将文件夹添加到工作区（可以同时添加多个工作区，以前我不知道，每搞一个项目就开一个vscode，其实没有必要，只需开一个就行。）。vscode这个编辑器也是支持ctrl + p 和ctrl + G和浏览器一样的快捷键。这也难怪有人说vscode本质是一个浏览器。
最后点击开始调试按钮就可以了，还算简单的啦。对了，图2中的调试vue项目方式还需安装一个vscode插件，debugger for chrome。每次只需改变调试配置属性的值(vue项目是url)或者(小demo是program)就可以了。
其实思考过为啥以前老是用console.log。因为不知道ctrl+P、ctrl+G可以定位编译前的文件的某一行，另外，断点调试需要点击很多次，感觉浪费时间，其实不然，只需要熟悉断点调试按钮的用途，尽量多用下图黄框的按钮，就可以规避进入太多底层的函数，而造成的过多点击。
用断点调试吧，效率高。我说是就是。
二、代理工具
代理工具有：whistle，postman的mockServer，fiddler；
下面介绍whistle：
安装，启动，使用如github的avwo/whistle介绍；
启动起来在浏览器输入http://127.0.0.1:8899/#rules 会看到该应用；
此时，还不能使用，还需安装浏览器代理设置 SwitchyOmega 插件，让浏览器指向入http://127.0.0.1:8899；（SwitchyOmega和whistle一毛钱关系都没有的，换另外一个代理插件也是可以滴。）
whistle的作用是：
1、让本地的代码文件上测试环境，测试，测试环境等问题。
2、抓包调试；
3、可以做对应接口的mock数据；
等等
三、联调工具--postman
postman。
定义变量
定义变量是为了一次定义，多次使用，以后修改只改一个地方，效果等同于多次修改。变量可以指定不同的环境，也可以不指定环境。
环境管理
通常系统都有测试环境和线上环境，请求 url 肯定不一样，一些参数也可能不一样，可以通过切换不同的环境，动态变化，这样只需配置一次 url 和参数即可。
Collections
可以保存我们的请求，不用打开都重新设置请求地址和参数了：
工作空间
新版本提供了工作空间的功能，可在不同的项目中切换:
抓取浏览器的请求（和上面的whistle的功能是一样的）
可以自动映射到参数、cookie 信息，对应需要登录后调用的接口，可以现在浏览器登录，通过抓取，就可以自动设置 cookie 信息了；同时可以拦截接口，返回自定义的数据，和mock.js类似。
四、截图工具 snipaste FastStoneEditor
snipaste
好用到炸裂的工具；
第一功能是贴图，第一功能是贴图,第一功能是贴图。重要的事情说三遍。
贴图
写代码的时候，不是需要看文档和别人的代码对吧。有些时候需要的东西展示方式是图片，没法复制。解决方式可以使用OCR文字识别工具，但部分公司不允许使用外网，在线的OCR用不了，离线的比如（oneOnte2016）的图片提取文字功能识别率不高，识别率很高的ABBYY Screenshot Reader需要钱。汗。
贴图呗，把需要的内容贴在编辑器上方（数量不限一个），编辑速度将提高。
文字标注
文字标注支持多次编辑。
FastStoneEditor
滚动截图
snipaste 没有的功能，FastStoneEditor来补。
使用场景是啥？
初学前端时，需要截取某个网址的首页，练习样式，这时候可以用到它截图一个长图片；
以图片的形式做完整的笔记看到某个网页上有需要的内容，整张截图下来放在印象笔记了，日后找起来方便；
很多企业不是有考试吗？考试结束时的答案可以通过这种方式截取下来，当然首次推荐的是保存pdf或者word。
四、测量工具 pickpick
标尺
正确测量长度，单位有px,cm等；
放大镜
之前在股票网上的图片像素很不清时，用到的一个功能。
五、理想文档 zeal 、网站复制器 Teleport Ultra
zeal
支持目前主流技术的文档下载和查看。
就算断网了，一样能写代码和学习。
记得在上上一家公司的技术大佬说过，断你们的网，你们就写不了网了。我能啊，不是因为我很厉害，而是有zeal。
Teleport Ultra
作用和zeal类似，只不过下载的是整个网站。
六、谷歌浏览器插件 FEHelper
就是好用，没什么好写的。我写的《谷歌插件》那个博客里面有介绍。
七、粘贴板增强 ditto
该软件不是前端专属，凡是和文字（包括代码），图片打交道的那些人都可以用。程序员，作家，自媒体，文员等等。要是不使用这个软件，就真的对不起自己。
这个软件好用到炸裂，重点推荐。
可以使用在签名，邮箱，某一段需要重复输入的文字和代码等，具体场景使用多了就自然而然。
怎么用呢？举个栗子吧。
把每一个粘贴内容看成一个老婆,假设自己有很多个老婆，
ctrl + esc下方那个键 把她们唤出来，排成一列；
喜欢哪一个， ctrl + 序号pick她；
老婆太多可以下一页上一页的找；
分页去找不够快的话，按Tab输入特色：“杏眼柳叶眉”，找到心仪的她；
最后你就和下面这位一样高兴，呵呵。
按住shift + 分页，可以选中多条数据复制粘贴；上一家公司，需要做代码清单，1个小时的代码清单量，我半小时就可以完成。
最后
用好软件，节省时间，让工作变的更美好哈。
关注我，和豆腐做朋友。
