facebook / stetho Goto Github PK

If the layout XML looks like this:

<Button android:id="@+id/apod_btn" ...

Then we should show it similarly in the elements tab, e.g.

<button id="@+id/apod_btn" ...

View.toString() already does this, so adapting from that should be straightforward.

Console tab can be implemented using bsh (or maybe somethign more modern?). Because bsh is large and optional, prefer a solution that treats it as a provided dep with a helpful console message if it is not included.

Concerning bugs have been detected lately related to Chrome 40's handling of the devtools JS. This should be investigated with the upstream maintainers to ensure that the protocol is not being rev'd improperly and in a way that may leave us out in the cold in future updates.

In particular:

1. Chrome 40's initial release broke handling of the old @161987 and @177902 versions of the WebKit Inspector UI. The Resources tab had numerous rendering bugs, blocking access to WebSQL for us.
2. After upgrading to @188492, many bugs were detected on slow or unreliable networks. Requests would randomly disappear from the Network tab and the culprit was found to be a previously optional type field is now required in Network.requestWillBeSent and a new undocumented Network.loadingFailed paramater (also type) was added and made mandatory as well. Failure to send these fields causes the UI refresh to raise JavaScript errors.

Once Stetho is made public, we should engage upstream about these issues to understand what's happening.

Cause okhttp will support websocket fully in the future, ex. this
https://github.com/square/okhttp/blob/master/samples/guide/src/main/java/com/squareup/okhttp/recipes/WebSocketEcho.java

If I add stetho to inspect this, app will crash.
Chrome dev tool could monitor websocket activity, does stetho support it as well?

Thanks.

"stetho﹕ Could not bind to socket" message without any other details.
Please extend this message with additional information what protocol and port was used for binding.

I use StethoInterceptor in OkHttp 2.2.0
ex. http://www.google.com/blabla/blabla, this link could show in CDT.
But if link change to http://www.google.com:8080/blabla/blabla, this links couldn't show in CDT.
Should I encode this link into some format?

There isn't a webkit inspector any longer.

The Chrome DevTools live inside Blink and Blink was forked from WebKit two years ago. They are now extremely different.

It'll be very useful if Fragments can show up in the elements tree. They should be emitted as the parent of their View.

Hi Guys,

Here is another issue. When I'm trying to execute

./dumpapp prefs print

I see:

Multiple stetho-enabled processes available:
    com.mypackage
    com.mypackage
Use -p <process> to select one

It just display 2 equals packages, so when I try to specify package with -p com.mypackage it doesn't work.

What I did is open adb shell, and executed:

shell@klte:/ $ ps | grep com.mypackage
u0_a216   10774 259   965576 54048 ffffffff 00000000 S com.mypackage

So, I'm not really sure what's wrong.

P.S. com.mypackage is just replacement for my real package :)

Please let me know if you will need more details from me.
I really want to use this project, it should save so lot's of time :)

Support a convenient way to strip stetho from release builds without relying on proguard. This will likely involve producing a simple stetho-stub artifact that contains stubbed out versions of Stetho.initialize and NetworkEventReporterImpl, allowing production code to unconditionally use these classes but that are backed by no-op versions which have almost no code overhead.

I followed steps described on https://code.facebook.com/posts/393927910787513/stetho-a-new-debugging-platform-for-android/, Chrome devTool finds my device https://yadi.sk/i/7xcnNPdfesFqq but inspection does not show any data https://yadi.sk/i/0Bc5pxBresFuE, https://yadi.sk/i/ifa_vnOEesFwL

There's a spot for the app icon to appear next to the process / app name in the chrome://inspect UI. We should extract this from the manifest and display it.

After including stetho, I run android app and chrome devTools.
chrome://inspect

I can see devices list like under...

Galaxy S4 - 4.3 - API 18 - 1080x1920
#192.168.56.101:5555

But I can't see package list.

Do i need any install package in chrome?

I use the volley +okhttp. Implement Android Volley with OkHttp 2.2 using OkUrlFactory .
but from the https://github.com/square/okhttp/wiki/Interceptors ,at last ,it'said

Availability

OkHttp's interceptors require OkHttp 2.2 or better. Unfortunately, interceptors do not work with OkUrlFactory, or the libraries that build on it, including Retrofit ≤ 1.8 and Picasso ≤ 2.4.

