有时候为了想在手机真机上对网页进行 Debug，可手机上没有 F12，用 Chrome DevTools 连接手机操作又太过复杂。VConsole 的出现，正好解决了这一痛点！
: y& v8 \+ x1 V! Z$ Z0 s$ dvConsole 介绍：
2 _& \% G% G; F& n6 }6 IvConsole 是腾讯推出的一个轻量、可拓展、针对手机网页的前端开发者调试面板。" J. }0 h5 F" G7 [# J6 E& L0 z
在线体验 官方网站8 p8 a1 G2 s! a c- M. b
1 N/ X( \7 ~. o9 ]0 ]
功能：
4 @2 H1 U* A2 A查看 console 日志9 ?8 y2 e/ s' j a2 }
查看网络请求
V, \* [1 n" o& W查看页面 element 结构
+ ^2 L+ W. V1 A' S D查看 Cookies、localStorage 和 SessionStorage
2 V4 w; Z+ _5 j/ w2 o& @手动执行 JS 命令行) |9 T$ _. l3 \' w
自定义插件6 E9 h! a! \( s- ] J( A
8 f# Z& T7 x0 C2 B* r使用方法：! N8 K3 w4 Z% y! N& p
从 GitHub 上下载最新版本，然后按下列方式在你的网页中引入：
% `& i' @0 ~+ R0 a( g0 n; Z4 m<script src="vconsole.min.js"></script>
<script>
new VConsole();
</script>
然后你就可以在页面的右下角看到一个绿色的 vConsole，点开它就能使用了，整体界面和 Chrome 的控制台类似，非常方便！! q, I1 K. z& }+ @. k6 J
不过，这样引入的话无论是在电脑上还是手机上，无论是站长和访客都能看到这个按钮。有点不太友好……为此，我们可以采用下面的方法：
+ C/ H, }& m0 b* L, o0 I' W" h<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>
/ K/ Q( f* ~+ i7 V& {这样，正常访问网站时不会加载这个工具，仅当在网址后面加上 ?vconsole=true时才会载入,按需开启，非常好用！$ c/ a" d4 y7 Z/ b/ U
同类工具：3 l4 m) J2 U$ I* H
除了 vConsole 外，还一个开源项目 Eruda，功能与之类似（貌似还强大一些？），这里就不过多介绍了。 感兴趣的可以自行去 Eruda 的 GitHub 上研究吧~传送门：https://github.com/liriliri/eruda
6 E3 W0 t/ U- O& l; r: f, [/ [) D6 \' \, H! j" K& E
v2 Q8 K8 |0 o O+ @7 d3 W | 
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2019-3-11 17:10:11