移动端开发时,我们常使用chrome自带的模拟器,模拟各种手机设备。 但模拟毕竟是模拟,当开发完毕,使用真机访问页面出现问题时如何调试呢?
下面介绍2种针对android机的调试方法
一.直接使用Chrome浏览器:
1.在浏览器中输入待调试的site,F12打开调试窗口;
2.根据需要选择不同类型设备进行调试;
二.使用手机真机调试:
1. 在pc和android手机上都安装最新版本的chrome;
2. 使用usb将手机的PC相连接;
3. 手机中打开“设置”->"开发人员选项"->"USB调试"
4. 打开pc侧chrome, 在地址栏中输入chrome://inspect/#devices 选中discover usb devices。可以看到我们的手机设备,如下图所示:
5.在手机侧chrome中访问页面. 比如:https://test.lifeccp.com/m/ 同步的,我们会在pc侧的chrome上看到到手机侧访问的页面,如下图所示
6. 点击上图中的inspect, 熟悉的调试界面出现!
在调试窗口中选择 More tools --> Inpect devices...
在下面页面打开 Inspect:
注意图中右上角的手机图标,点击后,PC和手机的显示内容相同。手机打开的页面被直接拉到pc上显示了。调试更加事半功倍!
想了解更多信息,可以参考Chrome官方帮助:https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3
相关推荐
1.前端开发离不开Chrome的开发者工具,尤其是调试Android WebView时。...3.本包内自带Chrome浏览器、离线调试包,用法解压包后文档中会有详细说明亲测保证可用,离线webview调试工具,开发H5混合应用必备。
安卓调试调试webview(类似Chrome://inspect的功能)国内404,大家都懂的,经过我各种折腾制作完成,不会出现空白页面,无需科学那啥,不限机型,Hybrid App等H5混合应用开发必备
解决chrome下device:inspect出现空白页,替换文件就可以了
解决chrome devTools WebView Inspect调试空白页问题.......................................
32位和64位,版本号7.2.0.0
微信、手Q、Qzone之x5内核inspect调试解决方案
调试webview(类似Chrome://inspect的功能)国内404,大家都懂的,经过我各种折腾制作完成,不会出现空白页面,无需科学那啥,不限机型,Hybrid App等H5混合应用开发必备,
谷歌调试移动端工具chrome-inspect离线开发者工具包@194530_@196351.rar
调试基于WebView的App最舒服的工具Chrome自带的开发者工具,其中有我们熟悉的Dom树调试,JS调试,Network监视等等功能。 Google提供的调试Android上WebView的步骤: 1.开启手机上的USB调试功能并且连接计算机手机端...
inspect-process:使用chrome-devtools用于Node.js简单调试的工具
node-inspect npm install --global node-inspect 对于旧的V8调试器协议,节点具有两个选项: node --debug <file> :启用了远程调试的启动file 。 node debug <file> :为启动交互式CLI调试器。 但是对于...
新版微软inspect.exe,inspect32.exe,32位和64位下载 从windows8 开发者工具箱中拿出来的,很实用
google浏览器inspect离线调试工具
Windows程序控件检测工具,包含insepct,spy++,py_inspect-master三个,是进行自动化测试必备的检测攻击
inspect
inspect32也是一个窗体信息查看的,它可以查看菜单,查看无句柄窗体
Inspect 自动化测试辅助工具Inspect 自动化测试辅助工具Inspect 自动化测试辅助工具
Inspect 自动化测试辅助工具
用于Windows自动化测试 python语言 该inspect工具是一款类似于selenium中的找寻元素工具firebug