如何用手机连接电脑调试H5页面

教程说明

• 相信刚接触移动端H5开发的都有一个问题，手机上应该如何调试H5，打印相应的log信息，而不是使用alert来调试。
• 虽然我们可以在电脑端通过设置UA来模拟移动端浏览器，但是有时候还是无法满足我们的要求。
• 鉴于此，查询了相关资料之后终于发现谷歌官方的教程说明，特此记录。

设备要求

• 1、PC端安装 Chrome 32 或更高版本。
• 2、一台已安装Chrome的Android手机(Android系统版本4.0及以上)

演示设备

• PC：Win7电脑
• 手机：小米4 Android系统版本6.0

详细步骤：

• 1、使用数据线将手机连接至电脑。

• 2、开启手机开发者选项，打开USB调试(谷歌官方说明：https://developer.android.google.cn/studio/run/oem-usb)

• 3、电脑打开Chrome，登录Chrome账号(远程调试无法在访客模式及隐身模式下运行)

• 4、Chrome开启DevTools(Win:Ctrl+Shift或右键-检查，或者直接F12即可)

• 5、在 DevTools 中，点击 Main Menu (右上角的三个点)主菜单，然后选择 More tools > Remote devices。

  
  
  image

• 6、点击Remote devices之后，选中之后会出现如下界面，左侧会出现已连接手机的机型信息，相应的按钮说明如图所示

  
  
  image

• 7、上述步骤完成之后console中查看到相关的调试信息了

  
  
  image

• 注：手机开启开发者选项之后会出现还是连不上的情况，具体可参考第二步中谷歌官方说明里面驱动的安装；因为自己已安装Android Studio且已连接手机调试，所以很快就连上了，没安装的情况具体操作就需要按说明来了，自己没测试

总结

• 经过以上简单的设置我们就可以在Chrome的控制台查看手机上H5的相关log输出了。