Meet Chrome, Your New IDE
This is me
Josh de Blank - FED @ Cotton On Group
@joshwins
Chrome an IDE?
An IDE normally consists of:
- a debugger,
- code completion features,
- build automation tools ... sorta,
- a source code editor ... ?
Demo time
What just happened
- after setting up a workspace in Dev Tools settings you can inspect an element and alter its css properties
- these changes will persist immediately to disk
- you get the benefit of immediate feedback and not having to repeat the changes again in your editor
Lets try something a little more complicated
- precompiled CSS with sourcemaps
- guess we should try some JS
- perhaps some Jade
What just happened
- using sourcemaps allows you to Cmd-click on a sass property or value and it will take you directly to the specific line or variable in your sass in the sources panel
- Cmd-s after editing within the sources panel will persist those changes to disk.
- You can edit anything within your workspace directory: sass, css, js, html, jade, etc
Remote Debugging
- enable Developer Options in Android settings
- check USB debugging in Developer Options
- Plug in USB
- Settings > Tools > Inspect devices (chrome://inspect/#devices)
- Connect and Accept prompt on device
- Inspect project.
- Screencasting. (needs Chrome Beta (M32))
So Chrome as an IDE
- Maybe stretching it a little bit.
- But the dev iteration cycle is tightening.
- Lots more features now available (in Canary):
- Remote debugging
- Screencasting
- Device and feature emulation
Further reading:
My Workflow: Never having to leave DevTools - Remy Sharp
Getting started with CSS sourcemaps and in-browser Sass editing
Chrome DevTools Revolutions 2013