public class OkHttpStack extends HurlStack {
   private final OkUrlFactory okUrlFactory;
   public OkHttpStack() {
       this(new OkUrlFactory(new OkHttpClient())); 
   }
   public OkHttpStack(OkUrlFactory okUrlFactory) {
       if (okUrlFactory == null) {
           throw new NullPointerException("Client must not be null.");
       }
       this.okUrlFactory = okUrlFactory;
   }
   @Override
   protected HttpURLConnection createConnection(URL url) throws IOException {
       return okUrlFactory.open(url);
   }
}

we want to make Networker.java much simpler

I use vollley as my backend-communicator. It is complete controlled by Google, how to use stetho without editing source-code of volley?

How exactly, I'm not sure yet :)

i included stetho and stetho okhttp via gradle and calling

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

inside my Application class, however after opening chrome and clicking inspect on the corrsponding item, i get a new window with

Not implemented: Profiler.setSamplingInterval

in the console

when initialize stetho with my app, i always get this error:

java.lang.VerifyError: com/facebook/stetho/dumpapp/Dumper
at com.facebook.stetho.Stetho$Initializer.getRegistry(Stetho.java:142)
at com.facebook.stetho.server.LocalSocketHttpServer.createService(LocalSocketHttpServer.java:232)
at com.facebook.stetho.server.LocalSocketHttpServer.listenOnAddress(LocalSocketHttpServer.java:158)
at com.facebook.stetho.server.LocalSocketHttpServer.run(LocalSocketHttpServer.java:134)
at com.facebook.stetho.Stetho$1.run(Stetho.java:80)

the initialization code i'm using:
Stetho.initialize(
Stetho.newInitializerBuilder(this)
.enableDumpapp(Stetho.defaultDumperPluginsProvider(this))
.enableWebKitInspector(Stetho.defaultInspectorModulesProvider(this))
.build());

is there something i'm missing with the setting/build? i looked at the dumper code, not sure what could be causing this.

Hello, I was trying to inspect my network request while downloading a huge (150+) set of images for a grid in the app I work for. After scrolling fast enough Stetho threw an OOM.

I'm using Picasso to download the image and intercepting the network requests with StethoInterceptor:

// standard Dagger module
    @Provides @Singleton OkHttpClient provideOkHttpClient() {
        return new OkHttpClient();
    }

    @Provides @Singleton Picasso providePicasso(@ForApplication Context context, OkHttpClient client) {
        return new Picasso.Builder(context).downloader(new OkHttpDownloader(client)).build();
    }


// overridden module for debug

    @Module(overrides = true, addsTo = AndroidModule.class, injects = PauseDebugApplication.class)
    static class DebugModule {
        @Provides @Singleton OkHttpClient provideDebugClient() {
            OkHttpClient client = new OkHttpClient();
            client.networkInterceptors().add(new StethoInterceptor());
            return client;
        }
    }

Here is the stacktrace:

03-11 12:49:48.675    4685-4906/fm.pause.debug E/AndroidRuntime﹕ FATAL EXCEPTION: StethoWorker30
    Process: fm.pause.debug, PID: 4685
    java.lang.OutOfMemoryError
            at java.lang.String.<init>(String.java:255)
            at java.lang.String.<init>(String.java:213)
            at java.io.ByteArrayOutputStream.toString(ByteArrayOutputStream.java:175)
            at com.facebook.stetho.inspector.network.ResponseBodyFileManager.readContentsAsUTF8(ResponseBodyFileManager.java:62)
            at com.facebook.stetho.inspector.network.ResponseBodyFileManager.readFile(ResponseBodyFileManager.java:52)
            at com.facebook.stetho.inspector.protocol.module.Network.readResponseBody(Network.java:69)
            at com.facebook.stetho.inspector.protocol.module.Network.getResponseBody(Network.java:54)
            at java.lang.reflect.Method.invokeNative(Native Method)
            at java.lang.reflect.Method.invoke(Method.java:515)
            at com.facebook.stetho.inspector.MethodDispatcher$MethodDispatchHelper.invoke(MethodDispatcher.java:89)
            at com.facebook.stetho.inspector.MethodDispatcher.dispatch(MethodDispatcher.java:60)
            at com.facebook.stetho.inspector.ChromeDevtoolsServer.handleRemoteRequest(ChromeDevtoolsServer.java:122)
            at com.facebook.stetho.inspector.ChromeDevtoolsServer.handleRemoteMessage(ChromeDevtoolsServer.java:104)
            at com.facebook.stetho.inspector.ChromeDevtoolsServer.onMessage(ChromeDevtoolsServer.java:80)
            at com.facebook.stetho.websocket.WebSocketSession$1.handleTextFrame(WebSocketSession.java:169)
            at com.facebook.stetho.websocket.WebSocketSession$1.onCompleteFrame(WebSocketSession.java:129)
            at com.facebook.stetho.websocket.ReadHandler.readLoop(ReadHandler.java:39)
            at com.facebook.stetho.websocket.WebSocketSession.handle(WebSocketSession.java:38)
            at com.facebook.stetho.websocket.WebSocketHandler.doUpgrade(WebSocketHandler.java:147)
            at com.facebook.stetho.websocket.WebSocketHandler.handleSecured(WebSocketHandler.java:99)
            at com.facebook.stetho.server.SecureHttpRequestHandler.handle(SecureHttpRequestHandler.java:45)
            at org.apache.http.protocol.HttpService.doService(HttpService.java:243)
            at org.apache.http.protocol.HttpService.handleRequest(HttpService.java:187)
            at com.facebook.stetho.server.LocalSocketHttpServer$WorkerThread.run(LocalSocketHttpServer.java:255)

