RSS Feed

Tag Archives: HTML5

How to use google chrome as a web develpment tool

With Google chrome now support official extensions, Chrome is becoming a pretty sweet web development tool. I had always used it to test my pages on Chrome, as well as Safari, Arora, IE8, Firefox 3.5, Firefox 3.6 or 3.7, and Opera whatever the latest was. I try to test on Safari Mobile when I can, but do not own any apply products.

I develop for HTML5 so I’m including all the HTML5 goodness too.  Now of course you have to be able to code yourself and understand how to use each of these to help you, but there’s some great addons to help with HTML, CSS and JS web development.

Among the great extensions for web development are:

HTML Validation — http://goo.gl/Hg7E

Pendule — http://goo.gl/xqZy

HTML5 Outliner — http://goo.gl/9RlA

HTML5 Markup Detector — http://goo.gl/oHkD

Firebug Lite — http://goo.gl/Z01q

Web Developer Mini — http://goo.gl/ehYf

Chrome Web Developer Tools —http://goo.gl/qW44

(Google) Analytics  Helper — http://goo.gl/s8m5

Inline Code finder — http://goo.gl/PFpR

Javascript Console — http://goo.gl/WiTI

BuiltWith Technilogy Profiler — http://goo.gl/ckLk

If you have any more, please add them in the comments.

But some of it is also built in, with google chrome dev tools.

Devtools allows you to inspect a document in every way imaginable.

Console

Storeage (offline data storage and cookies)

CPU profiling

Timeslines of rendering

Scripts with debugging

Resource monitor, which is an amazing tool for tracking images and scripts loading, along with style sheets and just about everything.

And the best of all Elements, which shows you every element, the css that goes with it, and even lets you test out removing certain css commands to see what it effects on the page.

The best part is the ability to edit actually CSS elements as a user style, to test out better styles or different sizes, etc.