移动开发:使用桌面chrome调试安卓设备上的chrome和cordova app(webview)

本文介绍了如何调试运行在安卓设备上Chrome浏览器和基于Cordova的应用程序,特别是针对Webview的调试。通过设置Android应用程序的debuggable属性为true,并启用WebContentsDebuggingEnabled,开发者可以更有效地进行调试。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >



调试安卓设备上的chrome浏览器或Cordova应用:



要求:
1、一台安装有chrome for android或cordova app的安卓设备(如果你是调试Cordova app或webview,就不用装chrome了)
2、安卓设备的usb数据线
3、安装有chrome的电脑(需要安装有安卓设备的usb驱动)

步骤:
1、安卓设备打开USB调试

2、将安卓设备用USB数据线连接至电脑

3、电脑上,点击Chrome 菜单 > 工具 > 检查设备,如下图:

确保"Discover USB devices"打上勾,如下图

Chrome 45+ 没有了“检查设备”调试手机的功能,其实有秘密通道,地址栏输入chrome://inspect/#devices 回车,就可以了 


4、只要安卓设备上打开chrome(或者cordova app),就可以在电脑的chrome上看到连接的设备和打开的页面了,找到你要调试的页面,点击"inspect",就可以了,如下图

使用上和电脑端chrome开发者工具没什么不同。支持js断点调试哦
注意:第一次使用时候,开发者工具会显示一片白,解决办法是需要翻墙一次(国内,你懂的)

调试Android webview:


注意只有Android 4.4 (KitKat)及以上的webview才支持远程chrome调试。或者使用了CrossWalk内核插件的apk才可以用chrome调试。

1、如果是Cordova/Phonegap 3.X的,找到这个文件
C:\Users\{用户名}\.cordova\lib\android\cordova\{版本如3.4.0}\framework\src\org\apache\cordova\CordovaWebView.java
661行 修改:
[java]  view plain   copy
  1. @SuppressLint("NewApi")  
  2.  private void loadConfigur
<think>好的,我现在需要帮助用户了解如何使用Chrome调试应用程序。根据用户的问题,他们可能想知道在移动设备或桌面应用上如何使用Chrome进行调试。我需要结合提供的引用资料,整理出一个清晰的步骤指南。 首先,用户提到的引用资料中有几个关键点: 1. 使用Chromechrome://inspect页面来连接移动设备上的应用,比如SAP UI5 Cordova应用或Android应用[^1][^2][^4]。 2. 在VS Code中配置Debugger for Chrome扩展,设置launch.json的webRoot路径来调试Web应用[^3]。 3. 对于Electron应用,使用--inspect参数启动应用并通过Chrome连接[^5]。 接下来,我需要将这些信息结构化,分步骤说明不同场景下的调试方法。例如,移动调试、Web应用调试Electron应用调试可能有不同的步骤。需要明确每一步的操作,比如启用USB调试、访问特定的Chrome页面、安装扩展等。 同时,要确保遵循用户给出的系统级指令,比如正确使用LaTeX格式,虽然这个问题可能不涉及数学公式,但需要注意其他格式要求,如代码块的使用引用标识的添加。 还需要验证每个步骤的正确性,确保引用资料中的方法准确无误。例如,chrome://inspect的正确性,或者Electron应用的启动命令是否正确。 最后,生成相关问题时要考虑用户可能进一步想知道的内容,比如性能分析、优化方法或常见问题解决,但根据引用内容,可能集中在调试技巧、配置问题或其他工具集成上。</think>以下是使用 Chrome 调试应用程序的分步指南: ### 一、移动端应用调试Android/Cordova) 1. **开启手机开发者模式** 在手机设置中连续点击「版本号」激活开发者选项,启用「USB调试」功能[^4]。 2. **连接设备** 通过USB线连接手机电脑,在电脑端Chrome地址栏输入: ```url chrome://inspect/#devices ``` 此时会检测到已连接的设备[^1][^4]。 3. **调试应用程序** - 对于Cordova混合应用:确保应用已启用WebView调试 - 在Chrome的`inspect`页面点击对应应用下方的「inspect」按钮,即可启动DevTools ### 二、Web应用调试(VS Code + Chrome) 1. **安装调试插件** 在VS Code扩展商店安装「Debugger for Chrome」[^3] 2. **配置launch.json** ```json { "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Chrome调试", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}/src" // 重要:设置项目根目录 } ] } ``` 3. **启动调试会话** 按F5启动调试Chrome会自动打开并进入断点调试模式[^3] ### 三、Electron应用调试 1. **以调试模式启动应用** 在终端执行: ```bash electron . --inspect=5858 ``` 这将开启5858调试端口 2. **Chrome连接调试器** 访问: ```url chrome://inspect ``` 点击「Configure」添加`localhost:5858`,随后在「Remote Target」中即可调试
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值