Over a million developers have joined DZone.

My Workflow v2: Mobile, DevTools & LiveReload

· Mobile Zone

Visually compose APIs with easy-to-use tooling. Learn how IBM API Connect provides near-universal access to data and services both on-premises and in the cloud, brought to you in partnership with IBM.

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.

Simple.

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 Strongloop and IBM.  Visually compose APIs with easy-to-use tooling. Learn how IBM API Connect provides near-universal access to data and services both on-premises and in the cloud.

Topics:

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 }}