移动端开发 - 基于Android+windows的真机调试

准备工作

  • 谷歌浏览器更新到最新版本
  • 移动设备(手机)和电脑处在同一局域网
  • 关掉电脑的防火墙
  • 你可能需要科学上网一下。。(访问谷歌服务)

动手实践

  1. 电脑运行你的应用并使用本机ip访问,例如:

http://192.168.1.106:8080

  1. 用数据线连接你的移动设备,并选择连接方式为 MIDI


    连接方式
  2. 移动设备打开开发者模式

设置 > 关于手机 > 狂点版本号 > 输入设备锁屏密码 > 显示成功

  1. 移动设备打开 USB 调试

设置 > 系统和更新 > 开发人员选项 > 调试 > 打开 USB 调试开关 > 确定允许

  1. 移动设备打开通过第一步的url打开应用(可以通过微信直接打开)
  2. 电脑打开 chrome 并访问 chrome://inspect,如下图
    获取的移动设备
  3. 点击 inspect 就可以愉快的在电脑调试你的 h5 页面了
    点击inspect

    记得开启 devTools 的移动端模拟器
    效果图

可能遇到的坑

  • chrome 浏览器不是最新的,就可能出现连接设备后提示
Pending authentication: please accept debugging session on the device
  • 连接方式选择了仅充电:那根本不可能连接上
  • 正常操作连接之后 chrome 也没有显示连接,那可能是你的手机浏览器不行,试着去下载一个手机端的 chrome 或者用微信直接打开吧

你可能感兴趣的:(移动端开发 - 基于Android+windows的真机调试)