1.vConsole
网址：https://www.npmjs.com/package/vconsole
详细使用教程：https://github.com/Tencent/vConsole/blob/dev/doc/tutorial_CN.md
1-1 使用npm方式：
例如在vue中使用
首先安装vconsole
npm install vconsole --save
然后在main.js中引入并实例化vConsole对象
import VConsole from "vconsole";
process.env.NODE_ENV === "development"?(new VConsole()):'';
在页面在中会有绿底白字的按钮，点击可展开调试面板
默认面板如上图，可以查看网络、元素、存储等面板，也可以在下方command输入框中输入执行js代码。在实例化VConsole时可以传入配置信息，选择要显示面板
1-2 使用script标签引入
首先在github中将js文件下载下来
下载地址：https://github.com/Tencent/vConsole/releases/tag/v3.3.4
然后使用script引入即可
<script src="path/to/vconsole.min.js"></script>
<script>
var vConsole = new VConsole();
</script>
2.Eruda
网址：https://github.com/liriliri/eruda
使用：
2-1 npm方式下载
npm install eruda --save
<script src="node_modules/eruda/eruda.min.js"></script>
<script>eruda.init();</script>
2-2 cdn方式引入
eruda.init();<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>
页面下方会有灰底白色图标的按钮，点击按钮展开面板，会发现这个插件所展现的比前一种方法更丰富，模拟实现了很多真实浏览器的面板功能，同样在实例化对象的时候也可配置面板。
3.Fiddler 和 Charles
Fiddler网址：https://www.telerik.com/fiddler
Charles网址：https://www.charlesproxy.com/
这是两个抓包工具，也可以用在移动端调试，尤其是在开发app和小程序的时候，主要用于拦截和查看网络请求和接收到的数据，也可以拦截https协议请求。但是这只是这两个软件很小的一部分功能，其他的如拦截修改数据、模拟接口返回json数据等等，如果想体验其他强大的功能可以在网上找一些相关文章尝试一下。
没有必要比较两个软件的孰优孰劣，两款软件都很优秀，功能相似，都有各自的爱好者。可以两个软件都尝试一下，适合自己的才是最好的。个人常用Fiddler 以及其官网提供的证书，可以帮助拦截查看https协议的请求，另一个应该也可以但是我没尝试。
以上是我经常在工作中使用的方法，如果有谬误望和其他更好的方式不吝赐教，谢谢。
网友评论