前端开发必装插件-开发神器

客官°小女子只卖身不卖艺 2022-12-05 12:08 22阅读 0赞

### 文章目录 ###

*   *  一、发送请求工具
     *   *  1.1 Advanced REST Client
         *  1.2 Postman
     *  二、Json查看器：JSONView
     *  三、Vue调试插件：vue-devtools
     *   *  3.1 下载
         *  3.2 安装
     *  四、Web Developer
     *  五、FeHelper

## 一、发送请求工具 ##

### 1.1 Advanced REST Client ###

*  Advanced REST Client是Chrome浏览器下的一个插件，通过它可以发送http、https、WebSocket请求。  
    下载地址：链接：[https://pan.baidu.com/s/1DfcMjZ0wEihQ9CJZhhJoKg][https_pan.baidu.com_s_1DfcMjZ0wEihQ9CJZhhJoKg] 提取码：1234

安装步骤：

*  在谷歌浏览器地址栏中输入：chrome://extensions/，然后回车；
 *  如下操作![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70_pic_center]
 *  把下载的Advanced-REST-client\_v10.0.12-stable.zip 文件直接拖动到本界面即可。如下是已经加载的插件。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70_pic_center 1]

### 1.2 Postman ###

下载客户端：链接：[https://pan.baidu.com/s/1VCtpc0ByP\_1TC\_GfIBbNUA][https_pan.baidu.com_s_1VCtpc0ByP_1TC_GfIBbNUA] 提取码：1234

*  Postman：Postman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件。

安装后，需要注册一下，随便填写信息。安装成功后的界面如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70_pic_center 2]

## 二、Json查看器：JSONView ##

下载地址：链接：[https://pan.baidu.com/s/16ozNH15-OQC6vyrrNRbBEQ][https_pan.baidu.com_s_16ozNH15-OQC6vyrrNRbBEQ] 提取码：1234  
下载后进行解压：…\\JSONView-for-Chrome-master\\JSONView-for-Chrome-master\\WebContent

安装时，打开：chrome://extensions/  
![在这里插入图片描述][20200910104359518.png_pic_center]  
选择下载后的文件解压后的目录：…\\JSONView-for-Chrome-master\\JSONView-for-Chrome-master\\WebContent

安装成功后，出现如下界面：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70_pic_center 3]

## 三、Vue调试插件：vue-devtools ##

### 3.1 下载 ###

首先去github下载vue.zip文件插件（还有npm安装方法这里就不介绍了自行百度）下载地址：[https://github.com/vuejs/vue-devtools][https_github.com_vuejs_vue-devtools]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70_pic_center 4]

### 3.2 安装 ###

*  下载：链接：[https://pan.baidu.com/s/1hDj0fzoc196qbQYBpaRANA][https_pan.baidu.com_s_1hDj0fzoc196qbQYBpaRANA] 提取码：1234

下载后进行解压，然后在如下界面的：  
![在这里插入图片描述][20200910112102435.png_pic_center]  
点击‘加载已解压的扩展程序’，然后选择解压后的目录，安装完毕后出现如下界面：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70_pic_center 5]

## 四、Web Developer ##

下载地址：  
链接：[https://pan.baidu.com/s/1xCWKSK7ktSKAonbAfCBLjA][https_pan.baidu.com_s_1xCWKSK7ktSKAonbAfCBLjA]  
提取码：1234

*  相信在 Chrome 面世之前很多网页开发者都用过 FireFox上的 Web Developer 附加组件，功能非常强大。现在，Chrome 版本的 Web Developer 也正式推出了，而且开发者和 Web Developer For FireFox 是同一个人—— Chris Pederick。添加一个工具栏按钮与各种Web开发工具。网络开发者扩展的官方端口。
 *  Web开发人员扩展插件在浏览器上添加了一个工具栏按钮，使用不同的Web开发工具。这是官方端口的Web开发扩展的浏览器。
 *  Web Developer 插件强大的功能超乎你的想象，用于CSS网页布局开发调试只是它强大功能的一部分，对于网络程序的开发也提供了非常强大的辅助设计功能，例如：调试CSS、清理Cookie、对表单图片等对象进行操作等等。
 *  web developer 尺寸工具的使用方法如下：Resize尺寸工具 我们可以用它来改变浏览器窗口的尺寸，如果我们使用了1600*1200的分辨率，我们可以借助此工具来模拟1027*768的窗口效果。

## 五、FeHelper ##

*  WEB前端助手:FeHelper是一款chrome浏览器插件。包含一些前端实用的工具,如字符串编解码、代码美化、JSON格式化查看、二维码生成器、编码规范检测、栅格规范检测、网页性能检测、页面取色等web前端开发的常见功能。  
    官网下载：[https://www.baidufe.com/fehelper/index/index.html][https_www.baidufe.com_fehelper_index_index.html]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70_pic_center 6]

[https_pan.baidu.com_s_1DfcMjZ0wEihQ9CJZhhJoKg]: https://pan.baidu.com/s/1DfcMjZ0wEihQ9CJZhhJoKg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/6c01680c47e24ecfa7165930b38495b0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/ec714fd933a0472d8d3efd97bbeb2c02.png
[https_pan.baidu.com_s_1VCtpc0ByP_1TC_GfIBbNUA]: https://pan.baidu.com/s/1VCtpc0ByP_1TC_GfIBbNUA
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/ee2e3e48fd714d2c8ade251c64bf84bb.png
[https_pan.baidu.com_s_16ozNH15-OQC6vyrrNRbBEQ]: https://pan.baidu.com/s/16ozNH15-OQC6vyrrNRbBEQ
[20200910104359518.png_pic_center]: /images/20221123/a86222e123c6467a8cfe906ace8179ff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/891f416ff6df4eee91b01f2130072332.png
[https_github.com_vuejs_vue-devtools]: https://github.com/vuejs/vue-devtools
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/a9c3a88303204a2b8a8649b678dc7a60.png
[https_pan.baidu.com_s_1hDj0fzoc196qbQYBpaRANA]: https://pan.baidu.com/s/1hDj0fzoc196qbQYBpaRANA
[20200910112102435.png_pic_center]: /images/20221123/1e841b6dc8a5431cb594c4efbb6fa425.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/00b870699f8c49759da103c6a6d1ef7c.png
[https_pan.baidu.com_s_1xCWKSK7ktSKAonbAfCBLjA]: https://pan.baidu.com/s/1xCWKSK7ktSKAonbAfCBLjA
[https_www.baidufe.com_fehelper_index_index.html]: https://www.baidufe.com/fehelper/index/index.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXBlaWJpbjIwMTI_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/c4aabc2511d04f4bbf689a5df4b9b3a3.png