前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >手机上debug调试代码

手机上debug调试代码

作者头像
游魂
发布2021-04-22 10:52:56
1.4K0
发布2021-04-22 10:52:56
举报
文章被收录于专栏:前端开发

有时候为了在手机上调试网页,大都是大费周章,有的使用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 安装:

代码语言:javascript
复制
npm install vconsole

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

代码语言:javascript
复制
<script src="path/to/vconsole.min.js"></script>
<script>
  // 初始化
  var vConsole = new VConsole();
  console.log('Hello world');
</script>

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

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

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

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

代码语言:javascript
复制
<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…

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-3-21 1,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • vConsole
  • 特性
  • 上手
相关产品与服务
云开发 CLI 工具
云开发 CLI 工具(Cloudbase CLI Devtools,CCLID)是云开发官方指定的 CLI 工具,可以帮助开发者快速构建 Serverless 应用。CLI 工具提供能力包括文件储存的管理、云函数的部署、模板项目的创建、HTTP Service、静态网站托管等,您可以专注于编码,无需在平台中切换各类配置。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档