移动端 html 调试工具

[choukin]

移动端 html 调试工具

1. debuggap

   vide 是一款用 vue 和 vuex 开发的 ide 有一个调试 webview 的插件

   1. 安装 VIDE
   2. 打开 VIDE 并安装调试 webview 插件 vide-plugin-debug-webview
   3. 获取 debugap.js
   4. 在要调试的页面中引入debuggap.js
   5. 打开安装的调试 webview 工具
   6. 在页面点击出现的调试按钮，输入 server ip 和端口
   7. 在编辑器中就可以看是远程调试了

• 优点

  • 可以在移动页面就可以看到 dom 结构
  • 可以查看报错信息

• 缺点

  • 不能调试 js
  • 样式查看支持的不好

  VIDE 参考

2. weinre

   网页远程审查（web inspector Remote） 可以在 PC 上 调试运行在移动端的页面

• 安装

    sudo npm install -g weinre

• 启动

    weinre --boundHost 10.204.2.59 --httpPort 9090

  boundHost 后面接自己的 ip 地址 httpPort 是接口
  访问 http://10.204.2.59:9090 即可启动客户端调试 如下图

  
  - Access Points 中 debug client user interface: | http://10.204.2.59:9090/client/#anonymous 是客户端调试链接，点击进去可以看到目标调试对象列表，选择自己要调试的网页开始调试即可
  - Target Script 是需要放在目标网页上的 js 链接

• 优点

  • 可以看到 dom
  • 可以查看报错信息

• 缺点

  • 不能调试 js
  • 样式查看支持的不好

weinre 参考

3. Vconsole 腾讯出品

   一个轻量、可拓展、针对手机网页的前端开发者调试面板。

   • 缺点
     • 不能查看页面dom结构

4. spy-debugger

   内部集成了weinre、node-mitmproxy、AnyProxy