11 ms·

Firefox Developer Tools – Editable box model, Sublime Text keys

420 points by rnyman 12y ago

quarterto 12y ago
The main thing that drove me back to Chrome for web dev was the performance. Firefox would hang for ~30 seconds trying to load source maps for our 150+ modules. Since it's single-threaded, this locks up the entire UI every time our app loads with dev tools open. And if it pauses on an exception during this 30 seconds, good luck trying to do anything for the next five minutes.
- mnemonik 12y ago
  We had some source map performance issues a while back, but I fixed all the ones that were reported. If you have a test case and steps to reproduce, I'd love to take a look :)
  - quarterto 12y ago
    Don't have a minimal test case yet, I'm seeing it happen on a page with >150 files bundled into a single file with a base64 data URI source map. If the debugger is open on page load, it hangs for 30 seconds to a minute, but loads practically instantly if I open the debugger after page load. Is there an existing bug I can chime in on or should I report a new one?
    - mnemonik 12y ago
      New one, please: https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Developer%20Tools%3A%20Debugger https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&c... I understand if your app is proprietary and you can't share the source, but even non-minimal test cases are much better than no test case :) Thanks!
      - quarterto 12y ago
        https://bugzilla.mozilla.org/show_bug.cgi?id=1007565 https://bugzilla.mozilla.org/show_bug.cgi?id=1007565 Outside of my 10kloc app, I could only reproduce it with ~100 copies of jQuery, which is kind of a pathological case I guess.
        mnemonik 12y ago
        Thanks for taking the time to file the bug, this helps a lot!
- sergiotapia 12y ago
  I had the same performance issues and the latest stable version of Firefox resolved every bit of slowness I was experiencing. The totally surprised me, it felt like a different browser.
Sir_Cmpwn 12y ago
The add-on debugger is the big part of this update. Add-on dev is a pain in the ass on Firefox, and I hope this helps.
- Spittie 12y ago
  I agree. I don't have much experience, but writing an addon for Firefox was a pain. When debugging, it's a constant "cfx run", read cryptic output, close browser, try to fix, rinse and repeat. Compare it with Chrome where you can see the error, it show where the problem is and you can even edit/patch the addon live without having to restart the browser.
math0ne 12y ago
Really nice update, I love the little functionality tweaks like the color picker. This is the kind of thing that will get developers to choose one platform over the other for day to day dev work.
james33 12y ago
Wow, I'm really impressed with the strides Mozilla has been making on this front. Chrome has long had the best dev tools and is one of the reasons I hardly ever use Firefox anymore. Once these updates land it may be on par or even better. Excited to see true competition on the dev side of things now.
- simlevesque 12y ago
  You can use Aurora right now : http://www.mozilla.org/en-US/firefox/aurora/ http://www.mozilla.org/en-US/firefox/aurora/
- givan 12y ago
  Firebug is still unbeatable, chrome dev has a lot to catch up.
  - diggan 12y ago
    Long time ago I used Firebug. What do you see is better in Firebug than Chrome Devtools?
    - johnward 12y ago
      I think the chrome devs did a good job of incorporating the best firebug features. The things that I find better in Firebug are mostly add-ons. For example I work with xpath a lot so firepath work awesome and ties into firebug seamlessly. I haven't found a tool that works as well on chrome. I also wonder why Mozilla didn't attempt to acquire firebug instead of building their own tools from scratch?
      - mixedbit 12y ago
        Mozilla maintains firebug.
      - fournm 12y ago
        I believe Mozilla does manage Firebug, but the reason it isn't integrated as the main set of tools has to do with Firebug being much slower on complex pages?
nawitus 12y ago
Looks cool. Still waiting for the localStorage inspector. I don't know how one can live without it..
- dannysu 12y ago
  I missed it coming from Chrome, but you can see what's stored in localStorage for a particular site by bringing up the console and typing localStorage just like how a web app can access it. Don't know a way to see localStorage for everything like in Chrome, but I don't miss it anymore.
- jamii 12y ago
  https://addons.mozilla.org/en-US/firefox/addon/firestorage-plus/ https://addons.mozilla.org/en-US/firefox/addon/firestorage-p...
