Wow, I'm really impressed with the strides Mozilla has been making on this front. Chrome has long had the best dev tools and is one of the reasons I hardly ever use Firefox anymore. Once these updates land it may be on par or even better. Excited to see true competition on the dev side of things now.
Same here. I still feel Firefox devtools are not innovating fast enough. Chrome workspaces and a lot of other useful features are just not present in Firefox. I feel that's one of the major reason I could never migrated to Firefox professionally.
I am also quite impressed with IE 10 & 11 devtools. It is really useful and has clean UI and UX.
In short I could say that:
Chrome Devtools > Firebug > IE devtools > Firefox devtools
I'm a long time Firefox fan, but very recently I played for the first time with IE 11 memory profiler and I must say, this is the best profiler out there.
I got frustrated with this and created BigConsole[1] to solve it. It's a Chrome extension that adds a Firebug-style split console to 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.
I have to say, I stared at this question for a while. I have such a large reliance on using the console as a scratchpad, before ever even opening a script file, that I don't think I've even considered the possibility that one could do front end development work without it.
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.
In Chrome, you could Snippets[1] or Live Editing[2] to monkey-patch Javascript sources inline. No need to copy & modify the content - just edit it within the browser and re-run. Complete with syntax highlighting, auto-completion, and the same no-reload goodness you are used to.
I never would have found snippits without it being pointed out to me. Thank you, that seems to be basically what I was looking for. Thought why it is there, and not just a multi-line console confounds me. Then again, so do most of Google's UI decisions for the last ~2 years or so.
Firefox has a feature that's actually called Scratchpad that's likely exactly what you need. It's a small, basic text editor that lets you run javascript code on the current page. It also has open and save file functionality. It can be rather handy.
In chrome dev tools if you have multiple lines of javascript you should take a look at 'Snippets' under the 'Sources'. It's quite a nice editor to run blocks code on the DOM when you need.
I think that Firefox has lagged behind because of Firebug. When there is already a way for developers to do things, why invent your own, unless you can make it better?
"In design terminology, ‘chrome’ refers to the non-webpage parts of the browser’s interface – the toolbars, tabs and buttons – because our design philosophy was “Content, not chrome” – putting our focus on minimizing the amount of browser UI present, we felt it cheekily appropriate to name the browser Chrome"
I can't stand firebug, the UI is a complete turn off for me. The Chrome dev tools (any any webkit for that matter) just look and function better for what I spend 99% of my time in dev tools doing, tweaking CSS.
- 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.
> Shift-enter in the Chrome console creates a newline rather than executing.
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.
it's not at all useful. all you get is some stack-tace-like thing without any of what you actually want to see. like req/resp headers and body, params, inline json/html decoding based on response type. chrome lags here by a large margin.
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 rarely need the console tab in the chrome devtools because hitting Esc is normally way faster. Also having the tabs in a defined order allows you to use Cmd+n to switch between them (and the number stays the same).
I think the chrome devs did a good job of incorporating the best firebug features. The things that I find better in Firebug are mostly add-ons. For example I work with xpath a lot so firepath work awesome and ties into firebug seamlessly. I haven't found a tool that works as well on chrome.
I also wonder why Mozilla didn't attempt to acquire firebug instead of building their own tools from scratch?
I believe Mozilla does manage Firebug, but the reason it isn't integrated as the main set of tools has to do with Firebug being much slower on complex pages?
Chrome adamantly refuses to un-enable responsive useragent stuff. I constantly have to turn off the extra half-window. More evidence that Google has little product sense.
I agree, while Chrome DevTools are superior in many ways, it's become a shambles as they shoehorn features wherever they fit (like that console half-window)
This is probably a really dumb question, but is there any way to get Firefox to limit console output to just the current window? I've had a tab open (Grooveshark, in this case) leak messages over into what I'm actually trying to debug, and it's pretty annoying.
As far as I know, the console embedded in the page (ctrl+shift+k) show events only from that page, while the browser console (ctrl+shift+j) show events from all the tabs.
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.
I was surprised when I first saw Copy as cURL in Chrome... and very happy to see it here. It makes for a great base test case... now if the api client tools would only take one of these curl commands and set the settings for a request.
I think it's almost funny, but a cURL command line could become the common interface for many tools.
There's a really nice add-on for Firefox called "cliget" that adds a "copy as curl" (or wget) menu item when you right click any link in the browser. I find it heavenly when I need to download something that needs authentication to a remote server.
Every example of dev tools have their pluses and minuses, but all of them are great in their own way.
Everybody has their favorite for whatever specific reasons they have which is usually based off their individual workflow.
One developer's useless dev tools is another's life saver.
Too many people latch onto one way of doing things and don't experiment that much to see what's going on in another tool set.
Give Firefox/Chrome/Firebug dev tools a try. If it works out great! If it doesn't, well that's great too because you still have what you were happy with before.
I just try to forget the dark days before Firebug.
Just installed it from Aurora channel. I have not used firefox for couple years now (moved to Chrome) but I think I will jump back now. The only thing in dev tools missing so far for me compared to Chrome is :before and :after pseudo elements, I love how Chrome dev tools shows it as a separate entity in the inspector tree. I hope FF team implements it as well.
Do you see the live editing of JS and on save they getting executed in a VM? I think it is pretty rad and not present in FF devtools at all. Please correct me if I am wrong.
Firebug gives you the option to toggle all pseudo states for an element and edit its CSS. IMO Firebug and Chrome's dev tools still lag behind Firebug's.
This might be Nightly only. But in the Inspector pane of the Firefox dev tools you can right-click elements to set their focus/active/hover states. Doing so will also update the pane to the right showing any state specific rules that now applies.
I agree. I don't have much experience, but writing an addon for Firefox was a pain. When debugging, it's a constant "cfx run", read cryptic output, close browser, try to fix, rinse and repeat.
Compare it with Chrome where you can see the error, it show where the problem is and you can even edit/patch the addon live without having to restart the browser.
I tried Firefox debugger yesterday when one of the ads on one of the sites I managed somehow created a rogue redirect. The ad cached the redirect response in the browser, so on subsequent requests the browser continued to redirect without making a trip to the server. We happened to catch the error on FireFox on one of the machines and attempted to debug it there.
The first problem was that the requests never showed up in the network tab. I typed in the URL with the network tab set to persistent and hoped that I would see the redirect response header in the network tab. But it never showed up. It loaded directly from cache I presume but it should still have showed up in the network tab or somewhere to allow debugging.
I looked into the cache next and saw that the cached copy of the page contained a single script loading code (I presume this was what got cached for the page). Copying the HMTL from the cache page was fairly annoying. You can't copy the entire text because it's setup as HEX+HTML side-by-side. The HTML version replaces spaces with dots which means you pretty much can't copy it.
Lastly, it would also be nice to prevent the developer tools from closing when a window self closes.
Also, it would be nice to be able to manage cookies in the developer tools.
Another thing I find annoying is that FF/Chrome both don't have a cookie debugger. There are plenty of add-ons but I am not sure why it's not part of the core developer tools. Would be nice to have.
The editable box model & color picker are very useful. I wonder if the editor would one day catch up so that you do your development in the browser itself.
I made my first contribution to Firefox the other day... I downloaded the source on a whim, realised I could build and run it - so went to the bug tracker.
There was a bug with the box model editor that if the labels were long (such as "auto") then they would overlap the borders. I made it so long labels will rotate 90 degrees (try it out, change the outside margin to "auto").
I'm pretty stoked that some code I wrote is in Firefox - seeing an advertised feature that I (in a small way) contributed to is pretty exciting!
I missed it coming from Chrome, but you can see what's stored in localStorage for a particular site by bringing up the console and typing localStorage just like how a web app can access it.
Don't know a way to see localStorage for everything like in Chrome, but I don't miss it anymore.
Really nice update, I love the little functionality tweaks like the color picker. This is the kind of thing that will get developers to choose one platform over the other for day to day dev work.
The main thing that drove me back to Chrome for web dev was the performance. Firefox would hang for ~30 seconds trying to load source maps for our 150+ modules. Since it's single-threaded, this locks up the entire UI every time our app loads with dev tools open. And if it pauses on an exception during this 30 seconds, good luck trying to do anything for the next five minutes.
We had some source map performance issues a while back, but I fixed all the ones that were reported. If you have a test case and steps to reproduce, I'd love to take a look :)
Don't have a minimal test case yet, I'm seeing it happen on a page with >150 files bundled into a single file with a base64 data URI source map. If the debugger is open on page load, it hangs for 30 seconds to a minute, but loads practically instantly if I open the debugger after page load.
Is there an existing bug I can chime in on or should I report a new one?
I had the same performance issues and the latest stable version of Firefox resolved every bit of slowness I was experiencing. The totally surprised me, it felt like a different browser.
Is it only on Mac it shows the actual status codes on the network tab? On Windows i have to hover the little icon in the first column, which is really annoying when I'm trying to figure out if my caching is working correctly.
Sounds like your windows copy of firefox might be the main release channel. The numeric status codes have been in since 30 (currently Beta). You can hop on Aurora (or Beta, or Nightly, but Aurora is generally best for web devs), or just wait about 6 weeks for the next uplift.
An awesome list of enhancements. Something not mentioned there is that the window.onerror function has a new "error obj" parameter with the stacktrace, which i found quite handy.
Is there a way to get the same type of JavaScript decompressor as present in Google Chrome? I know there is a plugin for this but it doesn't do the most important: when you decompress the JavaScript, the console file:line details match the decompressed code. So you can click to jump to legible JavaScript when debugging.
> console.error, console.exception, and console.assert logs in the console now include the full stack from where the call was made
But what about if I use `new Error("something");` ? That's how I let errors bubble up in my app. Am I doing it wrong? According to this, that won't show a stack trace.
The only thing left in my wish list is the abililty to edit JS code on a website live and compile it. Chrome has that but Firefox still doesn't have it yet.
Does Chrome have in-REPL stack traces? An eyedropper tool? Multiple cursor support?
Sure, the cURL copy thing and style support in the console were first implemented in WebKit (not Chrome or Blink), but I think most of these features are leapfrogging Chrome's capabilities, not only attaining parity.
> Does Chrome have in-REPL stack traces? An eyedropper tool? Multiple cursor support?
Yes, No, Yes (both get multi-cursor from CodeMirror 4)
> Sure, the cURL copy thing and style support in the console were first implemented in WebKit (not Chrome or Blink)
small correction: that predates Blink[1] so there's wasn't a distinction between WebKit's Web Inspector and Chrome DevTools back then.
Personally my favorite thing unique to Firefox DevTools is their built-in WebGL debugger, which seems to have gotten a lot more attention from them than Chrome's experimental Canvas Inspection which has some similar aspects. Supporting it helps probably .1% of the number of developers needing better CSS tools and whatnot, so I understand the prioritization, but it's still an awesome tool for those of us who do need it.
There is no such thing as Chromium browser, just packages of Chromium source built by different distributors like Ubuntu, Red Hat, etc. You might ask to be called back when a particular packaging other than Chrome gets significant share, but if you ask when Chromium (including all packagings) gets significant share, that's already happened.
The whole point of the "Chrome is proprietary" argument is that we don't know exactly what Google added to Chromium.
Since the diff between Chrome and Chromium is not open-source, there's no way to verify that Google only added what they claim to have added. For example, we wouldn't know if they slipped in an NSA backdoor along with a bunch of plugins.
> Mozilla employs someone who is (was?) anti-gay marriage.
Funny that Mozilla had employed a stance, but grammar aside, Brendan Eich isn't employed in Mozilla anymore. In fact he quit under pressure for contributing to an anti-gay marriage campaign.
Eric S. is as far as I know still employed by Google.
