Firefox Dev Tools: Box model highlighter, Web Console improvements

https://hacks.mozilla.org/2014/03/box-model-highlighter-web-console-improvements-firefox-os-hud-more-firefox-developer-tools-episode-30/

by rnyman • 12 years ago

83 52 12 years ago

hacks.mozilla.org

msujaws• 12 years ago

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

jisaacks• 12 years ago

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• 12 years ago

You're looking for something like https://github.com/harthur/fxconsole

msoad4• 12 years ago

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.

msoad4• 12 years ago

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

bgrins3• 12 years ago

Thanks for the info. What are you wanting to do with xpath? The console supports the $x function, like $x("//body"). Also, HTML node drag and drop is on the radar here: https://bugzilla.mozilla.org/show_bug.cgi?id=858038

nawitus2• 12 years ago

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

cromwellian2• 12 years ago

That seems to be premature. Depends what you consider a DevTool. Chrome still has far better profiling/tracing tools for performance analysis. The latest Chrome versions even let you hover over functions and view what the V8 JIT thought of them (e.g. deoptimized and why). Even relatively low hanging fruit, like debugging WebWorkers is missing from FF. I see tons of missing stuff that Chrome DevTools has that FF is missing. It doesn't have something like the Timeline tab for tracking memory/framerate over time. I don't see stuff like HTML5 FileSystem/IndexDB/localStorage browsing. SourceMap support doesn't match Chrome. Etc.

FF seems to do better with the DOM/Designer portion of tooling, but from a JS-heavy coder perspective it seems behind.

mnemonik3• 12 years ago

Like we aren't working on all those things ;)

Dirlewanger• 12 years ago

You mean catch up to where DevTools are right now, by the end of the year? Firefox's tools have been behind Chrome's for years, I really don't see how Chrome's will "fall behind". You know Chrome has people working on it too, right?

msoad4• 12 years ago

Have you ever opened a bug for Chrome DevTools? I opened one for filtering computed CSS properties a year ago. It's not even triaged yet!

skybrian2• 12 years ago

As a GWT maintainer I would be overjoyed if Firefox would simply match Chrome as a solid, fast JavaScript debugger that supports sourcemaps well for large apps. The announced bells and whistles aren't going to help my users if they can't even debug their code.

core10242• 12 years ago

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

mihai_sucan3• 12 years ago

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

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

core10242• 12 years ago

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

chr1• 12 years ago

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.

yeukhon2• 12 years ago

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?

mnemonik3• 12 years ago

You can use Cmd+E to re-evaluate individual functions: 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!

yeukhon2• 12 years ago

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

tyleregeto2• 12 years ago

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.

Touche5• 12 years ago

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

tyleregeto2• 12 years ago

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.

alexcroox• 12 years ago

I'm actually surprised developers using Firefox don't use firebug? It's great that Mozilla are improving the native tools but they are a long way from a moving goal post that is Firebug.

zaius• 12 years ago

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.

Siecje• 12 years ago

Can you edit and save to a local HTML file?

throwaway41597• 12 years ago

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

[2] https://developers.google.com/chrome-developer-tools/docs/co...

misterjinx• 12 years ago

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!

Firefox Dev Tools: Box model highlighter, Web Console improvements

Related Stories