13 ms·

Chrome DevTools for Mobile: Screencast and Emulation

151 points by paulirish 13y ago

seoguru 13y ago
Does anyone have instructions on how to get this working on linux google chrome?
cleverjake 13y ago
holy moley screencasting is amazing.
- daviding 13y ago
  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.
j_s 13y ago
Are there any similar articles explaing how to use what Firefox has to offer? https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugg...
- duiker101 13y ago
  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.
mladenkovacevic 13y ago
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.
- untog 13y ago
  You can remotely debug a Safari session on a device - but it has to be through desktop Safari. It's in the Develop menu.
  - mladenkovacevic 13y ago
    I'm on Linux and installing a virtual box with a Safari browser just for that seems like too much trouble. I have access to my brother's iPhone but it's annoying for me and for him to have to push my changes to a staging site then go "hey can I use your iPhone for a second" every 5 minutes.
    - untog 13y ago
      Honestly, you're never going to be able to replicate the iPhone without using the browser engine it uses. These Chrome Dev Tools will have nothing to do with iPhone Safari.
      - mladenkovacevic 13y ago
        Yeah it seems like I'm better off just getting a used 4S.
        micampe 13y ago
        an iPod touch may be even cheaper.
        troels 13y ago
        Or get a cheap mac (mac mini, for example). Then you can run the iPhone emulator and use Safari to debug. Works really well. Edit: Oh, you mean you tried this, but it works differently? Or are you using some linux-based dev tools?
        mladenkovacevic 13y ago
        No I've just been using the iPhone user agent "simulation" in Chrome's dev tools. All this does I think it set a reasonably correct resolution and scaling factor, but all the other rendering specifics get overlooked.
d0ugie 13y ago
Can you get the debugging screencast to cast from your computer to your Chromecast?
- paulirish 13y ago
  Yes.
OmarIsmail 13y ago
Can you debug webviews in Android with this? Or is it only for the dedicated browser?
- DoubleMalt 13y ago
  trigger.io claim it is possible for their apps on Android 4.4 [1] that uses Chromium as basis for the webview, but I didn't have the chance yet as I am still on 4.3. [1] http://trigger.io/cross-platform-application-development-blog/2013/11/06/new-feature-roundup-ios-7-and-android-4-4-support-new-accelerometer-and-apptentive-modules/ http://trigger.io/cross-platform-application-development-blo...
- paulirish 13y ago
  Yes, the new WebView in Android 4.4 is totally debuggable: https://developers.google.com/chrome-developer-tools/docs/remote-debugging#debugging-webviews https://developers.google.com/chrome-developer-tools/docs/re... It doesn't yet have the screencasting, but every other DevTools feature is in there.
tieTYT 13y ago
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.
- duiker101 13y ago
  "Internet" is not that good, and if by no one you mean only 100,000,000 - 500,000,000[1] people this really doesn't solve much. [1] https://play.google.com/store/apps/details?id=com.android.chrome&hl=en https://play.google.com/store/apps/details?id=com.android.ch...
  - fidotron 13y ago
    Right, but it's not uninstallable on many newer devices which also have the proper Android browser too, so these figures will be way off.
    - duiker101 13y ago
      I suppose you are referring to devices like the new Nexus 7 that come with Chrome pre-installed. It doesn't have android's native browser and as far as I know it's the only device that ships with Chrome.
      - fidotron 13y ago
        Nope, it's basically any device with the Play Store on running Android 4.2 or later. Chrome being the only browser on Nexus devices has become another reason to avoid Nexus devices, along with the Hangouts as only messaging app and the general lack of storage. It's merely that the alternatives are arguably worse.
- tnuc 13y ago
  The most recent version of Android has Chrome as the standard. It isn't that helpful a feature at the moment but it is looking towards the future.
