

Chrome DevTools for Mobile: Screencast and Emulation - paulirish
http://www.html5rocks.com/en/tutorials/developertools/mobile/

======
OmarIsmail
Can you debug webviews in Android with this? Or is it only for the dedicated
browser?

~~~
paulirish
Yes, the new WebView in Android 4.4 is totally debuggable:
[https://developers.google.com/chrome-developer-
tools/docs/re...](https://developers.google.com/chrome-developer-
tools/docs/remote-debugging#debugging-webviews) It doesn't yet have the
screencasting, but every other DevTools feature is in there.

------
wiredfool
I'm not seeing the screencast icon. (chrome 32/ubuntu desktop, chrome
31/android 4.1)

~~~
paulirish
Chrome 32 Beta on android
([https://play.google.com/store/apps/details?id=com.chrome.bet...](https://play.google.com/store/apps/details?id=com.chrome.beta))
is necessary. I'll update the post to make that clear. Thanks.

~~~
BrandonSmith
So WebViews in KitKat are not screencast-able as they are currently pegged at
Chromium 30. Nevertheless, a debuggable WebView is an enormous leap forward in
Android Web development.

I found:
[https://developers.google.com/chrome/mobile/docs/webview/ove...](https://developers.google.com/chrome/mobile/docs/webview/overview#will_the_new_webview_auto-
update)

    
    
      Your apps inside a WebView are just as important
      and deserve a runtime that keeps users up to date.
      There are large engineering and logistical
      challenges. We're not quite there yet, but we're
      working on it.
    

I presume that the engineering feat is getting WebViews packaged in an
updatable form. Right now WebViews are linked through the Android system,
exposed as Java classes to apps... code that is not contained in APKs.

I can think of two ways to solve this:

1) Android learns how to receive partial system updates outside of device and
carrier certification processes (maintenance releases). Through the Play
Store, for instance.

2) WebView architecture is changed to run WebViews as a service hosted in a
dedicated WebView app, upgradable as an APK. This would require either an
enhancement to RemoteViews or a new solution altogether.

~~~
lambada
>1) Android learns how to receive partial system updates outside of device and
carrier certification processes (maintenance releases). Through the Play
Store, for instance.

That's what google is doing with the Google Play Services 'super app' \- it's
meant to untie Android API updates from carriers. With the bonus of the app
being closed source and thus not part of stock AOSP.

------
mladenkovacevic
I'm really in need of accurate iOS Safari emulation in the browser so I hope
this brings it. I have a javascript "push-menu" effect that works properly on
every device except the iPhone's Safari and debugging it is proving tedious
because the effect works in the current dev tols "simulation" of the iPhone as
well. On every device the push-menu pushes the other content aside, leaving
the button that activated the originally hidden menu still visible. On mobile
Safari, the menu covers up the existing content, including the button I would
use the close the menu.

~~~
lambda
Note that Chrome for Android (and the desktop emulator) are very different
than Safari on iOS. Even when they were both built on top of Webkit, they had
different renderers and platform bindings (and the iOS binding was not open
source, which caused some of the friction that caused the split). Now that
Blink has forked from Webkit, they are diverging even further.

So while this means you can do basic mobile web development this way, testing
that your UI generally works on mobile devices, it's not substitute for
testing and developing on actual iOS Safari.

~~~
thousande
More details about this here: [http://www.paulirish.com/2013/webkit-for-
developers/](http://www.paulirish.com/2013/webkit-for-developers/)

~~~
lambda
Right. And this was before the Blink fork; they've diverged even further by
now.

------
j_s
Are there any similar articles explaing how to use what Firefox has to offer?

[https://developer.mozilla.org/en-
US/docs/Tools/Remote_Debugg...](https://developer.mozilla.org/en-
US/docs/Tools/Remote_Debugging)

~~~
duiker101
I used both and while I can't give a precise comparsion I think that the
chromeDevtools are generally more advanced but Mozilla is working really hard
to improve with actually good results.

------
hexis
Anybody know if screencasting works with a Galaxy Nexus? I am not seeing the
icon in Dev Tools and I can't find a list of supported devices.

~~~
paulirish
Yup, it works on anything that Chrome's on. Though: make sure you're on the
Chrome Beta (
[https://play.google.com/store/apps/details?id=com.chrome.bet...](https://play.google.com/store/apps/details?id=com.chrome.beta)
) on your phone. I recommend Canary or Dev Channel for your desktop.

~~~
hexis
Getting Chrome Beta for Android did the trick. Thank you for the fantastic
tools you Chrome folks are building.

------
PhrosTT
Does this only work with stock Android installs?

Verizon S3 and S4's are not popping up as devices.

------
cleverjake
holy moley screencasting is amazing.

~~~
daviding
It is nice.

One thing that got me stuck for an entire coffee was that I needed to run
Chrome Mobile Beta on the device to get the Screencast toolbar button to
appear, otherwise you just get regular remote debugging with no button.

------
tieTYT
_Devil 's Advocate_ (from an uninformed newbie): What's the benefit of this
when no one uses chrome for mobile? All android devices come with "Internet"
and all iOS devices come with Mobile Safari. This doesn't help me resolve
issues on the browsers that people actually use on mobile devices.

~~~
mikeevans
Android has shipped Chrome as the default browser since Android 4.1, which
makes up more than 50% of Android devices.

[http://developer.android.com/about/dashboards/index.html](http://developer.android.com/about/dashboards/index.html)

~~~
tieTYT
Ah, good to know. Thanks

------
d0ugie
Can you get the debugging screencast to cast from your computer to your
Chromecast?

~~~
paulirish
Yes.

------
seoguru
Does anyone have instructions on how to get this working on linux google
chrome?

