使用Chrome来调试你的Android App

本文探讨了如何利用Chrome浏览器和Stetho工具方便地调试Android应用,介绍了配置方法、基本功能及注意事项。重点阐述了如何在无需root权限的情况下,通过Stetho实现网络状态检测、数据库查看、SharedPreferences管理等调试需求。

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


个人一直对Chrome情有独钟,Chrome除了更快之外,对开发者的支持更友好。内置强大的Developer Tools,相信Web开发简直爱不释手!

个人一直对Chrome情有独钟,Chrome除了更快之外,对开发者的支持更友好。内置强大的Developer Tools,相信Web开发简直爱不释手!而且Chrome Store里提供各种各样的插件,没有你用不到,只有你想不到。现在任何事基本Chrome全部办的到,有时候就在想,如果可以用Chrome调试Android App该多方便,而如今Facebook刚刚开源了一个工具Stetho,从此Chrome调试Android不再是梦。

调试工具

在Android开发中除了一些官方自带的一些调试工具外,还有两个工具我认为是必备的。

  • 抓包工具

windows平台最好用的应该是Fiddle, mac上最好用的应该是Charles。这个应该是App开发必备,不管是Android还是iOS。

  • Sqlite查看

这个工具就多了,除了自带的sqlite3工具之外,还是需要一些GUI方面的工具更方便,就不一一列举了,大家自行搜索找到自己喜欢的工具就行了,有一些浏览器插件,也有一些各个平台的客户端。需要知道的是如果想查看App内的sqlite文件需要root。

Stetho

抓包工具虽然好用,但是每次都要在手机设置代理,也挺麻烦的,查看sqlite文件必须要root这点更麻烦。但是有了stetho,这些工具全部自带了,使用方便,无须root,下面就来看下官方demo介绍的使用用法。

  • 首先Gradle进行依赖

dependencies {   compile 'com.facebook.stetho:stetho:1.0.1' }
  • 然后在你的App的Application类里进行配置

public class MyApplication extends Application {   public void onCreate() {     super.onCreate();     Stetho.initialize(       Stetho.newInitializerBuilder(this)         .enableDumpapp(             Stetho.defaultDumperPluginsProvider(this))         .enableWebKitInspector(             Stetho.defaultInspectorModulesProvider(this))         .build());   } }

然后就可以运行App进行调试,基本上可以满足调试需求了。

  • Chrome调试

打开Chrome,输入chrome://inspect然后就可以在列表里看到有你的app可以用stetho进行调试的app,facebook官方也提供了一个基本的sample,以下是它的sample提供的调试截图


基本功能使用
  • 检测网络状态


  • 查看App本地数据库并且可以直接执行SQL


  • 查看App本地的SharedPreference文件并可以直接编辑


注意事项

值得注意的是如果你只是简单的进行配置下,检测网络状态的是没法查看,有两种方式:

  • 使用OkHttp

这是最简单的一种方式,要求OkHttp的版本在2.2.x+,只需要添加如下代码, 这也是目前最简单的方法

OkHttpClient client = new OkHttpClient(); client.networkInterceptors().add(new StethoInterceptor());
  • 使用HttpURLConnection

如果你使用的自己写的或者其他http library底层是用HttpURLConnection实现的,你需要使用StethoURLConnectionManager来进行集成。然后必须声明Accept-Encoding: gzip的请求headers。具体用法见facebook stetho源码的sample。

其中你可能会依赖如下network helpers.

dependencies {   compile 'com.facebook.stetho:stetho-okhttp:1.0.1' }

或者

dependencies {   compile 'com.facebook.stetho:stetho-urlconnection:1.0.1' }


<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、付费专栏及课程。

余额充值