I would really like to contribute so if you guys know where to point me at I'd be more than happy to issue a PR :)

Application is currently emitted as the root DOM document node, but the root document node doesn't show up in the elements tab. It's useful to have the Application at the root so we can at least see the class name in order to aid code navigation.

Some response header doesn't have any "Content-Type", is that the root cause?

In onChildRemoved, we try to get the nodeId for an element that isn't mapped. We end up with a null Integer and then blindly try to store it into Node's nodeId field (an int), and immediately NPE.

This happened several times, but the stack trace has long since scrolled off into oblivion and I can't repro it anymore. For now I've got a fix that logs a warning and skips sending the DOM.childNodeRemoved event over the wire.

The DumperPlugins are great, but it would be even better to embed them into the DevTools.
One solution could be to create a new tab (like this extension does) , and list there all the enable plugins. Whenever the user click on one of them, it pulls the data and display it.

This may be possible using a private API that powers DDMS' lame Allocation Tracking UI: https://android.googlesource.com/platform/libcore/+/android-5.1.0_r1/dalvik/src/main/java/org/apache/harmony/dalvik/ddmc/DdmVmInternal.java

This API has been stable for a very long time AFAICT (I looked all the way back to Ice Cream Sandwich). I believe it will continue to be stable as well.

The format of the getRecentAllocations method is defined by ddmlib: https://android.googlesource.com/platform/tools/base/+/android-5.1.0_r1/ddmlib/src/main/java/com/android/ddmlib/AllocationsParser.java

The major issue to overcome is the seemingly incomplete heapsnapshot file format that Chrome uses. In particular, there's limited UI and file format support for allocation stack traces and the format exported/imported by DevTools appears to even lose the limited information that does currently exist. Upstream discussion started at: https://code.google.com/p/chromium/issues/detail?id=277984#c34

Currently there's no feedback when doing update or delete queries.

It would be great to have some to know that it worked as even the query vanish from the interface.

Maybe use the current error system

delete from albums where tt = false;
no such column: tt (code 1): , while compiling: delete from albums where tt = false;

With the error line containing : Success : Last id = XX or affected rows = YY

Or return a dummy cursor with only 2 columns last id , affected rows and 1 line with data.

Would be nice if Stetho was built for Firefox the only open source browser out there or bake it into a Firefox Addon

SharedPreferences could be inspected via the Local Storage area in the Chrome developer tools.

Is there an example or some functionality to do with redirecting logging to the chrome console instead of to logcat or wherever?

If not, lets get something like this implemented?

How can I use Stetho while using Volley as a networking library?

Upon starting an app, stetho fails to setup a server here:

https://github.com/facebook/stetho/blob/69a9ec51b93dc7eed122900ca5bbb823e6aa4ab9/stetho/src/main/java/com/facebook/stetho/server/LocalSocketHttpServer.java#L287

Not sure what I am doing wrong and whether there is anything particular needed to be configured on my test device (Nexus 5/6)?

I use Android Studio 1.1.0 (stable),and my os is Mac OS X 10.10.

If i only enable default configuration i can build success,but i enable network inspection i always build fail.

