移动端Web开发调试之Chrome远程调试(Remote Debugging)

第一步：首先在移动设备上开启USB调试模式。方法：

● Android 3.2+，打开设置 – 应用程序 – 开发，在“USB调试”处打钩选上

● Android 4.0~ Android 4.1 ，打开设置-开发者选项-进入在“USB调试”处打钩选上。

● Android 4.2+，打开设置-关于手机-手机配置信息-连点“版本号”7次，返回上层就可以看到“开发者选项”显示出来了，在“USB调试”处打钩选上。

第二步：用USB数据线连接设备，驱动装好连接成功后，你可能会在设备上看到一个弹框请求允许使用这台计算机通过usb调试

第三步：在电脑上打开Chrome浏览器的菜单– 更多工具 – 检查设备（Chromemenu > More tools > Inspect Devices），或者直接在浏览器地址栏输入chrome://inspect 或者about:inspect

 

如果USB连接成功，这时候我们可以看到移动设备的型号和设备上运行的页面和允许调试的WebView列表。找到需要调试的目标页面，点击inspect即可打开DevTools，点击reload可重新加载当前的调试页面，点击focus tab可将标签页置顶，close为关闭当前页面。更可以通过在输入框中键入网址新开一个页面。

 

点击inspect打开DevTools后，你可以选中页面中的DOM元素，同时设备中对应元素也高亮显示，也可使用DevTools中的Inspect Element 选中目标元素，可以实时与移动设备页面交互，方便的定位问题所在，进行代码调试。

 

在输入框中输入一个新的网址，点击Opoen可打开你想要调试的新页面。

pc和手机页面务必在chorme打开，别去别的浏览器瞎整。

如果你点击inspect打开的DevTools窗口一片空白，且刷新无效时，那极有可能是由于被墙的缘故。确认没被墙的情况下，在C:\Windows\System32\drivers\etc\hosts 下添加

61.91.161.217 chrome-devtools-frontend.appspot.com
61.91.161.217 chrometophone.appspot.com