Almost a year ago, I started transitioning away from using Firefox as my primary browser and started using Chrome. The speed and interface lured me in. In general, I largely embrace what Google’s working on when it comes to software and the cloud. However, as most web guys (and gals) know, Firefox has some features that are serious goto tools for development (firebug anyone?).
There were also minor irritations, like the infamous missing “view background image” button and other random features I got comfortable with in my Firefox based workflow. Google answered them with the (I thought) clunky and unpleasant “Inspect Element” window, but since I had been used to my hotkeys and whatnots from FF, I held this new feature in default distain.
Fast forward a few months and I came to a startling realization that may have been immediately obvious to my more learned and ninja-esque colleagues.
You can design in the Developer Tools window.
I discovered this eye-widening option while I was in the middle of a particularly irritating round of float-the-div-clear-the-content when I started clicking around in the Dev Tools window.
I was aware you could enable and disable particular styles using the checkboxes in the styles sidebar, but I didn’t realize you could double-click the styles and edit them inline. Now, granted, the changes only took place on the currently cached version of the page, not the actual source, but still. Experimentation suddenly seemed considerably easier. The edit-upload-refresh cycle was immediately eliminated.
Moving forward, I also realize you can add new styles to elements. It was awesome. My interest was piqued. The next move I made was to the “Elements” window, which is basically an interactive view source window. I grabbed one of the divs and dragged the code into another section of the document. The element moved on the web page in realtime. My eyes went wide. The holy grail.
All of a sudden, a frustrating coding session turned into a painless game of dragging stuff around, then when the appropriate outcome was staring at me, I bounced back over to Coda, and mirrored the changes in the actual source.
Layout updates done.
Before all the the web Jedi come crawling out of the woodwork to set my on fire over my garish n00bness, you can Póg ma thoin in advance. I think every coder can relate to getting set in their workflow, and then finding a new, easier way to do what you’d be doing before. It was just a cool find, and it’s made my life easier.
If you didn’t know about this feature of Chrome, maybe it can help you out too.
Thanks Google, you’re my new bestie.
For today.
No comments yet.