remote debug. fix TOC and add troubleshooting section.

This commit is contained in:
Paul Irish 2013-12-09 09:58:53 -08:00
Родитель f9466c70d8
Коммит af71488ff8
1 изменённых файлов: 20 добавлений и 15 удалений

Просмотреть файл

@ -15,17 +15,16 @@
<h4><strong>Contents</strong></h4>
<ul>
<li> <a href="#remote-debugging-overview"> Remote debugging overview </a> </li>
<li> <a href="#connect-device-via-usb"> Setting up your device </a>
<ul>
<li> <a href="#remote-debugging"> Connecting directly over USB </a> </li>
<li> <a href="#remote-debugging-chrome-extension"> Connecting via the the ADB Chrome extension</a>
</ul>
</li>
<li><a href="#connect-device-via-usb"> Connect your device</a> </li>
<li> <a href="#debug-your-app"> Debug your Application </a>
<li> <a href="#remote-debugging-overview"> Remote debugging overview </a>
<ul>
<li> <a href="#notes"> Notes </a> </li>
<li> <a href="#connect-device-via-usb"> Setting up your device </a>
<ul>
<li> <a href="#remote-debugging"> Connecting directly over USB </a> </li>
<li> <a href="#remote-debugging-chrome-extension"> Connecting via the the ADB Chrome extension</a>
</ul>
</li>
<li><a href="#connect-device-via-usb"> Connect your device</a> </li>
<li> <a href="#debug-your-app"> Debug your Application </a></li>
</ul>
</li>
<li> <a href="#screencasting">Screencasting your device's screen </a>
@ -54,7 +53,7 @@
<p class="note"><b>Note</b>: For information on the interaction protocol we use for our remote debugging, please see the <a href="/chrome-developer-tools/docs/debugger-protocol">Debugger Protocol</a> documentation and <a href="http://developer.chrome.com/extensions/debugger.html">chrome.debugger</a>.</p>
<h2 id="remote-debugging-overview">Remote debugging overview</h2>
<h2 id="remote-debugging-overview">Remote debugging</h2>
<p>The experience of your web content on mobile operates very differently than what users experience on the desktop. The Google Chrome DevTools allow you to inspect, debug, and analyze the on-device experience with the full suite of tools you're used to, meaning you can use the Chrome DevTools on your development machine to debug a page on your mobile device.</p>
@ -96,11 +95,9 @@ guide.</p>
<p><strong>To enable USB debugging:</strong></p>
<ul>
<li>On most devices running Android 3.2 or older, you can find the option under
<strong>Settings > Applications > Development.</strong></li>
<li>On Android 4.0 and newer, it's in <strong>Settings > Developer options</strong>.</li>
<li>On Android 4.2 and newer, <strong>Developer options</strong> is hidden by default. To make it
available, go to <strong>Settings > About phone</strong> and tap <strong>Build number</strong> seven times. Yup, just tap it 7 times, even if it seems crazy. Then, return to the previous screen to find <strong>Developer options</strong>.</li>
<li>On Android 4.0 and 4.1, it's in <strong>Settings > Developer options</strong>.</li>
</ul>
<p><div class="screenshot"><img width="500" alt="USB debugging settings in Developer options" src="remote-debugging/image_4.png"/></div></p>
@ -207,9 +204,17 @@ an alert on the device requesting permission for USB debugging from this compute
<p>Find the tab you're interested in and click the <b>inspect</b> link to open DevTools on it. You may also reload the page, bring it to the front, or close it. Lastly, you can open new links on the device through a text input field.</p>
<h3>Troubleshooting</h3>
<ul>
<li>On your device, verify you have <b>Developer Options</b> available, and <b>USB debugging</b> turned on. If it's working and connected, it'll set a notification on your device.</li>
<li>If you're trying native USB debugging, verify you're using Chrome for Android 32 or later.</li>
<li>If USB debugging is on, but <code>about:inspect</code> doesn't show your device check that <B>Discover USB devices</b> is checked. If so, unplug the device and try revoking all USB authorizations in Developer Options to retry.</li>
<li>You can try Chrome Canary on desktop as new improvements land daily.</li>
</ul>
<h3 id="debug-your-app">4. Debug Your Application</h3>
<h2 id="debug-your-app">4. Debug Your Application</h2>
<p><div class="screenshot"><img width="700" alt="Inspecting a remote page using the Chrome Developer Tools" src="remote-debugging/elements-panel.png"/></div></p>