preface

Chrome’s Developer Tools is almost a magic tool for WEB developers, and the Chrome Store is full of amazing plugins, so it would be nice if Chrome could call up Android apps. Stetho, an open source tool from Facebook, makes debugging Android apps in Chrome a dream. Android debugging, sometimes need to check the database, SharePreference, and so on, and this premise must be root, on the other hand, Andoird network packet capture debugging is very difficult, and all these, Stetho for us to solve easily. In addition to viewing the View tree using the tools in the Android integration environment, you can also do this using Stetho.

Adding dependencies

Throughout the testing process, we needed to use databases, SharePreference, and Http requests. To avoid repeating the wheel, we introduced several third-party libraries. – ActiveAndroid an Android ORM used for database operations – LessCode a library using jquery-style functions – Okhttp Work with stetho to complete the test development environment using android studio. For ActiveAndroid, we need to add the following code

repositories {
    mavenCentral()
    maven { url "https://oss.sonatype.org/content/repositories/snapshots/" }
}
compile 'com. Michaelpardo: activeandroid: 3.1.0 - the SNAPSHOT'Copy the code

LessCode is in

compile 'com. Jayfeng. Lesscode: lesscode - core: 0.1.3'Copy the code

Add the okHTTP dependency

compile 'com. Squareup. Okhttp: okhttp: 2.3.0'Copy the code

Finally, Stetho is added. Since it is compatible with OKHTTP, stetho-okhttp is also added

compile 'com. Facebook. Stetho: stetho: 1.1.0'
compile 'com. Facebook. Stetho: stetho - okhttp: 1.1.0'
Copy the code

Initial Configuration

Add permission to request network because network request is required

<uses-permission android:name="android.permission.INTERNET" />Copy the code

ActiveAndroid need to do some simple configuration to operate the database operation under application nodes to join the following code, main is to configure the database name, version information, such as the cn.edu.zafu.stethodemo.model.Person is an entity class, This class inherits com.activeAndroid. Model to complete database operations

<meta-data
    android:name="AA_DB_NAME"
    android:value="Stetho.db" />
<meta-data
    android:name="AA_DB_VERSION"
    android:value="1" />
<meta-data
    android:name="AA_MODELS"
    android:value="cn.edu.zafu.stethodemo.model.Person" />Copy the code

Create a new App class, inheritance com. Activeandroid. App. Application, rewrite the onCreate method, complete Stetho initialization in it. Build a Builder and configure it, and finally initialize Stetho

Stetho.initialize(
    Stetho.newInitializerBuilder(this)
        .enableDumpapp(
                Stetho.defaultDumperPluginsProvider(this))
        .enableWebKitInspector(
                Stetho.defaultInspectorModulesProvider(this))
        .build());Copy the code

layout

The layout interface is too simple to post code. It is mainly composed of three buttons, one for network request, one for writing data to database, and one for writing data to SharePreference. The final interface is as shown in the figure.

The key code

Database operations using the ActiveAndroid library are particularly simple and can be saved by calling the save method

private void writeToSqlite() {
        Person person = new Person();
        person.setName("Jake");
        person.setAge(19);
        person.save();/ / save

        ToastLess.$(this."save to Sqlite successfully!");
    }Copy the code

The SharePreference operation is written to the LessCode library in a single sentence

 private void writeToSharedPreference() {
        SharedPreferenceLess.$put(getApplicationContext(), "name"."StethoDemo");// Write data
        SharedPreferenceLess.$put(getApplicationContext(), "version"."v1.0.0");// Write data
        ToastLess.$(this."save to SharedPreference successfully!");// Displays a notification prompt
    }Copy the code

The more complex code is in the network request, but OKHTTP has been wrapped up for us to call directly

private void getFromNetwork() {
        OkHttpClient client = new OkHttpClient();
        // The following sentence is very important, in order to intercept HTTP requests.
        client.networkInterceptors().add(new StethoInterceptor());
        // Build the request
        Request request = new Request.Builder()
                .url("http://www.baidu.com")
                .build();
        Response response = null;

        client.newCall(request).enqueue(new Callback() {
            @Override
            public void onFailure(Request request, IOException e) {

            }
            @Override
            public void onResponse(Response response) throws IOException {
                // This method is in the child thread, so it is sent to handlerString body = response.body().string(); Message message = handler.obtainMessage(); message.what=NETWORK; message.obj=body; handler.sendMessage(message); }}); }Copy the code

That’s pretty much it. What’s left is how to debug

Debugging with Chrome

After we run the program, we open Chrome and type in the address barchrome://inspect/And we’ll see an interface that looks like this

We can enter the debugging interface by clicking the blue inspect in the picture. If you open a blank page after clicking the link, congratulations, you have been blocked by GFW and you have to go over the wall. The method of going over the wall is studied by yourself.

After opening the link, we selected Elements and were presented with this interface.

The left of the picture is a View tree of the current interface. When you select a part of the content, the corresponding content on the interface will be highlighted. The network request Button on the right of the picture is masked by a layer of blue, and the middle part is some properties of the currently selected control.

Now switch to the NetWork TAB and click on the first button in the emulator. You will see that the NetWork request appears in this TAB, just like web debugging. You can see the request header information, response information, cookies and so on

Let’s go to the Resources TAB, where we can look at the database, SharedPreference, and so on, and look at the information in the database, which should be empty at first, and when we click on the third button in the simulator, after two clicks, we should have two new records in the database, as shown in the picture

In addition, we can also perform SQL statement operations, as shown in the figure

When we click the second button in the emulator, the SharedPreference information should be added, as shown in the figure

Corresponding to this SharedPreference, in fact, it can be modified by Dumpapp. Here is a screenshot effect, which will be explained later. The median value of SharedPreference is printed in the figure, and it will be printed again after modification

Some of the features above make Stetho so powerful that you don’t need Root, even on a real phone without Root.

Customize the Dumpapp plug-in

Custom plug-ins are the preferred way to extend dumpapp systems and can be easily added in configuration. Its configuration steps look like this:

Stetho.initialize(Stetho.newInitializerBuilder(context)
    .enableDumpapp(new MyDumperPluginsProvider(context))
    .build())

private static class MyDumperPluginsProvider
    implements DumperPluginsProvider {
  public Iterable<DumperPlugin> get() {
    ArrayList<DumperPlugin> plugins = new ArrayList<DumperPlugin>();
    for (DumperPlugin defaultPlugin :
        Stetho.defaultDumperPluginsProvider(mContext).get()) {
      plugins.add(defaultPlugin);
    }
    plugins.add(new MyDumperPlugin());
    returnplugins; }}Copy the code

As for the compilation of MyDumperPlugin, you can refer to the official writing method. The use of MyDumperPlugin is combined with dumpapp tool. Dumpapp in the above just captures a picture, but does not explain how to use it

As you can see from the figure, there are no execution files in Windows. These files should be executed under Linux or MAC, which cannot be executed under Windows. It is extremely simple to use in Linux, just add them to the environment variable and use dumpapp -help to view the instructions. This article is not repeated, interested students can refer to the last two links to explore.

Download the source code

Download.csdn.net/detail/sbsu…

The relevant address

The first is a full introduction to Stetho video on YouTube, and the second is the official website for reference if necessary.