Firefox Developer Tool Features for Firefox 23 | Hacker News Reader

Firefox Developer Tool Features for Firefox 23

hacks.mozilla.org

122 pointsrnyman40 comments

Waiting to switch back from chrome to firefox after all this "Google dropping <product>" stuff. But the Chrome dev-tools are simply amazing, Firebug always felt clunky to me.

So I'm looking forward to this update :)

(Chrome devotee here). I spend an hour recently with FF-22 trying to debug a regression in FF by using the built-in dev tools; it seems to lack the ONLY feature that I actually want (and to be honest I feel so bemused that it's not there that I think I'm being dumb and missed it): I can't execute a JS statement in the context of the current stack frame. I'm sure the scratchpad must be able to do this, because otherwise it seems like its the most useless debugging console I've seen in some time.

I had the same experience. Fortunately, FF23 adds this feature (under the heading 'Web Console in Debugger Frame' in the linked post).

That feature means you can set a breakpoint in any javascript and while you are paused on a frame you can execute JS in the web console. The code you type executes in the stackframe you have selected in the debugger.

(this did not work in ff22 or older)

Nightly does that now.

We will add a way to select the iframe/frame where to execute JS. This feature is currently in planning.

Considering that chromium is an opensource project and has many contributors... if Google ever did drop Chrome it's not it'll just collect dust.

True story.

But FFox has made major progress the last few years :)

And I would like the give Google a good reason to continuing their support of Mozilla: a userbase.

At the risk of making a facetious comment, surely support for web standards is de facto support for Mozilla? Or do you mean monetary support?

Monetary

The problem with a modern web browser project is it's expensive to operate. All the ones I know of have extensive regression test suites, both correctness and performance, that get run from continuous integration systems in multiple configurations and on multiple platforms. That's not to mention the continuous fuzz testing farms looking for security bugs.

I'm most familiar with the Firefox case: according to https://etherpad.mozilla.org/InfraLoadIdeas a full correctness test run across all platforms is about 120 hours of machine time. Adding performance tests raises that to 177 hours. Combined with the pace of development, that means a build+test farm of 3000+ machines (according to http://oduinn.com/blog/2013/03/27/at-mozilla-releaseengineer... ) and infrastructure load is still a problem.

So any serious project picking up Chromium development would need financial resources to at the very least maintain basic test infrastructure...

One question: what does the new "Security" log level in the console watch for?

Congratulations to the tools team, I'm loving the network panel and the object inspector. And the built-in tools are so much more responsive than Firebug that I'm tempted to switch right now. There are just two things that I'm immediately missing:

1) When I log objects, Firebug prints a preview such as ["a", "b", "c"] or {foo: 1, bar: 2} to the console, whereas the built-in tools print [object Array] or [object Object] and force me to rely on the object inspector (which I'd really just like to use for very large objects, rather than every single little object).

2) I like to try out snippets of code that are longer than a single line, but I'm not a huge fan of the scratchpad (can't be docked, no autocomplete). Firebug allows the console input to toggle between single-line and multi-line, and I'd love if the built-in tools had this as well.

I'm sure I'll stumble across more differences, but the tools really are looking great. Congratulations again on coming so far in so short a time.

The Security filter shows CSP errors and mixed content warnings among other things. I expect the security team will add more messages to that section of the console over time.

We're going to revamp the Console's output area fairly significantly in the next few months. Better Object output is high on the list of changes.

