移动端H5本地调试详解

使用chrome://inspect/#devices，可以使安卓手机里的WebView也能和chrome一样审查元素，调试和测试移动端H5页面

本人使用的是华为apad，电脑是win 7 系统。步骤如下

1、确保手机开启调试模式连接电脑，手机设置里面，开发者模式、USB调试、“仅充电”模式下允许ADB调试均处于开启状态；

2、手机或者apad上打开一个网页，只要是webview形式的网页应该都是可以的；

3、电脑上安装连接手机或者apad的驱动安卓的调试工具包platform-tools下载地址

4、下载完成后配置SDK的环境变量

• 首先在终端中输入 echo $HOME

• 输入touch .bash_profile

• 输入open -e .bash_profile 在打开的编辑框中输入如下文字 export PATH=${PATH}:/Users/用户名/你的sdk路径/platform-tools 如下图

5、电脑上安装连接apad的驱动，cmd命令输入：adb devices 如下图已显示设备信息，即代表手机已成功连接电脑；

6、电脑chrome浏览器地址栏输入：chrome://inspect/#devices 会看到如下图情况

7、找到你准备调试的那个，并且确保apad上的那个页面也是处于激活状态的，然后点击蓝色的 inspect 链接，会弹出一个新的窗口，如下图

注：若出现按inspect后，发现h5页面出不来，一直显示空白。需要翻墙服务