agapos 12y ago
That's a helluva lot of improvements they shipped in v31, I am impressed.
jolt 12y ago
Is it only on Mac it shows the actual status codes on the network tab? On Windows i have to hover the little icon in the first column, which is really annoying when I'm trying to figure out if my caching is working correctly.
- mnemonik 12y ago
  Sounds like your windows copy of firefox might be the main release channel. The numeric status codes have been in since 30 (currently Beta). You can hop on Aurora (or Beta, or Nightly, but Aurora is generally best for web devs), or just wait about 6 weeks for the next uplift. https://bugzilla.mozilla.org/show_bug.cgi?id=972054 https://bugzilla.mozilla.org/show_bug.cgi?id=972054
  - pbhjpbhj 12y ago
    Is there an Ubuntu repo for Aurora that I'm missing or do I need to use the tarball.
    - sp332 12y ago
      First Google result https://launchpad.net/~ubuntu-mozilla-daily/+archive/firefox-aurora https://launchpad.net/~ubuntu-mozilla-daily/+archive/firefox...
    - deleted 12y ago
      [deleted]
  - jolt 12y ago
    I see. Thank you!
enscr 12y ago
The editable box model & color picker are very useful. I wonder if the editor would one day catch up so that you do your development in the browser itself.
- mrspeaker 12y ago
  I made my first contribution to Firefox the other day... I downloaded the source on a whim, realised I could build and run it - so went to the bug tracker. There was a bug with the box model editor that if the labels were long (such as "auto") then they would overlap the borders. I made it so long labels will rotate 90 degrees (try it out, change the outside margin to "auto"). I'm pretty stoked that some code I wrote is in Firefox - seeing an advertised feature that I (in a small way) contributed to is pretty exciting!
  - thousande 12y ago
    Same. Credit to the team for great support and follow-ups. Some starting points for those who wants to contribute: * Quick start for devtools developers: https://wiki.mozilla.org/DevTools/Hacking https://wiki.mozilla.org/DevTools/Hacking * More general info: http://codefirefox.com/ http://codefirefox.com/ * bugs/tasks flagged as "mentored" is a good way to introduce your self to the code. Devtools mentored tasks: https://bugzilla.mozilla.org/buglist.cgi?j_top=OR&f1=component&o1=allwords&resolution=---&emailtype1=exact&status_whiteboard_type=allwordssubstr&emailassigned_to1=1&query_format=advanced&status_whiteboard=mentor%3D&bug_status=UNCONFIRMED&bug_status=NEW&bug_status=REOPENED&bug_status=VERIFIED&email1=nobody%40mozilla.org&v1=Developer%20Tools&product=Firefox&list_id=10112029 https://bugzilla.mozilla.org/buglist.cgi?j_top=OR&f1=compone... /Contributor
    - mnemonik 12y ago
      I have a huge smile on my face :) See also the Get Involved page for devtools: https://wiki.mozilla.org/DevTools/GetInvolved https://wiki.mozilla.org/DevTools/GetInvolved
  - tbassetto 12y ago
    Any chance of getting the bug ID? I am genuinely curious about the the changes made and the review process for such a bug :)
Dirlewanger 12y ago
Oh look, a bunch of updates to catch up to Chrome's tools again.
- aroman 12y ago
  Unless I'm sorely mistaken, that's very wrong. Does Chrome have in-REPL stack traces? An eyedropper tool? Multiple cursor support? Sure, the cURL copy thing and style support in the console were first implemented in WebKit (not Chrome or Blink), but I think most of these features are leapfrogging Chrome's capabilities, not only attaining parity.
  - magicalist 12y ago
    > Does Chrome have in-REPL stack traces? An eyedropper tool? Multiple cursor support? Yes, No, Yes (both get multi-cursor from CodeMirror 4) > Sure, the cURL copy thing and style support in the console were first implemented in WebKit (not Chrome or Blink) small correction: that predates Blink[1] so there's wasn't a distinction between WebKit's Web Inspector and Chrome DevTools back then. Personally my favorite thing unique to Firefox DevTools is their built-in WebGL debugger, which seems to have gotten a lot more attention from them than Chrome's experimental Canvas Inspection which has some similar aspects. Supporting it helps probably .1% of the number of developers needing better CSS tools and whatnot, so I understand the prioritization, but it's still an awesome tool for those of us who do need it. [1] https://bugs.webkit.org/show_bug.cgi?id=107276 https://bugs.webkit.org/show_bug.cgi?id=107276
