使用Chrome远程调试Android移动端WebView中的JS
16lz
2021-01-25
1. 前言
移动端网页开发,最头疼的就是调试了,谷歌Chrome支持远程连接Android设备,调试WebView中打开的页面。2. 准备工作
Android开发环境(adb工具) 一个Android设备,在PC安装好驱动(如果需要),开启调试模式,开启调试模式的方法这里就不累赘了,使用USB链接到电脑 PC端安装Chrome浏览器 PC端有可以正常使用的VPN(据你的网络环境而定是否需要,这个大家都懂的)3. 远程调试的配置和使用
3.1. 打开远程设备界面
3.1.1. 第一种方法:在菜单中打开
PC中打开Chrome浏览器,在“菜单->更多工具->开发者工具”,或使用快捷键“Ctrl+Shift+I/F12"打开开发者界面,在调试面板中,点击右侧菜单按钮,在下拉菜单中“More tools->Remote devices”,打开远程设备界面,如下图所示:连接接上远程设备,可以看到设备信息和调试加载的页面,如下图所示:
3.1.2. 第二种方法:在地址栏直接输入地址打开
如果觉得上面的步骤太麻烦,有更简单的,在Chrome地址栏输入“chrome://inspect/#devices”,直接打开打开远程调试设备界面,这种方式打开的远程调试设备界面跟上面的不太一样,但是大致结构都差不多,有设备的名称,页面所在应用的包名等等信息,如下图: 3.2. 调试远程设备页面
在远程设备界面中点击“inspect”进行跟踪调试,打开跟中调试界面,如下图所示:接下来,就可以尽情的调试测试了。
4. 常见问题及处理
4.1. 无法看到设备(无法连接设备)
如果在准备工作无误的情况下,仍旧无法看到你的Android设备,请检查你PC的adb端口。查看adb的端口,使用adb start-server命令,可以看到端口,如果已经启动adb服务,先调用adb kill-server关闭服务。获取到adb的端口后,添加到配置中。
如果是用上面一种方法打开远程设备界面的方式,在Settings里面的Port forwarding中,点击Add rule添加端口。
如果是用第二种方式(直接在地址栏输入地址)打开远程设备界面的,启用Discover USB devices,点击“Port forwarding...”按钮打开窗口添加端口,如下图所示:
4.2 无法看到调试的应用
在项目中,在Android4.4以后,需要WebView下设置,支持远程调试。否则无法看到调试应用的相关页面,无法进行调试。if(android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.KITKAT) { WebView.setWebContentsDebuggingEnabled(true);}
4.3 点击“inspect”出现白屏无法加载成功 此时你需要连接上VPN再打开。
更多相关文章
- Nginx系列教程(二)| 一文带你读懂Nginx的正向与反向代理
- 调用手机的摄像头,并且返回照片显示在程序界面上.
- Android(安卓)蓝牙学习笔记(一)
- Android(安卓)记录一次 代码重启设备的爬坑记录
- android中自定义ListView界面
- Android中adb端口被占用的有效解决方案
- androidmanifest.xml的一些高级属性
- 如何在android设备上insmod自己单独编译的.ko,解决签名问题
- 懒骨头的Android文档备份3:一个简单的交互界面