New Features of Firefox Developer Tools: Episode 25

https://hacks.mozilla.org/2013/08/new-features-of-firefox-developer-tools-episode-25/

by blueveek • 13 years ago

132 25 13 years ago

hacks.mozilla.org

conroy• 13 years ago

The blackbox support seems like a killer feature. No more debugging minified JQuery! I also can't believe that CSS auto-complete wasn't there before.

I've been using Aurora for the last few months and have loved the experience. It's stable and I get to early access to great new tools. I highly recommend it for any developer looking to use the latest and greatest.

Ygg2• 13 years ago

For me the killer feature are these: http://paulrouget.com/e/devtoolsnext/

Though that CSS auto-complete is sweet as hell.

fetbaffe• 13 years ago

Oh man! Blackboxing is definitely a killer feature!

Also been using Aurora for the past few months and I like it a lot. Better then Firebug on most tasks (not all yet) and less resource heavy and less buggy.

CSS auto completion is really good addition.

Next thing to hope for is improved profiling tools. Still the best profiling tools are in IE. Even IE8 is better than Firebug.

IE11 Memory profiling is really sweet.

masklinn• 13 years ago

Having the console finally work correctly in debugging sessions (execute in the current stack frame) is going to be great.

peter-fogg• 13 years ago

I'm currently using Firefox for browsing and Chrome for debugging, just for this feature. Now I can go back to one browser, a more sensible workflow.

past2• 13 years ago

This is actually in the latest stable Firefox release already (Firefox 23).

TausAmmer• 13 years ago

How one does search(CTRL+F) in DOM in Developer tools? Either I could not find such a feature or it is very well hidden?

hpaavola• 13 years ago

Open Inspector, there is a search field in upper right corner of the page source pane.

Skalman• 13 years ago

At least in Firefox Aurora 25 there's a small search icon to the right in the inspector. But its search functionality seems buggy...

Edit: It only shows searches as a CSS expression, and it doesn't show the results in the DOM view, only by highlighting individual results on the page (like inspecting that element)

pixard• 13 years ago

As a front end dev the only thing still keeping me with Safari/Chrome is the visual highlighting of paddings and margins when selecting or mousing over things in the Inspector (as opposed to the dotted border Firefox provides).

This is simply invaluable to quickly get to the bottom of layout issues. It's really unfortunate that they haven't built this in yet, Firebug slows down Firefox for me to the point of being unusable (switching tabs takes 5-10 seconds) so I'm stuck having either Safari or Chrome open together with Firefox just for that 1 thing.

mikeratcliffe3• 13 years ago

We are working on that. We also plan on adding multi-highlight for when e.g. you are in a selector in the style editor and a bunch of other goodies.

illumen• 13 years ago

Great work :) I also miss that feature. It's been good to see the steady work on the developer tools.

I still spend the majority of my time in firebug/chrome/ie8/safari though... but it seems the time will come soon when I will switch.

nfm• 13 years ago

Thanks to the dev tools team - these are some solid enhancements. Nice work!

Achshar• 13 years ago

Only a few minutes ago I was wondering why the variable value was undefined when I paused the execution in js. Now I found out why. I am actually surprised it was not there before. There are still 12 weeks for this to become stable. Black box seems really neat too.

past2• 13 years ago

This should actually already work if you are on Firefox 23. Please file a bug if it doesn't.

louischatriot• 13 years ago

The ability to use the console in the current frame is also one of the killer features imo. Nice work Mozilla.

itry• 13 years ago

When I hover a variable in the debugger, is the value displayed now? This missing feature is the main reason I use Chrome instead of Firefox.

mikeratcliffe3• 13 years ago

We have a bunch of Object Inspector requests and we will get onto them when we get chance: https://bugzilla.mozilla.org/buglist.cgi?component=Developer...

Dirlewanger• 13 years ago

Gotta say, I'm finally now more comfortable using Firefox's Dev Tools rather than Firebug...mainly because Firebug has become a slow piece of crap and FF's now runs at more or less with the speed of Chrome's tools.

nieve• 13 years ago

The combination of being able to freely modify network requests before resending them and being able to execute javascript exactly where you want it seems perfect for debugging other people's websites with less friction. Or figuring out exploits, depending on your point of view. The former is going to save me a lot of pain - I've been running Aurora for a year or two now and it's been good to me, but I've slacked on following new features.

Siecje• 13 years ago

Edit as HTML would be nice.

So you can right click on the body or a table and edit the html in the inspector.

mikeratcliffe3• 13 years ago

Yes, we also have plans for HTML editing that I think everybody will be very pleased with.

tyleregeto2• 13 years ago

Wow, lots of great features. The progress on these tools lately is awesome. One little feature I'd _really_ like to see is F12 as a keyboard shortcut to open the dev tools, I'd like that consistency with Chrome & IE.

mnemonik• 13 years ago

Can you wait till the next uplift? If not, hop on Nightly ;)

https://bugzilla.mozilla.org/show_bug.cgi?id=878412

tyleregeto2• 13 years ago

Very cool :) Thanks for letting me know!

New Features of Firefox Developer Tools: Episode 25

Related Stories