Javascript Exploration With jfiddle.net and Chrome Debugger

Continuing my search for the ideal web development environment, I'm exploring jfiddle, tied to Google Chrome's debugger. Here's how it works.
jfiddle user interface
jfiddle gives you a nice four-dimensional view of the components of a web module: markup, javascript, css and the rendering. The left panel lets you automatically include some popular javascript libraries. I'm using jQuery and I can add jQuery UI with a click of a button.

Now I can do fast iterative cycles. Change some HTML, retry; change some CSS, retry; change some javascript, retry. All nicely partitioned and ready to be put in a module file.

If I use jQuery(edge) theory says that I can also add jQuery Lint with a click of a button. jQuery Lint is a nice idea: it will give you meaningful console messages for jQuery misuse. Like this:

jQuery Lint messages
And I can expand the message for details and see ...

jQuery Lint details










And I can expand the second "more info" and find out how I might remedy the problem:
jQuery Lint remedies
The only problem is that right now (on edge) it lies. I'll try it in a different environment and see how it works.

I think that for now Chrome is the way. I need to clean up my environment so that I don't see so many plugin scripts and that will be alright.


Enhanced by Zemanta

Comments

Popular Posts