Browser integrated Web Development Tools
Posted on:March 19 2010
Recently I've started working on this JavaScript 3D engine which I mentioned quite a lot on this blog already. It's quite a big piece of software, and before, no JavaScript scripts I wrote exceeded 300 lines of code, so I never really needed JavaScript development tools. But when I started writing that library, I had to use them and I was surprised how good they are. Basically all major browsers today include tools to help you developing websites and their scripts, here is a short overview for people who also never noticed this:
Opera Dragonfly
Dragonfly is the development tool which comes with Opera and includes a great JavaScript debugger, DOM inspector, CSS viewer. Everything you need.
Very useful: It's source code viewer has an incremental search feature, and there is an interactive JavaScript console. It even features remote debugging and has a large set of options to use. This is basically my favourite development tool, also maybe because it integrates into the browser and is not a separate window.
Chrome, WebKit and Safari Developer Tools
Chrome, and as it appears also Safari (and probably all WebKit browsers?) include JavaScript debugger, DOM inspector, all the standard stuff.
But I was surprised to see this very useful utility in it as well:
Chrome/Safari include a very neat JavaScript and Resource profiler, telling you which of your functions are the slowest. When writing a JavaScript 3D engine like I do, this is incredibly useful. The resource loading profiler additionally shows you how big all the files are your website are, and how long it needs to load them.
Internet Explorer Developer Tools
Since Internet Explorer is one of the slowest adapting major browsers out there, I rarely use its development tools, but it includes some surprisingly good utilities:
It's all there: A debugger which even feels a bit like Visual Studio, DOM and CSS inspector as well as a JavaScript profiler. Too bad this browser doesn't support canvas or even WebGL.
Why is FireFox not included here?
Simple: FireFox doesn't include development tools by default, you have to download them manually as addon. I'm using Firefox/Minefield, and unfortunately, there doesn't seem to be a working addon with the Minefield version I'm running when I wrote this, so Firefox has to be left out here.
Summary
All major browsers now include impressively mature web developement and debugging tools which can compete with the development tools of 'real' programming languages such as C++ or Java. Looking forward to see some more big applications developed in JavaScript. And I think this will happen soon, since JavaScript is also getting quite fast now.
Opera Dragonfly
Dragonfly is the development tool which comes with Opera and includes a great JavaScript debugger, DOM inspector, CSS viewer. Everything you need.
Very useful: It's source code viewer has an incremental search feature, and there is an interactive JavaScript console. It even features remote debugging and has a large set of options to use. This is basically my favourite development tool, also maybe because it integrates into the browser and is not a separate window.
Chrome, WebKit and Safari Developer Tools
Chrome, and as it appears also Safari (and probably all WebKit browsers?) include JavaScript debugger, DOM inspector, all the standard stuff.
But I was surprised to see this very useful utility in it as well:
Chrome/Safari include a very neat JavaScript and Resource profiler, telling you which of your functions are the slowest. When writing a JavaScript 3D engine like I do, this is incredibly useful. The resource loading profiler additionally shows you how big all the files are your website are, and how long it needs to load them.
Internet Explorer Developer Tools
Since Internet Explorer is one of the slowest adapting major browsers out there, I rarely use its development tools, but it includes some surprisingly good utilities:
It's all there: A debugger which even feels a bit like Visual Studio, DOM and CSS inspector as well as a JavaScript profiler. Too bad this browser doesn't support canvas or even WebGL.
Why is FireFox not included here?
Simple: FireFox doesn't include development tools by default, you have to download them manually as addon. I'm using Firefox/Minefield, and unfortunately, there doesn't seem to be a working addon with the Minefield version I'm running when I wrote this, so Firefox has to be left out here.
Summary
All major browsers now include impressively mature web developement and debugging tools which can compete with the development tools of 'real' programming languages such as C++ or Java. Looking forward to see some more big applications developed in JavaScript. And I think this will happen soon, since JavaScript is also getting quite fast now.
Comments:
for firefox there is Firebug: https://addons.mozilla.org/de/firefox/addon/1843
rp
Quote2010-03-19 09:48:00
It feels weired that you don't mention Firebug at all as this is the mother of them all: almost all layout and features you see and like on those web development tools have been taken from FireBug.
I give you that it's not integrated by default but the first addon any web developer install right after Firefox. Have you checked for a compatible version on the download page: http://getfirebug.com/downloads
Also, a nice blog post written recently gives you a very interesting road map, which I'm sure will be implemented in other tools too: http://blog.getfirebug.com/2010/03/18/firebug-dreams/
I give you that it's not integrated by default but the first addon any web developer install right after Firefox. Have you checked for a compatible version on the download page: http://getfirebug.com/downloads
Also, a nice blog post written recently gives you a very interesting road map, which I'm sure will be implemented in other tools too: http://blog.getfirebug.com/2010/03/18/firebug-dreams/
John Riche
Quote2010-03-19 10:02:00
And for Internet Explorer there is DynaTrace http://ajax.dynatrace.com/pages/
Gregory
Quote2010-03-19 10:15:00
If you have visual studio you can use it to debug the javascript.
Put a breakpoint and in debug tab, go in attach to process and choose IE.
Put a breakpoint and in debug tab, go in attach to process and choose IE.
garixi
Quote2010-03-19 10:22:00
Regarding using Minefield. There is a simple workaround if extension does not support the preview build. Manually install the add-on for current Firefox version.
Then edit the %Your Mozilla Profile%/extensions/%Extension%/install.rdf file.
Find the line em:maxVersion="3.6.*" and change it to em:maxVersion="3.7.*"
After that it won't bother you about incompatibility.
Most add-ons work without any issues for me.
Then edit the %Your Mozilla Profile%/extensions/%Extension%/install.rdf file.
Find the line em:maxVersion="3.6.*" and change it to em:maxVersion="3.7.*"
After that it won't bother you about incompatibility.
Most add-ons work without any issues for me.
Ross
Quote2010-03-21 00:21:00
Is flash is an Browser integrated Web Development tool?
Web Design
Quote2010-03-23 06:27:00
Hi interesting blog post.
Did you know there is a firebug lite [1] for chrome?
@Web Design: for flash there is FlashTracer [2]
[1] https://chrome.google.com/extensions/detail/bmagokdooijbeehmkpknfglimnifench
[2] https://addons.mozilla.org/de/firefox/addon/3469
Did you know there is a firebug lite [1] for chrome?
@Web Design: for flash there is FlashTracer [2]
[1] https://chrome.google.com/extensions/detail/bmagokdooijbeehmkpknfglimnifench
[2] https://addons.mozilla.org/de/firefox/addon/3469
Patrick
Quote2010-03-26 14:09:00
Add comment:
|
|
Possible Codes
| Feature | Code |
| Link | [url] www.example.com [/url] |
| Bold | [b]bold text[/b] |
| Quote | [quote]quoted text[/quote] |
| Code | [code]source code[/code] |
Emoticons
 |  |  |  |  |  |  |  |
 |  |  |  |  |