Over a million developers have joined DZone.
Platinum Partner

My Workflow v2: Mobile, DevTools & LiveReload

· Mobile Zone

The Mobile Zone is brought to you in partnership with CA Technologies.  Spending too much time coding your mobile backend? CA Mobile App Services does the work for you.

Since I’m at Mobilism 2013 I think it’s worth sharing my recent mobile (mainly CSS) workflow. It’s not rocket science, but it’s a nice follow on from my workflow with devtools I shared a few months back.

It simply boils down to using LiveReload on the page, using DevTools with the “Save As” functionality on the CSS, then simply make the change on the desktop using DevTools, which automatically saves to file, which causes LiveReload to trigger a reload on all devices (perhaps frustratingly on the desktop too), but also the remote devices – mobile or otherwise – to refresh allowing me a quick glance to make sure the styles look right.


What it should be

There is an ideal workflow, and I believe this is the way it’s supposed to work (but maybe the browser isn’t quite there just yet, but it feels like it’s just around the corner).

You connect your mobile browser (Android Chrome in this case), run adb (and I think I saw a browser extension that makes this easy during some of the Google IO 2013 videos), open Chrome (Canary works) and navigate to chrome://inspect and you’ll be able to launch the devtools for that page.

From those devtools I imagine I should be able to edit and save to disk and it would remove the requirement for LiveReload (though this doesn’t solve working with iOS). Pretty cool.

The Mobile Zone is brought to you in partnership with CA Technologies. Read the ebook: Accelerating Enterprise Mobile and IoT App Development to learn more.


Published at DZone with permission of Remy Sharp , DZone MVB .

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}