手机上debug调试代码

有时候为了在手机上调试网页，大都是大费周章，有的使用Chrome DevTools远程链接手机调试，有的使用专门的工具或者浏览器调试，现在腾讯开源了一个vConsole的工具，就解决了这一个痛点！

vConsole

一个轻量、可拓展、针对手机网页的前端开发者调试面板。 在线体验（UI就是微信开发者工具的UI） 官方网站

特性

1. 查看 console 日志
2. 查看网络请求
3. 查看页面 element 结构
4. 查看 Cookies、localStorage 和 SessionStorage
5. 手动执行 JS 命令行
6. 自定义插件

上手

下载 vConsole 的最新版本。（不要直接下载 dev 分支下的 dist/vconsole.min.js）

或者使用 npm 安装：

npm install vconsole

引入 dist/vconsole.min.js 到项目中：

<script src="path/to/vconsole.min.js"></script>
<script>
  // 初始化
  var vConsole = new VConsole();
  console.log('Hello world');
</script>

详细使用方法请参阅使用教程。

然后你就可以在页面上看到一个绿色的vConsole里面调试和谷歌的控制台基本类似。

但是这样使用除了开发者，用户也能看到这个按钮，所以咱们可以稍微设置个参数。

例如：增加个query参数，vconsole=true 作为开启调试的开关。当然你也可以自己设置自己想要的参数。

<script>
if ((location.href || '').indexOf('vconsole=true') > -1) {
    document.write('<script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"><\/script>');
    document.write('<script>new VConsole()<\/script>');
}
</script>

现在访问你的web页面后面加上一个?vconsole=true就开启了隐藏的调试功能啦！很方便有木有。

好，我又水了一篇文章，另外本文参考自孟坤大佬的文章 end…