

Firefox Developer Tool Features for Firefox 23 - rnyman
https://hacks.mozilla.org/2013/05/firefox-developer-tool-features-for-firefox-23/

======
k__
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 :)

~~~
sherbet
(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.

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

~~~
mihai_sucan
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)

------
kibwen
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.

~~~
robcee
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.

~~~
kibwen
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. :)

------
oneandoneis2
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..

~~~
amarsahinovic
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)

~~~
jlmendezbonini
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.

~~~
bzbarsky
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...

------
pcx66
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.

------
spindritf
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?

~~~
shared4you
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.

------
mavroprovato
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.

~~~
bobsy
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...

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

------
wonnage
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.

~~~
past
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.

------
akeeble
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

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

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

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

