
Firefox Dev Tools: Box model highlighter, Web Console improvements - rnyman
https://hacks.mozilla.org/2014/03/box-model-highlighter-web-console-improvements-firefox-os-hud-more-firefox-developer-tools-episode-30/
======
msoad
I'm going to guess that Chrome DevTools is going to fall behind Firefox by end
of this year.

Today it's not possible for me to make the switch. There are some features
that Firefox devtools is lacking from DevTools.

~~~
msoad
Here are some features I'm missing:

    
    
        Break on attribute or subtree modification
        HTML Node drag and drop (yup! Chrome DevTools have it)
        XPath (I use it for testing)
        FPS monitor and force repaint

~~~
nawitus
I'm missing localStorage inspecting and editing. (If it's already there,
please tell where :), I haven't really used Firefox developer tools much).

~~~
proexploit
In the console you can type: inspect(localStorage)

~~~
nawitus
Thanks, but that's not usable enough for me.

------
tyleregeto
I love all the work the Firefox team is doing here over the last year. Things
have improved so much, its terrific. These are the things Firefox needs before
I could start to consider it as a primary development tool:

\- Performance analyzation

\- Resource management (cookies, local storage, etc)

\- Option to completely disable cache when dev tools are open

\- Ability to search the document in the inspector

I'm sure they'll get there before too long.

~~~
Touche
Already has an option to disable the cache. Advanced settings.

~~~
tyleregeto
Thank you!

Edit: I can't find it. I see I can disable the cache completely, but that's
not really what I want. Its nice to only disable it when the dev tools are
open. I don't want to have to go to advance settings and clear it every time.

~~~
Touche
Why specifically "when the dev tools are open"? That seems like an unusually
specific request.

~~~
jordanlev
This is how Chrome DevTools do it (by default), and it's incredibly useful.
When I'm just browsing websites I want the cache enabled, but when I'm working
on a site (in which case I usually have the DevTools opened) I want the cache
disabled. In fact, I now just open the DevTools when I want to temporarily
disable caching -- because the keyboard shortcut is so ingrained it's a lot
easier to do that then find the overall browser setting itself.

~~~
Touche
I know that's how Chrome DevTools does it, but "because that's how Chrome
DevTools does it" is not a good answer to the question "why specifically when
the DevTools are open".

~~~
joesb
Because you don't want to disable caching of every other sites when you are
not wearing your developer hat, just a "regular user surfing internet" hat.

~~~
extra88
Sounds like a case for using separate Firefox profiles, one for each "hat."

~~~
joesb
Why do that when I can just press "F12"?

------
throwaway41597
I wish I could get a reference from the console command line to an object I
printed in the console earlier.

For example: in my code I write console.log({ foo: function(msg) {...} }). The
object is displayed as "[object Object]" (which isn't as good as Chrome's
output by the way) and, sure, I can click it to inspect it,but what I'd like
is, like, right-click->"Copy reference" and then it puts "$_(123)" in my
clipboard, where $_ is a console-defined function which takes a number and
returns the matching output of the console history.

Then I can use the referenced object in a new command: e.g.
$_(123).foo('hello').

Firebug has $_ [1] but it's just for the last output of the command line (not
the console history). (edit: likewise for Chrome [2])

Thank you for the many enhancements.

[1]:
[https://getfirebug.com/wiki/index.php/Command_Line_API#.24](https://getfirebug.com/wiki/index.php/Command_Line_API#.24)

[2]: [https://developers.google.com/chrome-developer-
tools/docs/co...](https://developers.google.com/chrome-developer-
tools/docs/commandline-api#_)

------
zaius
I love the look of the font preview. One of my major gripes with web fonts and
listing multiple sources is not knowing which font rule is actually applying.
Looks like this might solve my problem.

------
yeukhon
Live editing JS and recompile doesn't seem to be possible from devtools. My
experience with scratchpad doesn't do that so I have to fall back to Chrome
when I want to edit JS loaded by the page on a third-party site. Is that still
true?

~~~
mnemonik
You can use Cmd+E to re-evaluate individual functions:
[http://fitzgeraldnick.com/weblog/52/](http://fitzgeraldnick.com/weblog/52/)

As far as full live editing goes, we have some refactoring and infrastructure
work that needs to happen first that also blocks things like properly
debugging eval'd strings and dynamically appended scripts. Its pretty high on
our priority list and should be coming soonish!

~~~
yeukhon
Yeah. Thanks. Until then I can't :/ do you have the bug number?

~~~
mnemonik
[https://bugzilla.mozilla.org/show_bug.cgi?id=771339](https://bugzilla.mozilla.org/show_bug.cgi?id=771339)

------
misterjinx
The box model highlighter looks great. This was the only reason keeping me
from switching from firebug to dev tools entirely. Also, the other
improvements are great news as well. Good job!

------
msujaws
Very cool, I like the Console to Inspector hookup that they added!

~~~
jisaacks
I thought you were referring to a way to connect my terminal to the browsers
console.

I would love for there to be some node.js plugin where I could basically
connect to the browser's js console.

~~~
bzbarsky
You're looking for something like
[https://github.com/harthur/fxconsole](https://github.com/harthur/fxconsole)

------
chr1
Interesting they've added option to hide buttons, but kept huge icons on tabs,
chrome used to have similar ugly icons, but fortunately they are removed now.

------
core1024
Is there about:config option to disable grouping of console.* messages like in
firebug? Otherwise I lose their order, which is not helpful.

~~~
mihai_sucan
there's no such option for now, but we have a bug report:

[https://bugzilla.mozilla.org/show_bug.cgi?id=704252](https://bugzilla.mozilla.org/show_bug.cgi?id=704252)

~~~
core1024
It's an old bug. I'll keep an eye on it :)

------
Siecje
Can you edit and save to a local HTML file?

