Merge pull request #99 from pearlchen/master

Minor updates to Remote Debugging and Mobile Emulation pages
This commit is contained in:
Paul Irish 2014-05-30 11:33:08 -04:00
Родитель 7d48ed2254 2d23ec8c4d
Коммит 7778d4e018
2 изменённых файлов: 10 добавлений и 6 удалений

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

@ -30,7 +30,9 @@ walk through in this section.</p>
mobile-specific parts on the devices you intend to support. Device emulation can mobile-specific parts on the devices you intend to support. Device emulation can
make this process more straightforward.</p> make this process more straightforward.</p>
<iframe width="640" height="360" src="//www.youtube.com/embed/z7sTRdSpA04" frameborder="0" allowfullscreen=""></iframe> <div class="video-container">
<iframe width="640" height="360" src="//www.youtube.com/embed/z7sTRdSpA04" frameborder="0" allowfullscreen=""></iframe>
</div>
<p>DevTools contains built in presets for a number of devices, this allows you to emulate and debug mobile viewport issues like CSS media query breakpoints. Selecting a device preset automatically enables a number of settings:</p> <p>DevTools contains built in presets for a number of devices, this allows you to emulate and debug mobile viewport issues like CSS media query breakpoints. Selecting a device preset automatically enables a number of settings:</p>

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

@ -117,7 +117,7 @@ an alert on the device requesting permission for USB debugging from this compute
<ul> <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>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>Verify you're using Chrome for Android 32 or later.</li> <li>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>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> <li>You can try Chrome Canary on desktop as new improvements land daily.</li>
</ul> </ul>
@ -156,7 +156,9 @@ network conditions.</li>
<p>Screencasting lets you bring the experience of your device onto your machine. This allows you to keep your attention on one screen instead of switching back and forth between the device and the DevTools. </p> <p>Screencasting lets you bring the experience of your device onto your machine. This allows you to keep your attention on one screen instead of switching back and forth between the device and the DevTools. </p>
<iframe width="640" height="360" src="//www.youtube.com/embed/Q7rEFEMpwe4" frameborder="0" allowfullscreen></iframe> <div class="video-container">
<iframe width="640" height="360" src="//www.youtube.com/embed/Q7rEFEMpwe4" frameborder="0" allowfullscreen></iframe>
</div>
<p>Clicking on the screencast icon <img alt="Screencast" src="remote-debugging/screencast0.png" /> in the toolbar opens up a panel on your computer displaying your device's screen. As you navigate, click, scroll, the screencast display will provide a live view of what's on your device.</p> <p>Clicking on the screencast icon <img alt="Screencast" src="remote-debugging/screencast0.png" /> in the toolbar opens up a panel on your computer displaying your device's screen. As you navigate, click, scroll, the screencast display will provide a live view of what's on your device.</p>
@ -195,7 +197,7 @@ Android WebViews inside native Android applications. Debugging WebViews requires
<ul> <ul>
<li>An Android device or emulator running Android 4.4 or later, with USB debugging enabled as <li>An Android device or emulator running Android 4.4 or later, with USB debugging enabled as
described in described in
<a href="#enable-usb-debugging"> 2. Enable USB debugging on your device </a>. </li> <a href="#setting-up-device">Setting up your device</a>. </li>
<li>Chrome 30 or later. Enhanced WebView debugging UI is available in Chrome 31 or later.</li> <li>Chrome 30 or later. Enhanced WebView debugging UI is available in Chrome 31 or later.</li>
<li>An Android application with a WebView configured for debugging.</li> <li>An Android application with a WebView configured for debugging.</li>
</ul> </ul>
@ -235,7 +237,7 @@ if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
an alert on the device requesting permission for USB debugging from this computer.</p></li> an alert on the device requesting permission for USB debugging from this computer.</p></li>
<p>To avoid seeing this alert each time you debug, check <b>Always allow from this computer</b> and click <b>OK</b>.</p></li> <p>To avoid seeing this alert each time you debug, check <b>Always allow from this computer</b> and click <b>OK</b>.</p></li>
<li>In Chrome on your development machine, open <b>about:inspect</b>.</li> <li>In Chrome on your development machine, open <b>about:inspect</b>.</li>
<li>You should see the name of your application and a list of debuggable WebViews. Click the <code>inspect</code> link <li>You should see the name of your application and a list of debuggable WebViews. Click the <b>inspect</b> link
next to one of the tabs to inspect the WebView's contents in DevTools.</li> next to one of the tabs to inspect the WebView's contents in DevTools.</li>
</ol> </ol>
@ -287,7 +289,7 @@ Now, enter in your local URL into the <b>Open tab</b> field and hit <b>Go</b> to
<p>You should see the content being served by your development machine.</p> <p>You should see the content being served by your development machine.</p>
<div class="screenshot"><img style="max-width:722px" src="remote-debugging/portforward.png"/></div> <div class="screenshot"><img src="remote-debugging/portforward.png"/></div>
<h3 id="virtual-host-mapping">Virtual host mapping</h3> <h3 id="virtual-host-mapping">Virtual host mapping</h3>