6 ms·

Firefox Dev Tools: Box model highlighter, Web Console improvements

83 points by rnyman 13y ago

msujaws 13y ago
Very cool, I like the Console to Inspector hookup that they added!
- jisaacks 13y 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 13y ago
    You're looking for something like https://github.com/harthur/fxconsole https://github.com/harthur/fxconsole
Haywain 13y ago
The last time I used Firefox (when Australis moved from Nightly to Aurora) the inspector still lacked the completely-necessary function of adding/creating new rules and classes to a stylesheet. Chrome DevTools have a little "+" that lets you write in an entirely new selector or rule without having to edit an existing one. Does Firefox's native inspector have this feature yet? If so, I can't find it... and it's a gaping hole in their tools. One that keeps me on Chrome, unfortunately.
msoad 13y 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.
- msoad 13y 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
  - bgrins 13y 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 https://bugzilla.mozilla.org/show_bug.cgi?id=858038
    - msoad 13y ago
      I want to get XPath from a node. I use it in WebDriverJS. Good to see drag and drop coming. There was some features that I loved. It's not fair to not mention those: CSS autocomplete is much better than Chrome’s Code Editor’s Search is just amazing! The filter for computed CSS properties is very handy for my work Black Theme is great! Please make it easy to write custom themes One little request, in console. ⌘+K should clean the console.
      - mihai_sucan 13y ago
        We have Ctrl-L for clear output.
        sim0n 13y ago
        ⌘+K is consistent across other apps on OS X (e.g. Terminal)
        mihai_sucan 13y ago
        We've had long discussions and arguing over cmd-k, ctrl-L, and all the shortcuts we could use. cmd-k takes over the search field focus. This is a bitter pill: any shortcut we choose is a different kind of 'wrong'.
core1024 13y 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_sucan 13y ago
  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 13y ago
    It's an old bug. I'll keep an eye on it :)
chr1 13y 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.
yeukhon 13y 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?
- mnemonik 13y ago
  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 13y ago
    Yeah. Thanks. Until then I can't :/ do you have the bug number?
    - mnemonik 13y ago
      https://bugzilla.mozilla.org/show_bug.cgi?id=771339 https://bugzilla.mozilla.org/show_bug.cgi?id=771339
tyleregeto 13y 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.
- Touche 13y ago
  Already has an option to disable the cache. Advanced settings.
  - tyleregeto 13y 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.
    - Touche 13y ago
      Why specifically "when the dev tools are open"? That seems like an unusually specific request.
      - jordanlev 13y ago
        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 13y ago
zaius 13y 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 13y ago
Can you edit and save to a local HTML file?
throwaway41597 13y 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 https://getfirebug.com/wiki/index.php/Command_Line_API#.24 [2]: https://developers.google.com/chrome-developer-tools/docs/commandline-api#_ https://developers.google.com/chrome-developer-tools/docs/co...
misterjinx 13y 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!

83 points by rnyman 13y ago

msujaws 13y ago

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

jisaacks 13y 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 13y ago
  You're looking for something like https://github.com/harthur/fxconsole https://github.com/harthur/fxconsole

Haywain 13y ago

The last time I used Firefox (when Australis moved from Nightly to Aurora) the inspector still lacked the completely-necessary function of adding/creating new rules and classes to a stylesheet. Chrome DevTools have a little "+" that lets you write in an entirely new selector or rule without having to edit an existing one. Does Firefox's native inspector have this feature yet? If so, I can't find it... and it's a gaping hole in their tools. One that keeps me on Chrome, unfortunately.

msoad 13y 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.

msoad 13y 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
- bgrins 13y 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 https://bugzilla.mozilla.org/show_bug.cgi?id=858038
  - msoad 13y ago
    I want to get XPath from a node. I use it in WebDriverJS. Good to see drag and drop coming. There was some features that I loved. It's not fair to not mention those: CSS autocomplete is much better than Chrome’s Code Editor’s Search is just amazing! The filter for computed CSS properties is very handy for my work Black Theme is great! Please make it easy to write custom themes One little request, in console. ⌘+K should clean the console.
    - mihai_sucan 13y ago
      We have Ctrl-L for clear output.
      - sim0n 13y ago
        ⌘+K is consistent across other apps on OS X (e.g. Terminal)
        mihai_sucan 13y ago
        We've had long discussions and arguing over cmd-k, ctrl-L, and all the shortcuts we could use. cmd-k takes over the search field focus. This is a bitter pill: any shortcut we choose is a different kind of 'wrong'.

core1024 13y 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_sucan 13y ago
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 13y ago
  It's an old bug. I'll keep an eye on it :)

chr1 13y 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.

yeukhon 13y 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?

mnemonik 13y ago
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 13y ago
  Yeah. Thanks. Until then I can't :/ do you have the bug number?
  - mnemonik 13y ago
    https://bugzilla.mozilla.org/show_bug.cgi?id=771339 https://bugzilla.mozilla.org/show_bug.cgi?id=771339

tyleregeto 13y 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.

Touche 13y ago
Already has an option to disable the cache. Advanced settings.
- tyleregeto 13y 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.
  - Touche 13y ago
    Why specifically "when the dev tools are open"? That seems like an unusually specific request.
    - jordanlev 13y ago
      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 13y ago

zaius 13y 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 13y ago

Can you edit and save to a local HTML file?

throwaway41597 13y 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 https://getfirebug.com/wiki/index.php/Command_Line_API#.24 [2]: https://developers.google.com/chrome-developer-tools/docs/commandline-api#_ https://developers.google.com/chrome-developer-tools/docs/co...

misterjinx 13y 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!