- presootto 12y ago
  Firefox is Free software, Chrome is proprietary and made by the company that employs this guy: http://mostlysignssomeportents.tumblr.com/post/84829703425/reminder-eric-schmidt-is-an-apologist-for-war http://mostlysignssomeportents.tumblr.com/post/84829703425/r... I know what I'd choose.
  - quarterto 12y ago
    Chromium is open source.
tracker1 12y ago
I was surprised when I first saw Copy as cURL in Chrome... and very happy to see it here. It makes for a great base test case... now if the api client tools would only take one of these curl commands and set the settings for a request. I think it's almost funny, but a cURL command line could become the common interface for many tools.
- canadev 12y ago
  Very happy to see Copy as cURL. Just wrote a crappy script to make copy-pasted cookies from the request window into curl parameters two days ago. I am sure I will use this quite frequently.
- __david__ 12y ago
  There's a really nice add-on for Firefox called "cliget" that adds a "copy as curl" (or wget) menu item when you right click any link in the browser. I find it heavenly when I need to download something that needs authentication to a remote server.
anilshanbhag 12y ago
Most of the new tools are tiny feature additions eg: the box model editing, copy as curl but will save ton of dev time wasted in doing it the old way. FF for the win :D
abvdasker 12y ago
That "copy as cURL" thing is absolutely brilliant.
- sampk 12y ago
  Yeah Chrome Dev Tools have supported that since a while now, found it very useful.
- thousande 12y ago
  Chrome and Firebug has this too.
diegocr 12y ago
An awesome list of enhancements. Something not mentioned there is that the window.onerror function has a new "error obj" parameter with the stacktrace, which i found quite handy.
usaphp 12y ago
Just installed it from Aurora channel. I have not used firefox for couple years now (moved to Chrome) but I think I will jump back now. The only thing in dev tools missing so far for me compared to Chrome is :before and :after pseudo elements, I love how Chrome dev tools shows it as a separate entity in the inspector tree. I hope FF team implements it as well.
- pytrin 12y ago
  Firebug gives you the option to toggle all pseudo states for an element and edit its CSS. IMO Firebug and Chrome's dev tools still lag behind Firebug's.
  - Excavator 12y ago
    This might be Nightly only. But in the Inspector pane of the Firefox dev tools you can right-click elements to set their focus/active/hover states. Doing so will also update the pane to the right showing any state specific rules that now applies.
- mnemonik 12y ago
  We have it in the sidebar but not the tree. Its coming though: https://bugzilla.mozilla.org/show_bug.cgi?id=920141 https://bugzilla.mozilla.org/show_bug.cgi?id=920141
- mundanevoice 12y ago
  Do you see the live editing of JS and on save they getting executed in a VM? I think it is pretty rad and not present in FF devtools at all. Please correct me if I am wrong.
- Garbage 12y ago
  That's good to hear. I have been using Firefox Nightly since quite a few months now. It's impressive. :)
tieTYT 12y ago
> Console stack traces > console.error, console.exception, and console.assert logs in the console now include the full stack from where the call was made But what about if I use `new Error("something");` ? That's how I let errors bubble up in my app. Am I doing it wrong? According to this, that won't show a stack trace.
- adrusi 12y ago
  Well that already shows a stack trace. it's not mentioned here because it's not a new feature.
yawz 12y ago
Great stuff! Copy as cURL is very cool.
Dean_M 12y ago
The new firefox dev tools are sexy af
Cymen 12y ago
Is there a way to get the same type of JavaScript decompressor as present in Google Chrome? I know there is a plugin for this but it doesn't do the most important: when you decompress the JavaScript, the console file:line details match the decompressed code. So you can click to jump to legible JavaScript when debugging.
hendry 12y ago
Would be nice if there was a sane way to take a screenshot. https://bbs.archlinux.org/viewtopic.php?pid=1412466 https://bbs.archlinux.org/viewtopic.php?pid=1412466
- agapos 12y ago
  ScreenGrab (fixed) add-on: https://addons.mozilla.org/hu/firefox/addon/screengrab-fix-version/ https://addons.mozilla.org/hu/firefox/addon/screengrab-fix-v... Developer toolbar 'screenshot' command: http://www.ghacks.net/2012/11/02/take-screenshots-straight-from-firefoxs-developer-toolbar/ http://www.ghacks.net/2012/11/02/take-screenshots-straight-f... | https://developer.mozilla.org/en-US/docs/Tools/GCLI#Commands https://developer.mozilla.org/en-US/docs/Tools/GCLI#Commands
