有时候为了想在手机真机上对网页进行 Debug,可手机上没有 F12,用 Chrome DevTools 连接手机操作又太过复杂。VConsole 的出现,正好解决了这一痛点!+ u3 f5 c' @2 |2 [) Q/ _& X
vConsole 介绍:1 K8 s' V, I1 r, X
vConsole 是腾讯推出的一个轻量、可拓展、针对手机网页的前端开发者调试面板。
9 L( Z. ]/ h6 j6 K! C1 b7 ]在线体验 官方网站/ O$ c6 Y$ S& X- D- B! h5 e
$ P( @! J0 N9 Q! w2 y
功能:3 P: F. q6 m: t: M
查看 console 日志( M3 d; y( R& f1 [
查看网络请求/ ] R- F2 \" }4 S# _- Q
查看页面 element 结构" y( t' h" M4 M% R% T! U" V
查看 Cookies、localStorage 和 SessionStorage4 o) D3 ^7 j5 a6 r+ o
手动执行 JS 命令行
5 W" ?( t) [* T! R1 d3 T$ K自定义插件
& S4 M' Z# i4 k# f! l3 f
0 x9 x& G- ]) `& ?/ v7 }* A0 W: z使用方法:
5 s: z1 C9 g( R/ \, I0 S% X, `从 GitHub 上下载最新版本,然后按下列方式在你的网页中引入:
5 {& Y( T/ @- e) c
- <script src="vconsole.min.js"></script>
- <script>
- new VConsole();
- </script>
然后你就可以在页面的右下角看到一个绿色的 vConsole,点开它就能使用了,整体界面和 Chrome 的控制台类似,非常方便! 9 y' e7 N# E# G+ H- W. }" t
不过,这样引入的话无论是在电脑上还是手机上,无论是站长和访客都能看到这个按钮。有点不太友好……为此,我们可以采用下面的方法:
2 j1 f# F% B. q9 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>
W6 O6 x w$ P, c0 u! C' T这样,正常访问网站时不会加载这个工具,仅当在网址后面加上 ?vconsole=true时才会载入,按需开启,非常好用! ) S% E" k+ _4 O% [- C# h! Q4 ~
同类工具:( V% [" c, n$ @; T6 y' y ^% I
除了 vConsole 外,还一个开源项目 Eruda,功能与之类似(貌似还强大一些?),这里就不过多介绍了。 感兴趣的可以自行去 Eruda 的 GitHub 上研究吧~传送门:https://github.com/liriliri/eruda
; v0 o: L+ N0 y3 a. M) Q9 w+ d3 B0 l; m' [4 o
! ]& o, u, e: |0 ]! I& x |