版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/hero82748274/article/details/88376821
在之前的项目当中使用了腾讯的vconsole 工具，尝试运用在项目当中，这使得调试手机应用变得非常好用。经过几个项目使用，已经习惯了这种调试工具。下面是官方的一个介绍。
vconsole 工具 是一个轻量、可拓展、针对手机网页的前端开发者调试面板。
特性
查看 console 日志
查看网络请求
查看页面 element 结构
查看 Cookies、localStorage 和 SessionStorage
手动执行 JS 命令行
自定义插件
由于在页面代码里面要加上调试工具，但是并不想正常的页面加载速度变慢。于是可以
查看了一些资料，js能够实现动态加载脚本。这类似插入一个元素那样，这使得看起来非常简单。于是尝试在浏览器参数里面加上参数使其在调试模式下开启。
1.下载插件
使用之前需要到git 里面下载一份代码，或者使用git clone 的方式将其仓库下载本地。
https://github.com/Tencent/vConsole
2 .尝试编写调试模式实验
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>腾讯工具</title>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
</head>
<body>
<div>
使用腾讯H5 发包调试工具
</div>
<script type="text/javascript">
var debugModel = getUrlParam("debug");
console.log("debugModel:"+debugModel);//开启调试模式
if(debugModel == "debugmodel")
{
loadScript("vconsole.min.js",function(){
var vConsole = new VConsole();
});
}
function getUrlParam(key){
var str = window.location.search || window.location.hash || ""
var str2 = str.substr(1);
var arr = str2.split("&");
var obj = {}
for (var i = 0; i < arr.length; i++) {
var param = arr[i].split("=");
obj[param[0]] = decodeURIComponent(param[1]);
}
return obj[key];
}
function loadScript(path,callback){
var script = document.createElement('script');
script.type="text/javascript";
script.src = path;
script.function(){
callback && callback();
console.log("脚本加载完毕");
}
document.body.appendChild(script);
}
</script>
</body>
</html>
3. 使用起来
执行网页当中的链接，加入一个debug=debugmodel 的方式，代码里面通过解析浏览器参数即可实现加载里面腾讯的vconsole调试工具。
http://127.0.0.1:8020/phptool/jstool/jstool.html?debug=debugmodel
运行结果如下：
这样子就可以实现在手机里面调试h5接口的功能。当然有一台mac机器 或者谷歌也可以实现这样类似调试方式。前提是要有一台机器达到目的。
实现过程，可以为其加入二维码，手机里面就可以通过二维码进行扫码进入对应的链接了。