page.title=Traceview Walkthrough
meta.tags="android, performance, profiling, tools, compute, traceview"
page.tags="android", "performance", "profiling", "tools", "compute", "traceview"
page.metaDescription=Log method execution over time and inspect execution data, per-thread timelines, and call stacks to track down performance issues in your source code.
page.image=tools/performance/thumbnails/tools_traceview.png
page.article=true
@jd:body
<style>
.no-bullet {
list-style-type: none;
}
.padded {
padding-left: 10px;
}
</style>
<div id="tb" style="margin-left: 7px; margin-bottom: 5px;">
<h2>In this document</h2>
<ul>
<li><a href="#WhatYouNeed">Prerequisites</a></li>
<li><a href="#WorkingWithTraceview">Working with Traceview</a></li>
</ul>
<h2>You should also read</h2>
<ul>
<li><a href="{@docRoot}tools/performance/heap-viewer/index.html">
Heap Viewer Walkthrough</a></li>
<li><a href="{@docRoot}tools/performance/systrace/index.html">
Systrace Walkthrough</a></li>
</ul>
</div>
<p>This walkthrough shows the basic usage and workflow for the Traceview tool. Traceview logs
method execution over time and shows execution data, per-thread timelines, and call stacks.</p>
<p>What it's good for:</p>
<ul>
<li>Tracking down performance problems in your source code.</li>
</ul>
<h2 id="WhatYouNeed">Prerequisites</h2>
<ul>
<li>A mobile device with <a href=
"http://developer.android.com/tools/device.html#developer-device-options">Developer Options</a>
enabled.</li>
<li>Application code. Use your own code, or the <a href=
"https://github.com/udacity/Sunshine-Version-2">Sunshine</a> sample app from the <a href=
"https://www.udacity.com/course/ud853">Android Fundamentals Udacity course</a>.</li>
</ul>
<h2 id="WorkingWithTraceview">Working with Traceview</h2>
<ul class="no-bullet">
<!-- this also hides bullet, by default outside box -->
<li><div style="overflow:hidden">
<ol class="padded">
<div class="figure" style="">
<img src="{@docRoot}images/tools/performance/traceview/gettingstarted_image001.png"
alt=""
width="400px" />
<p class="img-caption">
<strong>Figure 1. </strong>Steps for starting Android Device Monitor.
</p>
</div>
<li>Connect your mobile device to your computer.</li>
<li>Open your application in Android Studio, build the source, and run it on your device.</li>
<li>Start the Android Device Monitor from Android Studio: <b>Tools -> Android -> Android
Device</b> <b>Monitor</b>.
</ol>
</div></li>
<li><div style="overflow:hidden">
<hr>
<ol class="padded" start="4">
<div class="figure" style="">
<img src="{@docRoot}images/tools/performance/traceview/gettingstarted_image002.png"
alt=""
width="400px" />
<p class="img-caption">
<strong>Figure 2. </strong>Steps for starting Traceview.
</p>
</div>
<li>Make sure your device
and the package for your application are showing in the <b>Devices</b> (DDMS mode) or
<b>Windows</b> (Hierarchy Viewer mode) tab.
<p>If necessary choose <b>Window > Reset
Perspective</b> to get back to the default pane arrangement.</p></li>
<li>Click the <b>DDMS</b> button, because Traceview is one of the DDMS tools.</li>
<li>Select the app you want to profile.
</ol>
</div></li>
<li><div style="overflow:hidden">
<hr>
<ol class="padded" start="7">
<div class="figure" style="">
<img src="{@docRoot}images/tools/performance/traceview/gettingstarted_image004.png"
alt=""
width="400px" />
<p class="img-caption">
<strong>Figure 3. </strong>Starting profiling.
</p>
</div>
<li>Click the Start method profiling
<img src="{@docRoot}images/tools/performance/traceview/gettingstarted_image003.png">
button.
</li>
</ol>
</div></li>
<li><div style="overflow:hidden">
<hr>
<ol class="padded" start="8">
<div class="figure" style="">
<img src="{@docRoot}images/tools/performance/traceview/gettingstarted_image005.png"
alt=""
width="400px" />
<p class="img-caption">
<strong>Figure 4. </strong>Choosing profiling options.
</p>
</div>
<li>In the <b>Profiling Options</b> popup:
<ul>
<li>Choose <b>Sample based profiling</b></li>
<li>Keep the default sampling rate of 1000 microseconds.</li>
<li>Click <b>OK</b>.</li>
</ul>
</li>
</ol>
</div></li>
<li><div style="overflow:hidden">
<hr>
<ol class="padded" start="9">
<div class="figure" style="">
<img src="{@docRoot}images/tools/performance/traceview/gettingstarted_image007.png"
alt=""
width="400px" />
<p class="img-caption">
<strong>Figure 5. </strong>Stopping profiling.
</p>
</div>
<li>Interact with your application. If you are aware of performance issues that
your users experience, perform those actions.</li>
<li>Click the Stop method profiling
<img src="{@docRoot}images/tools/performance/traceview/gettingstarted_image006.png">
button.</li>
<li>Wait for the trace to load. This may take a few seconds if you recorded for a
long time.</li>
</ol>
</div></li>
<li><div style="overflow:hidden">
<hr>
<ol class="padded" start="12">
<div class="figure" style="">
<img src="{@docRoot}images/tools/performance/traceview/gettingstarted_image008.png"
alt=""
width="440px" />
<p class="img-caption">
<strong>Figure 6. </strong>Traceview output panes.
</p>
</div>
<li>Traceview has two panels: <b>Timeline</b> pane and <b>Profile</b> pane, which
are described below.</li>
<li>Use the <b>Find</b> box at the bottom to filter your profile results. For
example, if you are interested in finding the running time for a function, you can
search for it, and the tool will highlight it in the timeline.
</ol>
</div></li>
<li><div style="overflow:hidden">
<hr>
<ol class="padded" start="14">
<div class="figure" style="">
<img src="{@docRoot}images/tools/performance/traceview/gettingstarted_image009.png"
alt=""
width="400px" />
<p class="img-caption">
<strong>Figure 7. </strong>Annotated timeline panel.
</p>
</div>
<li>The <b>Timeline</b> pane visualizes how your code executes over time.
<ul>
<li>Each row shows a thread.</li>
<li>Each bar on the timeline is a method executing.</li>
<li>Each color is for a different method; every time a method executes, you see
a the same color bar.</li>
<li>The width of its bar indicates how long the method takes to execute.</li>
</ul>
</li>
<li>When you are zoomed out, a bar indicates when a method is executing.</li>
</ol>
</div></li>
<li><div style="overflow:hidden">
<hr>
<ol class="padded" start="16">
<div class="figure" style="">
<img src="{@docRoot}images/tools/performance/traceview/gettingstarted_image010.png"
alt=""
width="300px" />
<p class="img-caption">
<strong>Figure 8. </strong>Segment for method on the timeline.
</p>
</div>
<li>Zoom into the graph, and the bar for each method expands into a colored
U-shape, where the left side of the U indicates the start, and the right side
the end of the method's execution.</li>
</ol>
</div></li>
<li><div style="overflow:hidden">
<hr>
<ol class="padded" start="17">
<div class="figure" style="">
<img src="{@docRoot}images/tools/performance/traceview/gettingstarted_image011.png"
alt=""
width="440px" />
<p class="img-caption">
<strong>Figure 9. </strong>Traceview Profiling pane with callstack.
</p>
</div>
<li>The <b>Profiling</b> pane shows a list of methods.
<ul>
<li>Select a method to see who called it (Parent) and who it's
calling (Children).</li>
<li>The selected method is also highlighted in the <b>Timeline</b> pane.</li>
<li>The columns show exclusive and inclusive CPU and real times, percentages,
ratios, and how often a method was called.</li>
<li>The <em>exclusive time</em> is the time spent just in the method itself, which can
help you find issues within that specific method.</li>
<li>The <em>inclusive time</em> is for the method and all methods it calls, which
can help you find problems with your call tree.</li>
<li>The <b>Calls+Rec</b> column shows how many times a method was called recursively,
which can help you track down performance issues.</li>
</ul>
</li>
</ol>
</div></li>
</ul>