使用方式:chorme的devToolsApp

手机:华为荣耀magic2

浏览器:chrome Version 79.0.3945.88 (Official Build) (32-bit)

电脑:win10

1、首先打开手机的开发者模式,若没打开的话,点击设置->关于手机->版本号(然后连续点击版本号,直到出现以下界面)使用chrome调试安卓手机h5页面(无需其他额外工具)_手机端

2、手机端打开开发者选项

使用chrome调试安卓手机h5页面(无需其他额外工具)_android_02

3、打开USB调试

使用chrome调试安卓手机h5页面(无需其他额外工具)_html5_03

使用chrome调试安卓手机h5页面(无需其他额外工具)_html5_04

4、打开hdb选项(不知道是不是华为手机专有)

使用chrome调试安卓手机h5页面(无需其他额外工具)_手机端_05

允许Hisuite通过HDB连接设备

使用chrome调试安卓手机h5页面(无需其他额外工具)_javascript_06

5、接着usb连接手机和电脑,会弹出让你确认的选项(选择文件传输)

使用chrome调试安卓手机h5页面(无需其他额外工具)_android_07

(当然,如果你第一次用手机连电脑的话,电脑端会让你下个驱动插件,那么你的界面就是下面这样的)

i、选择Open folder to view files(打开文件夹)

使用chrome调试安卓手机h5页面(无需其他额外工具)_手机端_08

ii、双击安装向导一直next到完成就好了(.exe文件)。测试使用的是华为手机,其他手机也会有对应的向导下载,具体可以参考对应手机的官网,或者直接下载XX手机助手之类的

使用chrome调试安卓手机h5页面(无需其他额外工具)_手机端_09

iii、向导装完后应该是这样的使用chrome调试安卓手机h5页面(无需其他额外工具)_javascript_10

接着手机USB重新连接一下电脑

5、会出现以下界面

使用chrome调试安卓手机h5页面(无需其他额外工具)_html5_11

6、打开手机的手机助手(华为)

使用chrome调试安卓手机h5页面(无需其他额外工具)_web app_12

6、在电脑端输入验证码使用chrome调试安卓手机h5页面(无需其他额外工具)_手机端_13

如果显示下图则证明是成功连上了使用chrome调试安卓手机h5页面(无需其他额外工具)_web app_14

8、接下来打开chrome的devToolsApp(Chrome://inspect),将Discover USB devices勾上,Remote Target会显示对应的设备,对应的,若有网页在手机端显示的话设备的下面会出现相应的链接。接下来我们测试一下.

i、使用chrome调试安卓手机h5页面(无需其他额外工具)_手机端_15

ii、手机端在chrome浏览器里打开​​javascript:void(0)​​可以发现,对应的设备下面已经出现了对应的链接。点击inspect就会进入调试页面

使用chrome调试安卓手机h5页面(无需其他额外工具)_android_16

iii、出现调试页面可以进行正常的调试了

使用chrome调试安卓手机h5页面(无需其他额外工具)_html5_17

常见问题:

1、手机连接电脑时候可能不会马上弹出验证码的框,需要等待一下

2、虽然是在电脑端debug手机的页面,但是网络请求是以手机端的为主,也就是说电脑的网络和手机的网络不一定是一致,比如电脑是内网环境。手机是移动网络。那么就有可能在电脑端可以打开的网站,在手机端就打不开。那么在inspect页面也是打不开的。

3、如果inspect页面出现404 not found的话可能你的电脑需要用到ssr技术墙一下。