yeukhon 12y ago
The only thing left in my wish list is the abililty to edit JS code on a website live and compile it. Chrome has that but Firefox still doesn't have it yet. https://bugzilla.mozilla.org/show_bug.cgi?id=771339 https://bugzilla.mozilla.org/show_bug.cgi?id=771339
aleem 12y ago
I tried Firefox debugger yesterday when one of the ads on one of the sites I managed somehow created a rogue redirect. The ad cached the redirect response in the browser, so on subsequent requests the browser continued to redirect without making a trip to the server. We happened to catch the error on FireFox on one of the machines and attempted to debug it there. The first problem was that the requests never showed up in the network tab. I typed in the URL with the network tab set to persistent and hoped that I would see the redirect response header in the network tab. But it never showed up. It loaded directly from cache I presume but it should still have showed up in the network tab or somewhere to allow debugging. I looked into the cache next and saw that the cached copy of the page contained a single script loading code (I presume this was what got cached for the page). Copying the HMTL from the cache page was fairly annoying. You can't copy the entire text because it's setup as HEX+HTML side-by-side. The HTML version replaces spaces with dots which means you pretty much can't copy it. Lastly, it would also be nice to prevent the developer tools from closing when a window self closes. Also, it would be nice to be able to manage cookies in the developer tools. Another thing I find annoying is that FF/Chrome both don't have a cookie debugger. There are plenty of add-ons but I am not sure why it's not part of the core developer tools. Would be nice to have.
- Excavator 12y ago
  What sort of cookie debugging? Seeing the cookies being sent for each request in the Network panel isn't enough?
  - aleem 12y ago
    I'd like to be able to add/edit and temporarily disable select cookies for a domain or sub domain.
talmand 12y ago
What I've learned from this thread: Every example of dev tools have their pluses and minuses, but all of them are great in their own way. Everybody has their favorite for whatever specific reasons they have which is usually based off their individual workflow. One developer's useless dev tools is another's life saver. Too many people latch onto one way of doing things and don't experiment that much to see what's going on in another tool set. Give Firefox/Chrome/Firebug dev tools a try. If it works out great! If it doesn't, well that's great too because you still have what you were happy with before. I just try to forget the dark days before Firebug.

420 points by rnyman 12y ago

The main thing that drove me back to Chrome for web dev was the performance. Firefox would hang for ~30 seconds trying to load source maps for our 150+ modules. Since it's single-threaded, this locks up the entire UI every time our app loads with dev tools open. And if it pauses on an exception during this 30 seconds, good luck trying to do anything for the next five minutes.

mnemonik 12y ago
We had some source map performance issues a while back, but I fixed all the ones that were reported. If you have a test case and steps to reproduce, I'd love to take a look :)
- quarterto 12y ago
  Don't have a minimal test case yet, I'm seeing it happen on a page with >150 files bundled into a single file with a base64 data URI source map. If the debugger is open on page load, it hangs for 30 seconds to a minute, but loads practically instantly if I open the debugger after page load. Is there an existing bug I can chime in on or should I report a new one?
  - mnemonik 12y ago
    New one, please: https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Developer%20Tools%3A%20Debugger https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&c... I understand if your app is proprietary and you can't share the source, but even non-minimal test cases are much better than no test case :) Thanks!
    - quarterto 12y ago
      https://bugzilla.mozilla.org/show_bug.cgi?id=1007565 https://bugzilla.mozilla.org/show_bug.cgi?id=1007565 Outside of my 10kloc app, I could only reproduce it with ~100 copies of jQuery, which is kind of a pathological case I guess.
      - mnemonik 12y ago
        Thanks for taking the time to file the bug, this helps a lot!
sergiotapia 12y ago
I had the same performance issues and the latest stable version of Firefox resolved every bit of slowness I was experiencing. The totally surprised me, it felt like a different browser.

Sir_Cmpwn 12y ago

The add-on debugger is the big part of this update. Add-on dev is a pain in the ass on Firefox, and I hope this helps.

Spittie 12y ago
I agree. I don't have much experience, but writing an addon for Firefox was a pain. When debugging, it's a constant "cfx run", read cryptic output, close browser, try to fix, rinse and repeat. Compare it with Chrome where you can see the error, it show where the problem is and you can even edit/patch the addon live without having to restart the browser.

