QQ登录

只需要一步,快速开始

APP扫码登录

只需要一步,快速开始

查看: 3093|回复: 0

[HTML/CSS/JS] vConsole 让你在手机上也能轻松调试网页

[复制链接]

等级头衔

积分成就    金币 : 2861
   泡泡 : 1516
   精华 : 6
   在线时间 : 1322 小时
   最后登录 : 2025-11-29

丰功伟绩

优秀达人突出贡献荣誉管理论坛元老活跃会员

联系方式
发表于 2019-3-11 17:10:11 | 显示全部楼层 |阅读模式
有时候为了想在手机真机上对网页进行 Debug,可手机上没有 F12,用 Chrome DevTools 连接手机操作又太过复杂。VConsole 的出现,正好解决了这一痛点!' C! X0 g& @1 H: M4 h
vConsole 介绍:
/ B7 o1 Z  g! L& E0 D# P; OvConsole 是腾讯推出的一个轻量、可拓展、针对手机网页的前端开发者调试面板。
$ V' a7 q$ r9 h+ L8 a在线体验        官方网站
  E" T. G& x8 {% C, a# L' c' ?. F
8 h1 h3 u3 y4 H0 u功能:
$ B. q( S; t% A0 E' U  o% ^查看 console 日志
8 z. H3 ?. J2 _6 _, _查看网络请求7 g& T( l# j* {: N0 I# ^& y
查看页面 element 结构* m8 |4 l# \0 _" }# b2 U
查看 Cookies、localStorage 和 SessionStorage- C7 V: x, S0 y8 J. Y
手动执行 JS 命令行& U- M$ T' |% v4 f# h) M" x. {
自定义插件" @6 {' F1 J( e. Y1 q

5 n' G4 O) b5 e0 E/ S0 Y使用方法:& O* O, b( h4 R5 R0 t
从 GitHub 上下载最新版本,然后按下列方式在你的网页中引入:
6 o, \' B7 T( C# _1 A2 _3 Y
<script src="vconsole.min.js"></script>
<script>
    new VConsole();
</script>
然后你就可以在页面的右下角看到一个绿色的 vConsole,点开它就能使用了,整体界面和 Chrome 的控制台类似,非常方便!
! ]9 C; k/ g: Q; L8 S不过,这样引入的话无论是在电脑上还是手机上,无论是站长和访客都能看到这个按钮。有点不太友好……为此,我们可以采用下面的方法:
  ?* P! b3 G: n
<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>

. c: F, a( U2 |这样,正常访问网站时不会加载这个工具,仅当在网址后面加上 ?vconsole=true时才会载入,按需开启,非常好用!
2 k+ x1 x+ C# f" a同类工具:  I3 W5 Y# F7 l7 K  G3 r7 f
除了 vConsole 外,还一个开源项目 Eruda,功能与之类似(貌似还强大一些?),这里就不过多介绍了。 感兴趣的可以自行去 Eruda 的 GitHub 上研究吧~传送门:https://github.com/liriliri/eruda
0 P( Y3 h& g9 ?: b
% O; w: g3 `! G& u
3 O) L& r) `" q/ m
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|paopaomj.COM ( 渝ICP备18007172号|渝公网安备50010502503914号 )

GMT+8, 2026-1-8 20:07

Powered by paopaomj X3.5 © 2016-2025 sitemap

快速回复 返回顶部 返回列表