Detailed explanation of using Chrome browser to debug Android App

I have always been fond of Chrome. In addition to being faster, Chrome is more friendly to developers. With built-in powerful Developer Tools, I believe that web development will be addictive! Moreover, the Chrome Store provides a variety of plug-ins. There is nothing you can’t use, only things you can’t imagine. Nowadays, basically everything can be done with Chrome. Sometimes I wonder how convenient it would be if I could use Chrome to debug Android Apps. Now, Facebook has just open sourced a tool called Stetho. From now on, Chrome debugging Android is no longer a dream.

Debugging tools

In addition to some official debugging tools in Android development, there are two tools that I think are essential.

1. Packet capture tool

The best one for windows platform is Fiddle, and the best one for mac is Charles. This should be a must for App development, whether it is Android or iOS.

2.Sqlite View

There are many tools. In addition to the built-in sqlite3 tool, you still need some GUI tools for more convenience. I will not list them one by one. You can do it by yourself. Just search and find the tool you like. There are some browser plug-ins and some clients for various platforms. What you need to know is that if you want to view the sqlite files in the App, you need root.

Stetho

Although the packet capture tool is easy to use, it is troublesome to set up a proxy on the mobile phone every time. It is even more troublesome to have root to view the sqlite file. But with stetho, these tools are all built-in, easy to use, and no root is required. Let’s take a look at the usage introduced by the official demo.

1. First, Gradle depends on it.

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

2. Then configure it in the Application class of your App.

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

Then you can run the App for debugging. Basically, you can The debugging needs are met.

3. Chrome debugging

Open Chrome, enter chrome://inspect and then you can see in the list that your app can be debugged with stetho. Facebook official also provides it A basic sample, the following is the debugging screenshot provided by its sample

Basic function usage

1. Detect network status

2. View the App’s local database and directly execute SQL

View the App’s local SharedPreference file and directly edit it

Note

It is worth noting that if you just configure it simply, you cannot check the network status. There are two ways:

1. Use OkHttp

This is the simplest way. It requires the version of OkHttp to be 2.2.x+. You only need to add the following code. This is also the simplest way at present.

OkHttpClient client = new OkHttpClient();
client.networkInterceptors().add(new StethoInterceptor());

2. Use HttpURLConnection

If The bottom layer of the http library you wrote yourself or other is implemented using HttpURLConnection. You need to use StethoURLConnectionManager for integration. Then the Accept-Encoding: gzip request headers must be declared. For specific usage, see the sample of facebook stetho source code.

You may rely on the following network helpers.

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

or

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

For more detailed articles on using the Chrome browser to debug Android Apps, please pay attention to the PHP Chinese website!