My Workflow v2: Mobile, DevTools & LiveReload

Since I’m sat 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.

5 Responses to “My Workflow v2: Mobile, DevTools & LiveReload”

  1. I guess you mean this, as a starting point at least:
    https://developers.google.com/chrome-developer-tools/docs/remote-debugging

  2. I’d recommend using Adobe Edge Inspect or Viljami Salamen’s Remote Preview.
    http://html.adobe.com/edge/inspect/
    http://viljamis.com/blog/2012/remote-preview/

    You can also use Weinre with a Node server.
    http://forums.adobe.com/docs/DOC-2623

  3. When using Edge Inspect it’s important to remember that it’s not Safari on iOS, and not Chrome nor Android Browser on Android – it’s the webview. The differences are subtle, but worth bearing in mind.

  4. Debug webview is still a pain in the ass, currently I use weinre for the UI inspection regardless the running platform, and Chrome DevTools for most of the javascript fine tuning.
    You can try also Aardwolf for ubicuous javascript debugging.

  5. @David – sure – I know and use all of these, the point was: save inside of devtools and everything else is automatic (including committing change to disk).

Leave a Reply
Not required

CODE: Please escape code and wrap in <pre><code>, doing so will automatically syntax highlight