(you can use console.dir(object) for an inlined inspector view, or inspect(object) in the console's jsterm input line to view the object in the sidebar)

Shift-Enter turns the Console's input line into a multi-line input.

We're hoping to add autocomplete to the Scratchpad down the road too.

Ah, that all sounds wonderful, thanks. Shift-enter for multi-line input is actually nicer than Firebug's modal toggle (though less discoverable). And since I think 23 actually broke Firebug's console, I'll certainly be getting more acquainted with the built-in tools for a little while. :)

Is it yet worth trying to make the shift from all-Firebug to all-FF-Dev-Tools? I hate having two sets of tools to do one job..

There are two things that annoy me in FF Dev tools for now:

- It uses RGB to show colors instead of hex (I think they are working on this)

- There is no visual indication of margin/padding for the selected element on the page (it is shown in a box inside dev tools)

Yeah, I just started today on adding the ability (internally) for style declarations to expose colours in the syntax they were originally specified in (bug 731271), which the dev tools people will then be able to use.

For the RGB issue see https://bugzilla.mozilla.org/show_bug.cgi?id=775135

tl;dr: The bug is on hold until a Mozilla employee comes back from vacations.

Though to be fair nothing is stopping someone else from stepping up and doing the work. It's just on hold from the point of view of full-time employees on the devtools team until then...

You can't customize shortcuts, the default ones are pretty bad - forcing you to use two hands to operate the inspector (on qwerty layout at least).

I've given up completely on Firefox as a developer's browser ... Chrome's dev tools are better, faster - they don't crash your browser or make it unusable like Firebug.

I really love the latest FF23 dev tools, been using Nightly for quite a while now. The dark theme is nice. But I think the keyboard-bindings need some work.

- Chrome has this nifty feature where pressing 'Esc' in any of the dev tools brings the Web Console.

- Also, consider this use case. Let's say I enable dev tools on a page, use the Web Console, do some investigation and focus back on the page leaving the dev tools enabled. Now I want to get the focus back to Web Console, but using Ctrl-Shift-K disables the Web Console all together and I will have to re-enable it. Some key binding that brings focus back to the dev tools would be nice.

Is anyone running Aurora on Ubuntu from their PPA? Does it replace regular Firefox or installs under a different name/path? How rampant are the incompatibility issues with add-ons?

Not running it in Ubuntu, but used to run it on Arch. Or should be given a new executable, firefox-aurora.

As for add-ons, most developers seem to mark comparability for future versions, so you shouldn't have to worry too much. You can always edit them to say they're compatible with the version of Firefox you're running and see if they have issues.

I'm running Aurora from Ubuntu PPA (but on Linux Mint). Absolutely no issues. Yes, it replaces regular Firefox. Add-on compatibility is excellent though; can't remember any addon causing me trouble whatsoever. I'm currently on Firefox 23 from Aurora channel.

It's installed under a different name: firefox-trunk. It does not replace the existing firefox.

So now the Firefox Developer tools is now on par feature-wise with Firebug? I think that the Network monitor is the only thing that was missing.

The only thing that's missing and is very important (from a front end designer point of view) is showing paddings / margins when you mouse over / select elements in the Inspector.

Firefox already has that, there's a little "Box Model" tab with a little diagram showing padding, margins, and so on.

It doesn't show them on the page itself though.

What about editing files in the editor? Being able to adjust CSS/JS files in Chrome is great.

You can use the Style Editor to modify CSS and see the changes applied.

We're going to be adding edit support to the Debugger soon.

Adding an attribute to an existing element currently seems impossible unless I am really missing something.

Say you have..

<div>

In any other tools you can double click it and press tab to add an attribute. Most have a right click option to edit as well. With firefox this simple task isn't possible. So adding a class to the above element requires you to at least add class="" to the element...

You have to double-click on the bit of whitespace before the closing ">".

Just edit a current attribute, add a space and type the new attribute name and value.

The one thing keeping me from using FF dev tools is the fact that there's no interactive console in the debugger. Seems like you have to instead create watch expressions for everything you want to check. Even GDB lets you poke around after a breakpoint... For anything Javascript-related you're still gonna have to install Firebug.

As mentioned on the hacks post, ever since Firefox 23 the web console is actually working on the same context as the debugger, when execution is paused on a breakpoint or debugger statement. You can use all the familiar tools in there to examine the current state of the page.

Not sure if it was observed enough but check the "Responsive Design View" (Ctrl+Shift+M) which allows you to write CSS for all browsers at the same time

is there a way to auto-clear console on refresh? i hate the current auto-persist behavior.

This is a high priority feature for us. Expect a fix soon.

Finally, the debugger has a REPL! Hallelujah! That's the main feature I was waiting for.

Reply on news.ycombinator.com