参考

http://www.ruanyifeng.com/blog/2019/06/android-remote-debugging.html

https://ask.dcloud.net.cn/article/69

说明

基于 HTML、JS等 Web 页面的调试

  • 5+APP 代码不需要编译，所以可以基于源码视图调试 Android 应用中页面「页面代码与项目代码一致」
  • uniapp 代码在运行到 Android 应用前会编译，所以无法方便调试

步骤

  1. 真机或模拟器开启「开发者模式」，打开调试开关
  2. HBuilder 或 Android Studio 运行 App 到真机或模拟器中
  3. 打开真机或模拟器，打开 Android 应用中需要调试的页面
  4. 打开Chrome 浏览器，地址栏输入 chrome://inspect
  5. 找到设备-应用-要调试的页面，点击 inspect 打开调试窗口
  6. 调试

注意

点击 “inspect” 时，如果遇到启动了一个白屏界面，说明被墙了。需要连接 google 的服务器

方法一：通过 VPN 连接 Google 服务器

方法二：设置一下 host

1
2
3
4
# 路径： Mac /etc/hosts  | Windows C:\Windows\System32\drivers\etc\hosts
# inspect
127.0.0.1 chrome-devtools-frontend.appspot.com
127.0.0.1 chrometophone.appspot.com

调试

与 Chrome 普通页面调试一样，可以查看控制台输出、Sources 源码中添加断点调试、Network 查看网络加载等