math0ne 12y ago

Really nice update, I love the little functionality tweaks like the color picker. This is the kind of thing that will get developers to choose one platform over the other for day to day dev work.

james33 12y ago

Wow, I'm really impressed with the strides Mozilla has been making on this front. Chrome has long had the best dev tools and is one of the reasons I hardly ever use Firefox anymore. Once these updates land it may be on par or even better. Excited to see true competition on the dev side of things now.

simlevesque 12y ago
You can use Aurora right now : http://www.mozilla.org/en-US/firefox/aurora/ http://www.mozilla.org/en-US/firefox/aurora/
givan 12y ago
Firebug is still unbeatable, chrome dev has a lot to catch up.
- diggan 12y ago
  Long time ago I used Firebug. What do you see is better in Firebug than Chrome Devtools?
  - johnward 12y ago
    I think the chrome devs did a good job of incorporating the best firebug features. The things that I find better in Firebug are mostly add-ons. For example I work with xpath a lot so firepath work awesome and ties into firebug seamlessly. I haven't found a tool that works as well on chrome. I also wonder why Mozilla didn't attempt to acquire firebug instead of building their own tools from scratch?
    - mixedbit 12y ago
      Mozilla maintains firebug.
    - fournm 12y ago
      I believe Mozilla does manage Firebug, but the reason it isn't integrated as the main set of tools has to do with Firebug being much slower on complex pages?

nawitus 12y ago

Looks cool. Still waiting for the localStorage inspector. I don't know how one can live without it..

dannysu 12y ago
I missed it coming from Chrome, but you can see what's stored in localStorage for a particular site by bringing up the console and typing localStorage just like how a web app can access it. Don't know a way to see localStorage for everything like in Chrome, but I don't miss it anymore.
jamii 12y ago
https://addons.mozilla.org/en-US/firefox/addon/firestorage-plus/ https://addons.mozilla.org/en-US/firefox/addon/firestorage-p...

agapos 12y ago

That's a helluva lot of improvements they shipped in v31, I am impressed.

jolt 12y ago

Is it only on Mac it shows the actual status codes on the network tab? On Windows i have to hover the little icon in the first column, which is really annoying when I'm trying to figure out if my caching is working correctly.

mnemonik 12y ago
Sounds like your windows copy of firefox might be the main release channel. The numeric status codes have been in since 30 (currently Beta). You can hop on Aurora (or Beta, or Nightly, but Aurora is generally best for web devs), or just wait about 6 weeks for the next uplift. https://bugzilla.mozilla.org/show_bug.cgi?id=972054 https://bugzilla.mozilla.org/show_bug.cgi?id=972054
- pbhjpbhj 12y ago
  Is there an Ubuntu repo for Aurora that I'm missing or do I need to use the tarball.
  - sp332 12y ago
    First Google result https://launchpad.net/~ubuntu-mozilla-daily/+archive/firefox-aurora https://launchpad.net/~ubuntu-mozilla-daily/+archive/firefox...
  - deleted 12y ago
    [deleted]
- jolt 12y ago
  I see. Thank you!

enscr 12y ago

The editable box model & color picker are very useful. I wonder if the editor would one day catch up so that you do your development in the browser itself.

mrspeaker 12y ago
I made my first contribution to Firefox the other day... I downloaded the source on a whim, realised I could build and run it - so went to the bug tracker. There was a bug with the box model editor that if the labels were long (such as "auto") then they would overlap the borders. I made it so long labels will rotate 90 degrees (try it out, change the outside margin to "auto"). I'm pretty stoked that some code I wrote is in Firefox - seeing an advertised feature that I (in a small way) contributed to is pretty exciting!
- thousande 12y ago
  Same. Credit to the team for great support and follow-ups. Some starting points for those who wants to contribute: * Quick start for devtools developers: https://wiki.mozilla.org/DevTools/Hacking https://wiki.mozilla.org/DevTools/Hacking * More general info: http://codefirefox.com/ http://codefirefox.com/ * bugs/tasks flagged as "mentored" is a good way to introduce your self to the code. Devtools mentored tasks: https://bugzilla.mozilla.org/buglist.cgi?j_top=OR&f1=component&o1=allwords&resolution=---&emailtype1=exact&status_whiteboard_type=allwordssubstr&emailassigned_to1=1&query_format=advanced&status_whiteboard=mentor%3D&bug_status=UNCONFIRMED&bug_status=NEW&bug_status=REOPENED&bug_status=VERIFIED&email1=nobody%40mozilla.org&v1=Developer%20Tools&product=Firefox&list_id=10112029 https://bugzilla.mozilla.org/buglist.cgi?j_top=OR&f1=compone... /Contributor
  - mnemonik 12y ago
    I have a huge smile on my face :) See also the Get Involved page for devtools: https://wiki.mozilla.org/DevTools/GetInvolved https://wiki.mozilla.org/DevTools/GetInvolved
