4 ms·

I use Chrome or Firefox built in developer tools, however I still think Firebug fits my workflow the best. Unfortunately it's too slow to use. The thing I miss

I use Chrome or Firefox built in developer tools, however I still think Firebug fits my workflow the best. Unfortunately it's too slow to use. The thing I miss the most is the inline display of AJAX call responses, and being able to write/run multi-line snippets of JavaScript (without ctrl+enter). Somewhat interestingly, Firefox built their entire add-on architecture because Joe Hewitt wanted dev tools (for debugging the actual browser moreso than websites), and Firebug was split off from Firefox and made into an add-on. A decade later, this has reversed and every major browser now ships with integrated dev tools.

sroussey 12y ago
"too slow to use" -- it now uses JSD2, which is much faster. So you may want to give a try again, as your previous experience may no longer be valid on this point.
- RussianCow 12y ago
  I just played around with it, and 2.0 is indeed much faster. Seems on par with other dev tools now.
dfc 12y ago
I hate the fact that the close window/dialog button for the devtools is on the left hand side when every other plugin puts this on the right hand side. I am not an every day user of FF's built in devtools so it is not something that I am accustomed to. Despite firebug's performance troubles when I go to select devtools or firebug I usually opt for firebug simply because the close button drives me nuts.
- joewalker 12y ago
  We moved the button and a number of the tabs in Firefox devtools to be more like the order in Firebug and Chrome devtools. Here's a screenshot from current Nightly: https://i.imgur.com/EmVIZYO.png https://i.imgur.com/EmVIZYO.png
  - dfc 12y ago
    Nice. I am running the aurora release on this machine so it is still on the left. I cant wait to have button sanity. Thank you for your efforts. http://i.imgur.com/W9Z5jBJ.png http://i.imgur.com/W9Z5jBJ.png
  - invmatt 12y ago
    New devtools are much improved however would it be possible to remove the dotted lines whilst inspecting an element (toggled option would be fine), just seems to get in the way of things.
- u124556 12y ago
  Are you on a mac? I just tried and the close button is on the right.
  - alcari 12y ago
    In that case, it's still backwards, because the normal close button on OSX is on the left.
anykey 12y ago
Re: the multi-line JS stuff in Chrome, there's snippets! https://developer.chrome.com/devtools/docs/authoring-development-workflow#snippets https://developer.chrome.com/devtools/docs/authoring-develop... Probably not 100% what you wanted, but they're really handy for sketching out code fragments.
- mnemonik 12y ago
  And for Firefox Developer Tools, we have the Scratchpad. I like ours better due to the keyboard shortcuts for eval/display/inspect/re-eval function/etc, but I may be biased ;) https://developer.mozilla.org/en-US/docs/Tools/Scratchpad https://developer.mozilla.org/en-US/docs/Tools/Scratchpad Much of the new JS that I write these days starts as a scratchpad that I evolve over many iterations, right in the browser.
batuhanicoz 12y ago
> The thing I miss the most is the inline display of AJAX call responses If I understood correctly, you can have this on Chrome. In Chrome JS Console, do a right click in an empty space, and select "Log XMLHTTPRequests" (or it was something similar).
- interurban 12y ago
  You can enable XHR logging in the settings panel as well.
