有时候为了想在手机真机上对网页进行 Debug，可手机上没有 F12，用 Chrome DevTools 连接手机操作又太过复杂。VConsole 的出现，正好解决了这一痛点！+ g3 O2 c1 Q4 F+ [& o
vConsole 介绍：5 e/ P" Y; V& [3 q$ c
vConsole 是腾讯推出的一个轻量、可拓展、针对手机网页的前端开发者调试面板。
5 i. {$ L, M' p; y: ^" d4 J3 l: \在线体验 官方网站
5 L& L% f1 {+ o2 H5 v. X+ f& w! `8 \- r" ^- C$ \
功能：! `, K" m6 Z9 s
查看 console 日志
$ U$ |% v6 d! g& t查看网络请求9 w" R4 K+ w6 |
查看页面 element 结构
) [8 V2 F, [8 h6 e/ b }查看 Cookies、localStorage 和 SessionStorage
8 s# n3 w& T6 A; [5 r手动执行 JS 命令行
: g$ t( y& s6 d自定义插件% S+ _9 ] y. l
9 n% ~ W( ^' O. t9 k( b7 C% b1 j使用方法：- Q) \! u% f. }) j- M) h
从 GitHub 上下载最新版本，然后按下列方式在你的网页中引入：
1 k3 x( r- P. w5 a1 ~6 F. m* g<script src="vconsole.min.js"></script>
<script>
new VConsole();
</script>
然后你就可以在页面的右下角看到一个绿色的 vConsole，点开它就能使用了，整体界面和 Chrome 的控制台类似，非常方便！
* U9 ]! D7 {1 b j* u不过，这样引入的话无论是在电脑上还是手机上，无论是站长和访客都能看到这个按钮。有点不太友好……为此，我们可以采用下面的方法：" y$ u1 z* t Z9 A
<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>
; t4 S! _+ r( l
这样，正常访问网站时不会加载这个工具，仅当在网址后面加上 ?vconsole=true时才会载入,按需开启，非常好用！
, b4 V. N; p/ }9 _同类工具：
8 ^. E% i0 m! @除了 vConsole 外，还一个开源项目 Eruda，功能与之类似（貌似还强大一些？），这里就不过多介绍了。 感兴趣的可以自行去 Eruda 的 GitHub 上研究吧~传送门：https://github.com/liriliri/eruda! F C7 C" |8 Y, U! c- D
& @% D! H& c% P5 S; C
; ]2 H- T" H8 V( p9 E | 
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2019-3-11 17:10:11