wiredfool 13y ago
I'm not seeing the screencast icon. (chrome 32/ubuntu desktop, chrome 31/android 4.1)
- paulirish 13y ago
  Chrome 32 Beta on android (https://play.google.com/store/apps/details?id=com.chrome.beta https://play.google.com/store/apps/details?id=com.chrome.bet...) is necessary. I'll update the post to make that clear. Thanks.
  - wiredfool 13y ago
    Thanks.
  - BrandonSmith 13y ago
    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/overview#will_the_new_webview_auto-update https://developers.google.com/chrome/mobile/docs/webview/ove... 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 13y ago
      >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.
hexis 13y ago
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 13y ago
  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.beta https://play.google.com/store/apps/details?id=com.chrome.bet... ) on your phone. I recommend Canary or Dev Channel for your desktop.
  - hexis 13y ago
    Getting Chrome Beta for Android did the trick. Thank you for the fantastic tools you Chrome folks are building.
PhrosTT 13y ago
Does this only work with stock Android installs? Verizon S3 and S4's are not popping up as devices.

151 points by paulirish 13y ago

seoguru 13y ago

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

cleverjake 13y ago

holy moley screencasting is amazing.

daviding 13y ago
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.

j_s 13y ago

Are there any similar articles explaing how to use what Firefox has to offer? https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugg...

duiker101 13y ago
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.

mladenkovacevic 13y ago

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.

untog 13y ago
You can remotely debug a Safari session on a device - but it has to be through desktop Safari. It's in the Develop menu.
- mladenkovacevic 13y ago
  I'm on Linux and installing a virtual box with a Safari browser just for that seems like too much trouble. I have access to my brother's iPhone but it's annoying for me and for him to have to push my changes to a staging site then go "hey can I use your iPhone for a second" every 5 minutes.
  - untog 13y ago
    Honestly, you're never going to be able to replicate the iPhone without using the browser engine it uses. These Chrome Dev Tools will have nothing to do with iPhone Safari.
    - mladenkovacevic 13y ago
      Yeah it seems like I'm better off just getting a used 4S.
      - micampe 13y ago
        an iPod touch may be even cheaper.
      - troels 13y ago
        Or get a cheap mac (mac mini, for example). Then you can run the iPhone emulator and use Safari to debug. Works really well. Edit: Oh, you mean you tried this, but it works differently? Or are you using some linux-based dev tools?
        mladenkovacevic 13y ago
        No I've just been using the iPhone user agent "simulation" in Chrome's dev tools. All this does I think it set a reasonably correct resolution and scaling factor, but all the other rendering specifics get overlooked.

d0ugie 13y ago

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

paulirish 13y ago
Yes.

OmarIsmail 13y ago

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

DoubleMalt 13y ago
trigger.io claim it is possible for their apps on Android 4.4 [1] that uses Chromium as basis for the webview, but I didn't have the chance yet as I am still on 4.3. [1] http://trigger.io/cross-platform-application-development-blog/2013/11/06/new-feature-roundup-ios-7-and-android-4-4-support-new-accelerometer-and-apptentive-modules/ http://trigger.io/cross-platform-application-development-blo...
paulirish 13y ago
Yes, the new WebView in Android 4.4 is totally debuggable: https://developers.google.com/chrome-developer-tools/docs/remote-debugging#debugging-webviews https://developers.google.com/chrome-developer-tools/docs/re... It doesn't yet have the screencasting, but every other DevTools feature is in there.

tieTYT 13y ago

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.

duiker101 13y ago
"Internet" is not that good, and if by no one you mean only 100,000,000 - 500,000,000[1] people this really doesn't solve much. [1] https://play.google.com/store/apps/details?id=com.android.chrome&hl=en https://play.google.com/store/apps/details?id=com.android.ch...
- fidotron 13y ago
  Right, but it's not uninstallable on many newer devices which also have the proper Android browser too, so these figures will be way off.
  - duiker101 13y ago
    I suppose you are referring to devices like the new Nexus 7 that come with Chrome pre-installed. It doesn't have android's native browser and as far as I know it's the only device that ships with Chrome.
    - fidotron 13y ago
      Nope, it's basically any device with the Play Store on running Android 4.2 or later. Chrome being the only browser on Nexus devices has become another reason to avoid Nexus devices, along with the Hangouts as only messaging app and the general lack of storage. It's merely that the alternatives are arguably worse.
tnuc 13y ago
The most recent version of Android has Chrome as the standard. It isn't that helpful a feature at the moment but it is looking towards the future.

wiredfool 13y ago

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

paulirish 13y ago
Chrome 32 Beta on android (https://play.google.com/store/apps/details?id=com.chrome.beta https://play.google.com/store/apps/details?id=com.chrome.bet...) is necessary. I'll update the post to make that clear. Thanks.
- wiredfool 13y ago
  Thanks.
- BrandonSmith 13y ago
  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/overview#will_the_new_webview_auto-update https://developers.google.com/chrome/mobile/docs/webview/ove... 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 13y ago
    >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.

hexis 13y ago

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 13y ago
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.beta https://play.google.com/store/apps/details?id=com.chrome.bet... ) on your phone. I recommend Canary or Dev Channel for your desktop.
- hexis 13y ago
  Getting Chrome Beta for Android did the trick. Thank you for the fantastic tools you Chrome folks are building.

PhrosTT 13y ago

Does this only work with stock Android installs? Verizon S3 and S4's are not popping up as devices.