In short I could say that: Chrome Devtools > Firebug > IE devtools > Firefox devtools
Then I tweeted about it, and Addy Osmani responded[2] pointing out that Chrome does in fact support multiline consoles with its Snippets[3] feature. It's still kind of obnoxious, but it does the job.
[1] https://github.com/IceCreamYou/Chrome-BigConsole [2] https://twitter.com/IceCreamYou/status/354181339408375809 [3] https://developers.google.com/chrome-developer-tools/docs/au...
The best answer for you question, would be that throughout my career, the number of situations where I could directly edit a source javascript file, write-run-test-iterate in a typical software development cycle is in the far far minority of the amount of time I've spent writing javascript.
The vast majority of my time, iterating changes to javascript files is non trivial. Some examples include
Major CMS / CRM systems I've worked on where, even if I have all relevant source code, even finding the location where the page's javascript is generated or stored is non-trivial.
Major CMS / CRM solutions where making a change to a single javascript file can result in a 20 minute process before you can see those changes reflected in the browser.
Situations where I simply do not have access to the source code, but am none the less manipulating javascript on the page (for example, custom WPF applications that inject js into every page visited in the wpf web browser)
Or my current situation, where my company hosts some ~30 different web applications, and fully understanding the processes involved to get to the final page state where I will be doing my work is non-trivial.
---
But perhaps the best reason, is when debugging. With javascript, I can simply navigate to the problematic page and say module.function = myNewFunction();
If I start by copy pasting the source for the problematic code into myNewFunction in the console, then I can iterate my changes with 0 regard to how the javascript is served to the page. All my changes are instantaneous, and don't even require a refresh to see take effect. As such, my development time is usually much faster than constantly editing a source file, particularly if that backend framework doesn't update its js when noticing file changes, and is massively faster in any of the situations listed above.
But the real key is that once you get used to working in this fashion, it starts to make sense to use the console as your scratchpad to flesh out ideas before ever actually writing real production code whatsoever, in any situation. It just becomes so nice to be able to flesh out your js ideas on the fly, with 0 regard to framework, and against your target environment.
But this workflow is entirely impossible in chrome, because every time you want to run your script, you have to hit ente, and every time you need a new line you're shifting, and then you're up arrowing over versions, etc, etc. With firebug, I can just continually edit the text in the console until I'm happy with the results, and then I can keep that on the screen and use it as a reference while I write my (hopefully much nicer) real production code in a source file somewhere.
[1] https://developers.google.com/chrome-developer-tools/docs/au...
[2] https://developers.google.com/chrome-developer-tools/docs/au...
Do I need to do any web dev work? Just do it in firebug.
Do I need to drastically change my browser's behaviour? There's probably a setting for that in the web dev toolbar.
Do I want to do anything that involves monitoring or changing the browser itself? check the FF web dev tools.
Between the three, I don't understand how people can claim chrome has a superior toolset.
Maybe it's just me but I find this annoying, feels a little unprofessional.
http://msdn.microsoft.com/library/ie/bg182326%28v=vs.85%29
(F12 is also the keyboard shortcut for opening the developer tools in Chrome, Firefox, and others.)
- inspecting ajax responses in console without flipping to net panel, then hunting for the correct request.
- keeping an inspected/selected html element highlighted on page, not just on mouseover so you can see element bounds. this is useful for tweaking sizing, padding, margins and position.
- as-i-type updating of html rather than on blur
- live highlighting html as it changes
- multiline console
- can't arrange the console tab to be first or arrange the tabs in my most frequently used order. to be fair, FB doesnt offer this either, but I like the console to be first since i spend 90% of my time there in FB, probably cause it's much more useful than chrome's.
there's more that dont immediately come to mind, but not having the first 2 is a major nuisance and productivity killer.
Shift-enter in the Chrome console creates a newline rather than executing.
> live highlighting html as it changes
In the Rendering tab (bottom panel) there's a toggle for "Show paint rectangles" which sounds like its close (but not quite the same) as what you're looking for.
this is not only a major pain in the ass, but also much much worse than just having a persistent multiline editor window that keeps your code, cursor position and selection intact between executions.
there is simply no comparison here.
1. Click request in console
2. Find and click request again in Net panel
3. Click Preview or Response tab
4. Click console again to return
and then...
5. Oh wait, want to see something in the headers
6. Rinse and repeat.
In FB:
1. Click request in console.
2. See raw response body right away, or click headers to see headers or json/html to see those rendered nicely.
3. bonus: view multiple json requests in same window
1. Click request in console
2. Click on the request that was just highlighted for you in the Net panel
3. See headers right away, or click Response to see raw response or Preview to see those rendered nicely
4. Click console again to return
and then...
5. Oh wait, want to see something in the headers
6. Go to the Net panel, still there for you
It's a different workflow and it's probably annoying to you since you're not used to it, but "it's not at all useful" is edging past hyperbolic. Personally I feel like a clumsy idiot when I go back to Firebug, even though I used to live in it and once knew every quirk. I think that's just the way of developer tools.
I also wonder why Mozilla didn't attempt to acquire firebug instead of building their own tools from scratch?
I don't know if there is a way to decide which tabs get logged in the browser console.
I use Chrome for everything but I don't like dev tools and consistently use Firefox because it works so much better for me.
I've been fearing for a long time now that Mozilla would just start doing whatever Chrome is doing.
When it comes to updating dev tools, I wish everything new were an option. When you change a "tool" you change how I "work", and bumps in my work flow just slow me down.