Chrome DevTools for Mobile

This is a great article exploring the newer features of Chrome DevTools and how they interact with mobile development. The video is short and sweet and you can see how big of a jump these tools now are in debugging and testing mobile websites.

Developing for mobile should be just as easy as it is developing for desktop. We’ve been working hard in the Chrome DevTools to make things easier for you and it’s time to unveil some new features that should dramatically improve your mobile web development. First up, remote debugging and then we’ll unveil proper mobile emulation.

Until now, while remote debugging you’ve had to shift your eyes back and forth between your device and your devtools. Now, Screencast displays your devices’s screen right alongside your devtools. Seeing it is good, but interacting with it is even better:

  • Clicks on the screencast are translated into taps and proper touch events are fired on the device.
  • Inspect element on your device with your desktop pointer
  • Type on your desktop keyboard–all keystrokes are sent to the device. A huge timesaver over typing with your thumbs.
  • Scroll the page by flinging it with your pointer or just sliding on your laptop trackpad.

The full documentation on screencasting captures all this and more, like sending a pinch zoom gesture. Chrome on Android Beta (m32) required.

Easy Remote Debugging

18 months ago, Chrome DevTools introduced proper remote debugging for WebKit browsers, but if you tried it out back then, you had to deal with a 400MB Android SDK download, adding the adb binary to your $PATH and some magical command line incantations.

Read full article here: Chrome DevTools for Mobile: Screencast and Emulation – HTML5 Rocks.