chorme 插件

- FeHelper(前端插件) 这里只介绍我常用的..

JSON美化 - 尤其好用一些长的接口返回数据 or JSON串直接丢里面自动就帮你格式化掉。
JS正则表达 - 正则校验工具，默认提供一些工作中常用的正则表达式，支持内容实时匹配并高亮显示结果。
JSON比对工具 - 直接比较2端json的区别。
时间戳转换 - 通常做接口一些time类请求的正确校验。
信息解码转码。

- XSwitch 代理服务器

碍于环境啊,场景,需求...可能需要在不同的场景去加载不同的js脚本,但是又不能每次在测试开发的时候都去把项目发个版本，通过正则的形式实现项目js脚本的代理、实现敏捷开发。

- React Developer Tools

React开发者工具，可以在chorme里面去查看react dom的层级关系。

- Vue.js devtools

Vue开发者工具，可以在chorme里面去查看、跟踪数据、组件等变化。

- Redux DevTools

Redux开发者工具，可以查看的store仓库中的state是怎么样的、还可以看到触发的action的变化。

const { createStore } = require('redux'); // 引入工具插件 const { composeWithDevTools } = require('redux-devtools-extension'); // 创建 store 时，传入参数 const store = createStore(reducer, composeWithDevTools());

charles

一句话介绍

代理服务器，看到当前访问地址的所有请求信息,且实现拦截代理。(深入了解Please Open Baidu.com.)

使用场景

场景1：需要在依赖的html脚本里面改xx逻辑。
使用：

用charls先捕获到当前页页面的html脚本
页面查看源代码之后复制本地建立一个新的html脚本，
用捕获到的html去map loacl新的
重新刷新页面即可看到生效的代码

场景2：接口返回数据不符合条件的情况下
使用：建一个json文件、把需要改变的接口拦截后直接代理到新建的文件即可。

About vscode插件

Auto Close Tag 自动关闭标签。
Auto Rename Tag 重命名一个 HTML/XML 标签时，会自动重命名配对的 HTML/XML 标签。
Highlight Matching Tag 突显匹配便签。
Gitlens 看的项目中Git注释和提交记录。
Import Cost 可以在项目中看到导入/引入的包的大小。
Path Intellisense 路径自动感知。
Quokka.js 可以测试某段js或者ts代码的运行结果。
stylelint eslint是代码的格式这个就是css的。

一些好用的前端开发工具