- tbassetto 12y ago
  Any chance of getting the bug ID? I am genuinely curious about the the changes made and the review process for such a bug :)

Dirlewanger 12y ago

Oh look, a bunch of updates to catch up to Chrome's tools again.

aroman 12y ago
Unless I'm sorely mistaken, that's very wrong. Does Chrome have in-REPL stack traces? An eyedropper tool? Multiple cursor support? Sure, the cURL copy thing and style support in the console were first implemented in WebKit (not Chrome or Blink), but I think most of these features are leapfrogging Chrome's capabilities, not only attaining parity.
- magicalist 12y ago
  > Does Chrome have in-REPL stack traces? An eyedropper tool? Multiple cursor support? Yes, No, Yes (both get multi-cursor from CodeMirror 4) > Sure, the cURL copy thing and style support in the console were first implemented in WebKit (not Chrome or Blink) small correction: that predates Blink[1] so there's wasn't a distinction between WebKit's Web Inspector and Chrome DevTools back then. Personally my favorite thing unique to Firefox DevTools is their built-in WebGL debugger, which seems to have gotten a lot more attention from them than Chrome's experimental Canvas Inspection which has some similar aspects. Supporting it helps probably .1% of the number of developers needing better CSS tools and whatnot, so I understand the prioritization, but it's still an awesome tool for those of us who do need it. [1] https://bugs.webkit.org/show_bug.cgi?id=107276 https://bugs.webkit.org/show_bug.cgi?id=107276
presootto 12y ago
Firefox is Free software, Chrome is proprietary and made by the company that employs this guy: http://mostlysignssomeportents.tumblr.com/post/84829703425/reminder-eric-schmidt-is-an-apologist-for-war http://mostlysignssomeportents.tumblr.com/post/84829703425/r... I know what I'd choose.
- quarterto 12y ago
  Chromium is open source.

tracker1 12y ago

I was surprised when I first saw Copy as cURL in Chrome... and very happy to see it here. It makes for a great base test case... now if the api client tools would only take one of these curl commands and set the settings for a request. I think it's almost funny, but a cURL command line could become the common interface for many tools.

canadev 12y ago
Very happy to see Copy as cURL. Just wrote a crappy script to make copy-pasted cookies from the request window into curl parameters two days ago. I am sure I will use this quite frequently.
__david__ 12y ago
There's a really nice add-on for Firefox called "cliget" that adds a "copy as curl" (or wget) menu item when you right click any link in the browser. I find it heavenly when I need to download something that needs authentication to a remote server.

anilshanbhag 12y ago

Most of the new tools are tiny feature additions eg: the box model editing, copy as curl but will save ton of dev time wasted in doing it the old way. FF for the win :D

abvdasker 12y ago

That "copy as cURL" thing is absolutely brilliant.

sampk 12y ago
Yeah Chrome Dev Tools have supported that since a while now, found it very useful.
thousande 12y ago
Chrome and Firebug has this too.

diegocr 12y ago

An awesome list of enhancements. Something not mentioned there is that the window.onerror function has a new "error obj" parameter with the stacktrace, which i found quite handy.

usaphp 12y ago

Just installed it from Aurora channel. I have not used firefox for couple years now (moved to Chrome) but I think I will jump back now. The only thing in dev tools missing so far for me compared to Chrome is :before and :after pseudo elements, I love how Chrome dev tools shows it as a separate entity in the inspector tree. I hope FF team implements it as well.

pytrin 12y ago
Firebug gives you the option to toggle all pseudo states for an element and edit its CSS. IMO Firebug and Chrome's dev tools still lag behind Firebug's.
- Excavator 12y ago
  This might be Nightly only. But in the Inspector pane of the Firefox dev tools you can right-click elements to set their focus/active/hover states. Doing so will also update the pane to the right showing any state specific rules that now applies.
