有时候为了想在手机真机上对网页进行 Debug，可手机上没有 F12，用 Chrome DevTools 连接手机操作又太过复杂。VConsole 的出现，正好解决了这一痛点！7 w Y2 y% k6 |2 q3 o7 T
vConsole 介绍：# C' I" Y( _ p+ D1 }! h9 M
vConsole 是腾讯推出的一个轻量、可拓展、针对手机网页的前端开发者调试面板。
6 I" H7 |" n" B& ~7 y在线体验 官方网站
, v) ?. |6 F' k2 g0 W- [; f$ x5 g' _3 P, r' y |
功能：+ L z* ]) U# x9 W- k6 r
查看 console 日志" k8 }/ z( B' P- U' V' Y+ J5 v0 p0 }
查看网络请求
0 j1 f m+ h; ]* x* _3 F% ]查看页面 element 结构
1 {4 j; c6 k* z, S. \4 o查看 Cookies、localStorage 和 SessionStorage
3 N l$ j& Z. I( a4 N8 {& h8 i手动执行 JS 命令行: P. Q& d' }- s$ t1 X
自定义插件
" S5 j0 i1 H* b/ \- J; }9 A& n
# X7 a; _! p: V& F m使用方法：+ Q& P( p4 x# ]+ a
从 GitHub 上下载最新版本，然后按下列方式在你的网页中引入：% u( z$ m$ C0 x8 @% s
<script src="vconsole.min.js"></script>
<script>
new VConsole();
</script>
然后你就可以在页面的右下角看到一个绿色的 vConsole，点开它就能使用了，整体界面和 Chrome 的控制台类似，非常方便！
7 R/ u6 b( u/ P; u不过，这样引入的话无论是在电脑上还是手机上，无论是站长和访客都能看到这个按钮。有点不太友好……为此，我们可以采用下面的方法：
) x: j: A% n% J8 \9 R2 I<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>
1 g4 t) ^8 g- G8 ]: x
这样，正常访问网站时不会加载这个工具，仅当在网址后面加上 ?vconsole=true时才会载入,按需开启，非常好用！
# _) A: M% L. O, G2 V同类工具：$ L4 Z& h9 o. F4 i- c
除了 vConsole 外，还一个开源项目 Eruda，功能与之类似（貌似还强大一些？），这里就不过多介绍了。 感兴趣的可以自行去 Eruda 的 GitHub 上研究吧~传送门：https://github.com/liriliri/eruda
. Q4 e9 J3 ^- |, s5 E& X
: M: p) H; s7 e. _7 v2 `+ ~3 Y4 Y, @8 V. j6 A! y( R6 M! D
| 
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2019-3-11 17:10:11