I use Retrofit to request network data,and below is my code to enable network inspection.

        OkHttpClient client = new OkHttpClient();
        client.networkInterceptors().add(new StethoInterceptor());
        RestAdapter.Builder builder = new RestAdapter.Builder().setEndpoint(Api.BASE_URL)
                .setLogLevel(RestAdapter.LogLevel.FULL)
                .setRequestInterceptor(new RequestInterceptor() {
                    @Override
                    public void intercept(RequestFacade request) {
                        request.addQueryParam("hd", Api.hd);
                        request.addQueryParam("appver", Api.appver);
                        request.addQueryParam("platform", Api.platform);
                        request.addQueryParam("channel", Api.channel);

                        if (AccountManager.hasLogin()) {
                            request.addQueryParam("p", AccountManager.ticket);
                        }
                    }
                }).setConverter(new GsonConverter(gson)).setClient(new OkClient(client));

My build.gradle:
compile 'com.facebook.stetho:stetho:1.0.1'
compile 'com.facebook.stetho:stetho-okhttp:1.0.1'

Error:Execution failed for task ':my-project-name:dexDebug'.

com.android.ide.common.process.ProcessException: org.gradle.process.internal.ExecException: Process 'command '/Library/Java/JavaVirtualMachines/jdk1.7.0_71.jdk/Contents/Home/bin/java'' finished with non-zero exit value 2

Hi guys,

does the plugin need a rooted phone to let the database viewer open the .db file?

Thanks

Hi guys, I was just trying stetho and love the Database inspection. One thing, i'm not seing any files on Network Inspection. I'm guessing because I dont use OkHttp.

For images i'm actually using a lazy loader library. Should I implement the StethoURLConnectionManager over this library, right? https://github.com/Urucas/Android-Universal-Image-Loader

Right now, Stetho appears to only work if the build's debuggable flag is enabled. I've been searching, and there doesn't seem to be any way to force enable this like you can with, say, WebView.setWebContentsDebuggingEnabled() (which ignores that flag).

Our use case: We serve internal betas to the rest of the company that are release builds, and distribute via private alpha channel on Google Play. Google Play doesn't allow the upload of debuggable builds, but we would like our server guys to be able to leverage Stetho for their own work without needing to build a debug build themselves.

Please let me know if I've missed anything or if this functionality is already there!