mnemonik 12y ago
We have it in the sidebar but not the tree. Its coming though: https://bugzilla.mozilla.org/show_bug.cgi?id=920141 https://bugzilla.mozilla.org/show_bug.cgi?id=920141
mundanevoice 12y ago
Do you see the live editing of JS and on save they getting executed in a VM? I think it is pretty rad and not present in FF devtools at all. Please correct me if I am wrong.
Garbage 12y ago
That's good to hear. I have been using Firefox Nightly since quite a few months now. It's impressive. :)

tieTYT 12y ago

> Console stack traces > console.error, console.exception, and console.assert logs in the console now include the full stack from where the call was made But what about if I use `new Error("something");` ? That's how I let errors bubble up in my app. Am I doing it wrong? According to this, that won't show a stack trace.

adrusi 12y ago
Well that already shows a stack trace. it's not mentioned here because it's not a new feature.

yawz 12y ago

Great stuff! Copy as cURL is very cool.

Dean_M 12y ago

The new firefox dev tools are sexy af

Cymen 12y ago

Is there a way to get the same type of JavaScript decompressor as present in Google Chrome? I know there is a plugin for this but it doesn't do the most important: when you decompress the JavaScript, the console file:line details match the decompressed code. So you can click to jump to legible JavaScript when debugging.

hendry 12y ago

Would be nice if there was a sane way to take a screenshot. https://bbs.archlinux.org/viewtopic.php?pid=1412466 https://bbs.archlinux.org/viewtopic.php?pid=1412466

agapos 12y ago
ScreenGrab (fixed) add-on: https://addons.mozilla.org/hu/firefox/addon/screengrab-fix-version/ https://addons.mozilla.org/hu/firefox/addon/screengrab-fix-v... Developer toolbar 'screenshot' command: http://www.ghacks.net/2012/11/02/take-screenshots-straight-from-firefoxs-developer-toolbar/ http://www.ghacks.net/2012/11/02/take-screenshots-straight-f... | https://developer.mozilla.org/en-US/docs/Tools/GCLI#Commands https://developer.mozilla.org/en-US/docs/Tools/GCLI#Commands

yeukhon 12y ago

The only thing left in my wish list is the abililty to edit JS code on a website live and compile it. Chrome has that but Firefox still doesn't have it yet. https://bugzilla.mozilla.org/show_bug.cgi?id=771339 https://bugzilla.mozilla.org/show_bug.cgi?id=771339

aleem 12y ago

I tried Firefox debugger yesterday when one of the ads on one of the sites I managed somehow created a rogue redirect. The ad cached the redirect response in the browser, so on subsequent requests the browser continued to redirect without making a trip to the server. We happened to catch the error on FireFox on one of the machines and attempted to debug it there. The first problem was that the requests never showed up in the network tab. I typed in the URL with the network tab set to persistent and hoped that I would see the redirect response header in the network tab. But it never showed up. It loaded directly from cache I presume but it should still have showed up in the network tab or somewhere to allow debugging. I looked into the cache next and saw that the cached copy of the page contained a single script loading code (I presume this was what got cached for the page). Copying the HMTL from the cache page was fairly annoying. You can't copy the entire text because it's setup as HEX+HTML side-by-side. The HTML version replaces spaces with dots which means you pretty much can't copy it. Lastly, it would also be nice to prevent the developer tools from closing when a window self closes. Also, it would be nice to be able to manage cookies in the developer tools. Another thing I find annoying is that FF/Chrome both don't have a cookie debugger. There are plenty of add-ons but I am not sure why it's not part of the core developer tools. Would be nice to have.

Excavator 12y ago
What sort of cookie debugging? Seeing the cookies being sent for each request in the Network panel isn't enough?
- aleem 12y ago
  I'd like to be able to add/edit and temporarily disable select cookies for a domain or sub domain.

talmand 12y ago

What I've learned from this thread: Every example of dev tools have their pluses and minuses, but all of them are great in their own way. Everybody has their favorite for whatever specific reasons they have which is usually based off their individual workflow. One developer's useless dev tools is another's life saver. Too many people latch onto one way of doing things and don't experiment that much to see what's going on in another tool set. Give Firefox/Chrome/Firebug dev tools a try. If it works out great! If it doesn't, well that's great too because you still have what you were happy with before. I just try to forget the dark days before Firebug.