Tags
3D, android, canvas, css, custom-ui, DDMS, droid, droid inspector, eclipse, flexbox, html, inspector, mozilla, optimization, optimize, overdraw, performance, plugin, tool, web, webgl
The concept of Overdraw has been given so much importance in the Android world. During the Google I/O, few talks emphasized on the importance of reducing overdraw. Yet there is not a single tool that can help us identify the overdraw easily. We at Mozilla worked on a new interface for about:home for the past few months. That would mean all my work for reducing overdraw on the previous version of about:home to be left unused going further. A tool that is as simple as taking a screenshot can reduce the engineering effort in such cases.
The standard Android tools like UiAutomatorViewer and HierarchyViewer are good. However, they show the same UI in a flat mode. It requires some sort of photographic memory to map different views in the hierarchy to see if something would cause overdraw. Is there a better way that is easier and faster to identify overdraw issues?
Introducing Droid Inspector! Taking cues from Firebug and Web Inspector, I’ve been working on this tool for the past few months. This tool shows a 3D view of the app by capturing the bitmap of individual Views, unlike UiAutomatorViewer. This helps visualize the app easily. Also, the background and the content layers — on a TextView, text is the content, while on an ImageView, image is the content — are shown separately. Remember Romain Guy’s example app causing overdraw issues because the background was not cleared once the image got loaded? Tracking such issues are so much easier. Additionally Droid Inspector shows a box model to make apps pixel perfect. By switching between 3D and 2D modes one can see the perspective view of the app and its overdraw with a single click. Click on individual properties to see it in the hierarchy and vice versa. Additionally one can show/hide either background or content to see how it reflects the overdraw. Droid Inspector is available in two flavors: as an Eclipse plugin that integrates with DDMS, and a web based plugin. Give it a spin and let me know how much it helps.
Sriram Ramasubramanian 
Seems awesome. Any chance of getting this on Android Studio?
Thanks. It depends on how many people actually want to use it. There is a web alternative that is independent of Eclipse / Android Studio.
Android Studio is becoming the default and officially supported by Google, it would be great to have such tool integrated with this IDE. I don’t like web tools for this sort of thing. But it was just a suggestion 😉
I would love to have this tool for Android Studio. Most of the code will remain the same. There are 2 issues:
1. Eclipse provides an option to install LWJGL as a plugin, and this plugin on top of it. Therefore, I don’t have to make separate binaries for Mac, Windows, Linux. Now that would change with IntelliJ.
2. There is no source code available for Android Studio yet, to find the extension points to integrate my plugin (so that it’s available as a part of DDMS). Once that is released, I can give that a try.
The HTML option is because, (1) I work for Mozilla 😉 (2) Systrace does something similar, as this takes away the “OpenGL” requirement problem.
I have followed the instructions on the website but why Eclipse shows “An internal error occurred during:”Droid Inspector”. Invalid thread access”? My Environment is Win7 32bit,Eclipse Juno and the latest ADT.Thanks if there are any helps.
Unfortunately I don’t have a windows machine to try this for you. If I could find one, I’ll surely help you with what’s going on wrong there. Thanks for your interest.
same things here : An internal error occurred during: “Droid Inspector”.
Invalid thread access
Same problem here. Environment: Windows 7 64bit, Eclipse Juno, Andoird SDK version 22.2.1 and lwjgl version 2.9.0 . @Sriram Do you have any news on this ?
An internal error occurred during: “Droid Inspector”.
Invalid thread access
This happened to me when the app was not under focus. I’ll check it over the weekend to see the real cause. Thanks for reporting.
Hi.
At runtime, I got java.lang.NoClassDefFoundError: com.sriramramani.droid.inspector.server.ViewServer
I didn’t do that :”Remember to export it as well” because I don’t know how to export it in eclipse.
Can you help me ?
Never mind. I found how to export it (java build path AND “Order and Export” )
From http://www.sriramramani.com/droidinspector : you said to start adb forward
adb forward tcp:5555 tcp:5555
But When I run the client (java -jar droidinspectorclient.jar) he display this :
Y U NO ADB FORWARD?
—————————————-
Please enable adb forwarding. Usually:
adb forward tcp:5000 tcp:4939
I tried with 4939 with the same warning result
When I start the generate droid-inspector.html, I see the web user interface, but no layout.
same things here :
On windows 7, Eclipse , DDMS :
An internal error occurred during: “Droid Inspector”.
Invalid thread access
Same issue here… Using genymotion
Same error with me :
An internal error occurred during: “Droid Inspector”.
Invalid thread access
It’s highly likely that you haven’t enabled INTERNET permission for your app. I ran into that once, and adding the permission solved it.
Couple of issues that might cause invalid thread acces are here:
1. App should be debuggable
2. Image returned from the device is way too big — especially on tablets
3. Genymotion runs on port 5555 — I will work on a fix to change this port.
4. This might not work with hardware acceleration, I will fix it.
Pushed a bunch of changes to DroidInspector’s command line utility. This should help debug problems if the file is not generated properly. (http://sriramramani.com/droidinspector/downloads)
not able to access the link http://sriramramani.com/droidinspector/downloads, shows as “This website is temporarily unavailable, please try again later.”