There are times when the list of network calls gets replaced by a new set of calls (not 100% sure what causes that, so maybe that's the bug), but checking the "Preserve Logs" checkbox doesn't prevent those items from being removed, as it should.

Implement Elements tab to support DOM / view hierarchy inspection

I initialized Stetho using the following code in my applications onCreate:

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

and then having the syncservice for a SyncAdapter running in a seperate thread by declaring the service in my AndroidManifest.xml

<service android:name=".service.SyncService"
  android:exported="true"
  android:process=":sync">

  <intent-filter>
    <action android:name="android.content.SyncAdapter"/>
  </intent-filter>
  <meta-data android:name="android.content.SyncAdapter"
      android:resource="@xml/syncadapter" />
</service>

causes the following exception

W/System.err﹕ java.io.IOException: Address already in use
W/System.err﹕ at android.net.LocalSocketImpl.bindLocal(Native Method)
W/System.err﹕ at android.net.LocalSocketImpl.bind(LocalSocketImpl.java:309)
W/System.err﹕ at android.net.LocalServerSocket.<init>(LocalServerSocket.java:52)
W/System.err﹕ at com.facebook.stetho.server.LocalSocketHttpServer.bindToSocket(LocalSocketHttpServer.java:278)
W/System.err﹕ at com.facebook.stetho.server.LocalSocketHttpServer.listenOnAddress(LocalSocketHttpServer.java:138)
W/System.err﹕ at com.facebook.stetho.server.LocalSocketHttpServer.run(LocalSocketHttpServer.java:134)
W/System.err﹕ at com.facebook.stetho.Stetho$1.run(Stetho.java:80)

I clicked the inspect link for stetho-sample on Chrome DevTools page and it opened up an empty window. How to troubleshoot this issue?

If you are using OkHttp + Volley, you are likely using OkUrlFactory via a class like the one below. Unfortunately OkHttp's network interceptors do not support the OkUrlFactory.
https://github.com/square/okhttp/wiki/Interceptors#availability

import com.android.volley.toolbox.HurlStack;
import com.squareup.okhttp.OkHttpClient;
import com.squareup.okhttp.OkUrlFactory;

import java.io.IOException;
import java.net.HttpURLConnection;
import java.net.URL;

/**
 * An {@link com.android.volley.toolbox.HttpStack HttpStack} implementation which
 * uses OkHttp as its transport.
 */
public class OkHttpStack extends HurlStack {
    private final OkUrlFactory mFactory;

    public OkHttpStack() {
        this(new OkHttpClient());
    }

    public OkHttpStack(OkHttpClient client) {
        if (client == null) {
            throw new NullPointerException("Client must not be null.");
        }
        mFactory = new OkUrlFactory(client);
    }

    @Override protected HttpURLConnection createConnection(URL url) throws IOException {
        return mFactory.open(url);
    }
}

Any ideas on an OkHttp UrlConnection friendly way of integrating Stetho?

I believe there's something we need to declare in gradle.properties and/or elsewhere. So let's figure that out.

When using Stetho to inspect database it seems it tries to change the journal mode of the database.

My app force writeAhead and keep a connection to the db the whole time so this generate logcat errors :

03-10 20:00:38.057    6477-7353/xxx E/SQLiteLog﹕ (5) statement aborts at 2: [PRAGMA journal_mode=PERSIST]
03-10 20:00:38.057    6477-7353/xxx W/SQLiteConnection﹕ Could not change the database journal mode of '/data/data/xxx/databases/xxx.db' from 'wal' to 'PERSIST' because the database is locked.  This usually means that there are other open connections to the database which prevents the database from enabling or disabling write-ahead logging mode.  Proceeding without changing the journal mode.
03-10 20:00:39.088    6477-7353/xxx E/SQLiteLog﹕ (5) statement aborts at 2: [PRAGMA journal_mode=PERSIST]
03-10 20:00:39.088    6477-7353/xxx W/SQLiteConnection﹕ Could not change the database journal mode of '/data/data/xxx/databases/xxx.db' from 'wal' to 'PERSIST' because the database is locked.  This usually means that there are other open connections to the database which prevents the database from enabling or disabling write-ahead logging mode.  Proceeding without changing the journal mode.

Is there a reason for that ? What are the impacts of the changes failing ?
And if you are just trying to activate writeAhead as the error suggest maybe just check before if it's not the case ?

Multiple processes from the same app currently show up with no distinguishing information in the chrome://inspect UI.

Likewise, the process name should be shown in the welcome console message not the package name.

backup c#

Hi,

Thanks for this librarie that opens new perspectives.
I can make the sample application work perfectly but can't make my main application.

I can inspect the application, but instead of seeing the

 Welcome to Stetho
          Attached to com.facebook.stetho.sample

I see in red

Not implemented: Profiler.setSamplingInterval

And nothing available in the resources tab.

On the application logcat I have the exact same things as the sample application :

D/ChromeDevtoolsServer﹕ onOpen

Then

D/ChromeDevtoolsServer﹕ Method not implemented: Not implemented: Page.canEmulate 

and some others.

Then finally the

D/ChromeDevtoolsServer﹕ onClose: reason=1011 EOF while reading 

when I close the inspect window.

No error or nothing so hard to understand the problem.

Hoping there's a way to do this - after a JSON Mapping issue (in my case, using GSON w/ Retrofit), the app force-closes, and immediately the inspection window closes with it. I cannot, therefore, see what the response was, and see what unexpected JSON came back. It would be a huge win to have that ability!

Hi Guys,

First of all, thanks for your job, great project!
I'm trying to setup Stetho, but I don't see any network calls in Network tab.

Here is my OkHttpClient initialization:

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

Then I create RestAdapter with this client

return new RestAdapter.Builder()
                .setEndpoint(endpoint)
                .setClient(new OkClient(okHttpClient))
                ...

I use 2.2.0:

compile 'com.squareup.okhttp:okhttp:2.2.0'

This is in my Application class:

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

If I open console I see "Powered by Stetho", but I don't see any network calls.
But Retrofit display full logs fine.

What I'm doing wrong? :)
Thanks.

When I included this jar in my project, okhttp would crash when used with what looked like a proguard related issue.

I get the following error

Caused by: java.lang.NoSuchFieldError: No static field METHODS of type Ljava/util/Set; in class Lcom/squareup/okhttp/internal/http/HttpMethod; or its superclasses (declaration of 'com.squareup.okhttp.internal.http.HttpMethod' appears in /data/app/shiftgig.com.worknow-2/base.apk

i've tried whitelisting that file in proguard to no avail.

Would not be more handy to have dumpapp script more user friendly for running Stetho on multiple devices simultaneously ?

Currently the Android serial is retrieved as a system variable. Can the script be altered to take Android serial as a parameter with fallback to system variable ?

I would send a pull request if you consider this as useful.