My Workflow v2: Mobile, DevTools & LiveReload
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
(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
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.