Use of Android Debug Artifact-stetho (Facebook)

Preface

Chrome's developer tools are almost an artifact for web developers, and there are a few plugins in the chrome store that should be a good thing if Chrome can tune an Android app. And Facebook's Open source Tool Stetho let Chrome debug Android apps is no longer a dream. Android in debugging, sometimes need to look at the database, Sharepreference, and so on, and this premise is must root, on the other hand, Andoird network aspects of the grasp of the debugging seems very difficult, and all of this, stetho for our easy to solve. In addition to using the tools in the Android integrated environment to view the view tree, using Stetho can also be done.

Join a dependency package

Throughout the testing process, we needed to use the database, Sharepreference, and HTTP requests, and in order to avoid repeating the wheel, we introduced several third-party libraries.
-Activeandroid an Android ORM for database operation
-Lesscode A tool library that uses jquery style functions throughout the library
-Okhttp an HTTP request library to complete the test with Stetho
Development environment using Android Studio, for Activeandroid, we need to add the following code

repositories {    mavenCentral()    "https://oss.sonatype.org/content/repositories/snapshots/"‘com.michaelpardo:activeandroid:3.1.0-SNAPSHOT‘

and Lesscode joined the

‘com.jayfeng.lesscode:lesscode-core:0.1.3‘

Then join Okhttp's dependency

‘com.squareup.okhttp:okhttp:2.3.0‘

Finally add Stetho, because it is with okhttp, so also to join Stetho-okhttp

‘com.facebook.stetho:stetho:1.1.0‘‘com.facebook.stetho:stetho-okhttp:1.1.0‘

Initialize Configuration

Join Request network permission because network request is required

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

Activeandroid requires a few simple configuration operations to operate the database
Under the Application node, add the following code, mainly the configuration database name, version and other information, Where Cn.edu.zafu.stethodemo.model.Person is an entity class that inherits Com.activeandroid.Model and completes 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" />

Create a new app class, inherit the Com.activeandroid.app.Application, rewrite the OnCreate method, and complete the Stetho initialization work. Build and configure a builder, and finally initialize the Stetho

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

Layout

Layout interface is too simple, no code, mainly three buttons, one for the network request, a write data to the database, a write data to Sharepreference, the final interface.

Key Code

Database operations using the Activeandroid library is particularly straightforward, and calling the Save method saves

privatevoidwriteToSqlite() {        new Person();        person.setName("Jake");        person.setAge(19);        person.save();//保存        ToastLess.$(this"save to Sqlite successfully!");    }

And Sharepreference's operation is written through the Lesscode library, just one sentence

privatevoidwriteToSharedPreference() {        "name""StethoDemo");//写入数据        "version""v1.0.0");//写入数据        ToastLess.$(this"save to SharedPreference successfully!");//显示一个通知提示    }

The code for the complex point is in the network request, but the okhttp has been encapsulated for us, just call it right

Private void getfromnetwork() {Okhttpclient client =NewOkhttpclient ();//The following sentence appears to be particularly important in order to intercept HTTP requests after joining. Client.networkinterceptors (). Add (NewStethointerceptor ());//Build RequestRequest Request =NewRequest.builder (). URL ("Http://www.baidu.com"). build (); Response Response =NULL; Client.newcall (Request). Enqueue (NewCallback () {@Override             Public void onfailure(Request request, IOException e) {            }@Override             Public void Onresponse(Response Response)throwsIOException {//This method is in a child thread, so it is processed by sending to handlerString BODY = Response.body (). String ();                Message message = Handler.obtainmessage ();                Message.what=network;                Message.obj=body;            Handler.sendmessage (message);    }        }); }

The code is almost like this, and the rest is how to debug.

using Chrome Debugging

After we run the program, we open chrome, enter chrome://inspect/in the address bar, and we'll see an interface like this

We click on the image of the blue inspect to enter the debugging interface, if you click on the link after you open a blank page, then congratulate you, you have been GFW interception, you have to carry out the wall, the way to the wall, I use the VPN.

After we open the link, we select elements, which is presented in front of the interface.

The left side of the picture is a view tree of the current interface, and when you select a portion of the content, the corresponding content on the interface is highlighted, the Network request button on the right is shaded by a blue layer, and the middle part is some of the properties of the currently selected control.

Now that we switch to the Network tab and click the first button in the emulator, you will notice that the network request appears in this tab, just like Web debugging. Inside can see request header information, response information, cookies, etc.

We switch to the Resources tab, where we can view the database, sharedpreference, etc., first look at the information in the database, the first should be empty information, when we click on the third button in the simulator, click two times, the database should be added two records ，

In addition, we can also perform SQL statement operations,

When we click the Second button in the simulator, the sharedpreference information should be added, as shown in the figure

Corresponding to this sharedpreference, in fact, can be modified by Dumpapp, here first put an effect, after the explanation, the figure printed in the Sharedpreference value, modified to print again

As seen from some of the above features, Stetho is so powerful, and all this without the need for a phone root, even on a real machine without root, this information is unobstructed.

Custom Dumpapp Plugins

Custom plugins are the preferred way to extend the Dumpapp system and can be easily added in the configuration. The configuration steps are this:

Stetho.initialize (Stetho.newinitializerbuilder (context). Enabledumpapp (NewMydumperpluginsprovider (context)). Build ())Private Static  class mydumperpluginsproviderimplements dumperpluginsprovider {       PublicIterable<dumperplugin>Get() {Arraylist<dumperplugin> plugins =NewArraylist<dumperplugin> (); for(Dumperplugin DefaultPlugin:Stetho.defaultDumperPluginsProvider (mcontext). Get ())    {Plugins.add (defaultplugin); } plugins.add (NewMydumperplugin ());returnPlugins }}

As for the Mydumperplugin writing, you can refer to the official wording, the use of plug-ins with the Dumpapp tool, and the above Dumpapp just cut a picture, but did not explain how to use, in fact, the plug-in is located in the official project scripts directory, the file in the directory

See, there is no executable files under Windows, these files should be executed under Linux or under the Mac, Windows can not execute, under the Linux use is extremely simple, just add it to the environment variable, using dumpapp–help command to view the use of instructions, this article is not repeat, interested students can refer to the last two links to explore this article.

Source Download

http://download.csdn.net/detail/sbsujjbcy/8652377

Related Address

The first one is a comprehensive video of Stetho on YouTube, the second is the official website, which you can refer to.

• Commissioning with Stetho (bring your own ladder)
• Stetho official website

Use of Android Debug Artifact-stetho (Facebook)