- gkoberger 12y ago
  I have the enabled, however it only shows the URL accessed. To see the actual response, you have to click the URL, which takes you to the Network panel. Then you have to find the request on the Network panel (no clue why it doesn't deep link to the correct tab), then click Response.
- kyriakos 12y ago
  that works but still not as good as firebug's UI. basically you then need to click on the log entry, it will take you to the network panel and then you need to do another click to view the actual data. firebug has it all there in JSON decoded form and HTML its more convenient and requires a single click.
- mistermann 12y ago
  Shamelessly hijacking your comment to ask a question....is there any way (Chrome/Firebug, whatever) to somehow output to console or a log, all javascript execution (ie: as any function is executed, output the function name and the argument values). I know there is some way to turn on debugging and breakpoints, but having very little expertise in javascript and no knowledge of the code I'm looking at, the ability to just dump all activity so I could sift through it later would be tremendously useful.
  - db48x 12y ago
    Alas, no. Common Lisp has this, and its very nice. http://www.lispworks.com/documentation/HyperSpec/Body/m_tracec.htm#trace http://www.lispworks.com/documentation/HyperSpec/Body/m_trac...
frik 12y ago
Firebug 1.x (only with activated "Scripts" tab) is only slow in newer version of Firefox. http://www.reddit.com/r/firefox/comments/1f4u9x/firebug_makes_firefox_10000_times_slower/ http://www.reddit.com/r/firefox/comments/1f4u9x/firebug_make... I read that Firebug 2 now uses the newer JSDBG2 API of recent Firefox, so there should be no performance problems as there were with Firebug 1.x in recent Firefox versions.
snarfy 12y ago
I hate that I have to use both. If I right click and inspect element on your username, and then search for 'gkoberger', firefox shows zero matches because it doesn't search attributes. At the time of this posting, chrome finds four matches. It's little stuff like that which drives me crazy.

sroussey 12y ago

"too slow to use" -- it now uses JSD2, which is much faster. So you may want to give a try again, as your previous experience may no longer be valid on this point.

RussianCow 12y ago
I just played around with it, and 2.0 is indeed much faster. Seems on par with other dev tools now.

dfc 12y ago

I hate the fact that the close window/dialog button for the devtools is on the left hand side when every other plugin puts this on the right hand side. I am not an every day user of FF's built in devtools so it is not something that I am accustomed to. Despite firebug's performance troubles when I go to select devtools or firebug I usually opt for firebug simply because the close button drives me nuts.

joewalker 12y ago
We moved the button and a number of the tabs in Firefox devtools to be more like the order in Firebug and Chrome devtools. Here's a screenshot from current Nightly: https://i.imgur.com/EmVIZYO.png https://i.imgur.com/EmVIZYO.png
- dfc 12y ago
  Nice. I am running the aurora release on this machine so it is still on the left. I cant wait to have button sanity. Thank you for your efforts. http://i.imgur.com/W9Z5jBJ.png http://i.imgur.com/W9Z5jBJ.png
- invmatt 12y ago
  New devtools are much improved however would it be possible to remove the dotted lines whilst inspecting an element (toggled option would be fine), just seems to get in the way of things.
u124556 12y ago
Are you on a mac? I just tried and the close button is on the right.
- alcari 12y ago
  In that case, it's still backwards, because the normal close button on OSX is on the left.

anykey 12y ago

Re: the multi-line JS stuff in Chrome, there's snippets! https://developer.chrome.com/devtools/docs/authoring-development-workflow#snippets https://developer.chrome.com/devtools/docs/authoring-develop... Probably not 100% what you wanted, but they're really handy for sketching out code fragments.

mnemonik 12y ago
And for Firefox Developer Tools, we have the Scratchpad. I like ours better due to the keyboard shortcuts for eval/display/inspect/re-eval function/etc, but I may be biased ;) https://developer.mozilla.org/en-US/docs/Tools/Scratchpad https://developer.mozilla.org/en-US/docs/Tools/Scratchpad Much of the new JS that I write these days starts as a scratchpad that I evolve over many iterations, right in the browser.

batuhanicoz 12y ago

> The thing I miss the most is the inline display of AJAX call responses If I understood correctly, you can have this on Chrome. In Chrome JS Console, do a right click in an empty space, and select "Log XMLHTTPRequests" (or it was something similar).

interurban 12y ago
You can enable XHR logging in the settings panel as well.
gkoberger 12y ago
I have the enabled, however it only shows the URL accessed. To see the actual response, you have to click the URL, which takes you to the Network panel. Then you have to find the request on the Network panel (no clue why it doesn't deep link to the correct tab), then click Response.
kyriakos 12y ago
that works but still not as good as firebug's UI. basically you then need to click on the log entry, it will take you to the network panel and then you need to do another click to view the actual data. firebug has it all there in JSON decoded form and HTML its more convenient and requires a single click.
mistermann 12y ago
Shamelessly hijacking your comment to ask a question....is there any way (Chrome/Firebug, whatever) to somehow output to console or a log, all javascript execution (ie: as any function is executed, output the function name and the argument values). I know there is some way to turn on debugging and breakpoints, but having very little expertise in javascript and no knowledge of the code I'm looking at, the ability to just dump all activity so I could sift through it later would be tremendously useful.
- db48x 12y ago
  Alas, no. Common Lisp has this, and its very nice. http://www.lispworks.com/documentation/HyperSpec/Body/m_tracec.htm#trace http://www.lispworks.com/documentation/HyperSpec/Body/m_trac...

frik 12y ago

Firebug 1.x (only with activated "Scripts" tab) is only slow in newer version of Firefox. http://www.reddit.com/r/firefox/comments/1f4u9x/firebug_makes_firefox_10000_times_slower/ http://www.reddit.com/r/firefox/comments/1f4u9x/firebug_make... I read that Firebug 2 now uses the newer JSDBG2 API of recent Firefox, so there should be no performance problems as there were with Firebug 1.x in recent Firefox versions.

snarfy 12y ago

I hate that I have to use both. If I right click and inspect element on your username, and then search for 'gkoberger', firefox shows zero matches because it doesn't search attributes. At the time of this posting, chrome finds four matches. It's little stuff like that which drives me crazy.