Firebug and DevTools Integration(hacks.mozilla.org)
hacks.mozilla.org
Firebug and DevTools Integration
https://hacks.mozilla.org/2015/10/firebug-devtools-integration/
36 comments
Jan Odvarko, the author of this post, is a Mozilla employee working on Firebug and related projects. He has worked for Mozilla for 4+ years and is paid to maintain / improve Firebug.
Cookie editing is still missing. Without this feature a wider adoption of FF dev tools or its full utility as a wedev tool is impossible.
Yes, I voted for https://bugzilla.mozilla.org/show_bug.cgi?id=1031192. Please do the same. Thanks.
You can edit cookies with the "Developer Toolbar". It's under "Tools -> Web Developer" and reachable with the shortcut "Shift+F2". It's not brilliant but it works well.
I second that. The GCLI is pretty awesome. It is a huge work in progress but still works pretty neat.
Here is the entire documentation: https://developer.mozilla.org/en-US/docs/Tools/GCLI#Commands (links to list of commands, I suggest reading the entire page).
The best part is that it is extensible (Scratchpad FTW!) :)
Here is the entire documentation: https://developer.mozilla.org/en-US/docs/Tools/GCLI#Commands (links to list of commands, I suggest reading the entire page).
The best part is that it is extensible (Scratchpad FTW!) :)
The 'security' command is also a really nice tool to tweak your page:
https://developer.mozilla.org/en-US/docs/Tools/GCLI/Display_...
You can use https://addons.mozilla.org/en-US/firefox/addon/cookies-manag... which has a great UI for editing cookies, and the permanent search filter that will limit shown cookies to the matching domain(s)
Thanks. I'd rather use Chrome dev tools for now.
Thanks for voting - I agree this is a critical gap but I have high hopes to get it fixed very soon.
I keep an old copy of Firefox around just so I can have Firebug 2.
Here's what I'd like DevTools to do:
* Make a breakpoints view, not one embedded into a massive list of unsorted (or sorted-by-load-date I guess?!) files that changes over time. If that can't be done (or is against the design philosophy of DevTools), letting me choose the sort order would be nice (e.g. recently-viewed files first, or files with breakpoints, etc ..... and uh, remembering those files and/or settings through refreshes would be fantastic... I miss it from Firebug 2). It's nice because after/during refreshes the breakpoint view lets you pull up the file the second it's loaded, instead of scrolling around in the file list until you find it.
* Make it a LOT more obvious when DevTools is stopped at a breakpoint.
* DevTools doesn't handle initial focus the way Firebug does. As in, when you pull up Firebug via the selection icon--oh, DevTools needs that selection icon for the toolbar--it goes straight to the dom node you selected.
* Make DevTools stop crashing. It stops working. Constantly. The console will just stop printing output, and the DOM view just stops displaying HTML, requiring a browser restart. (When this happens, if you, say, pull up the console and type "1" and hit enter, usually the console echos "1" back to you. When you're in this state, it's not echoed back, though, oddly, some script messages still pop in.)
* Make "debugger" start working again. There are some places where--for who knows what reason--both Firebug and DevTools have ignored breakpoints I've put in, and I've been able to get around it in Firebug by explicitly putting in "debugger;" into my code. You definitely know you're in deep kimchi when you need "debugger;".
* Make DevTools remember the state of my "Log Response/Request Bodies" checkbox. It gets reset constantly, and it should be remembered across refreshes. Heck, even by URL. If I turn it on, leave it on.
Also, for one of my websites, it can't load the source. It just shows "eval" as the filenames over and over with nothing in them. Firebug 2 loads it just fine.
Long live Firebug 2!
Here's what I'd like DevTools to do:
* Make a breakpoints view, not one embedded into a massive list of unsorted (or sorted-by-load-date I guess?!) files that changes over time. If that can't be done (or is against the design philosophy of DevTools), letting me choose the sort order would be nice (e.g. recently-viewed files first, or files with breakpoints, etc ..... and uh, remembering those files and/or settings through refreshes would be fantastic... I miss it from Firebug 2). It's nice because after/during refreshes the breakpoint view lets you pull up the file the second it's loaded, instead of scrolling around in the file list until you find it.
* Make it a LOT more obvious when DevTools is stopped at a breakpoint.
* DevTools doesn't handle initial focus the way Firebug does. As in, when you pull up Firebug via the selection icon--oh, DevTools needs that selection icon for the toolbar--it goes straight to the dom node you selected.
* Make DevTools stop crashing. It stops working. Constantly. The console will just stop printing output, and the DOM view just stops displaying HTML, requiring a browser restart. (When this happens, if you, say, pull up the console and type "1" and hit enter, usually the console echos "1" back to you. When you're in this state, it's not echoed back, though, oddly, some script messages still pop in.)
* Make "debugger" start working again. There are some places where--for who knows what reason--both Firebug and DevTools have ignored breakpoints I've put in, and I've been able to get around it in Firebug by explicitly putting in "debugger;" into my code. You definitely know you're in deep kimchi when you need "debugger;".
* Make DevTools remember the state of my "Log Response/Request Bodies" checkbox. It gets reset constantly, and it should be remembered across refreshes. Heck, even by URL. If I turn it on, leave it on.
Also, for one of my websites, it can't load the source. It just shows "eval" as the filenames over and over with nothing in them. Firebug 2 loads it just fine.
Long live Firebug 2!
Oh, and DevTools doesn't honor my breakpoints. They "slide" down to the next line DevTools thinks it can actually stop on.
For one thing, the number of times it "slides" past valid code is shocking. Right now I'm looking at a perfectly boring JS file and the breakpoints are only stopping on the function declaration lines. The contents of the functions are being slid past. Once I restart my browser they'll work again.
For another, as a time-saver I put breakpoints on lines that /will/ be valid when I refresh (saves me from having to refresh the file twice), so it simply doing as I told it to do would be grand.
For one thing, the number of times it "slides" past valid code is shocking. Right now I'm looking at a perfectly boring JS file and the breakpoints are only stopping on the function declaration lines. The contents of the functions are being slid past. Once I restart my browser they'll work again.
For another, as a time-saver I put breakpoints on lines that /will/ be valid when I refresh (saves me from having to refresh the file twice), so it simply doing as I told it to do would be grand.
> There are some places where--for who knows what reason--both Firebug and DevTools have ignored breakpoints I've put in...
This might be because the js file you put them in is loaded with another URL and is therefore considered a different file (and therefore does not have your breakpoint). This is what I've experienced before.
This is a bs design, of course, and files should probably be compared via means other than URL.
This might be because the js file you put them in is loaded with another URL and is therefore considered a different file (and therefore does not have your breakpoint). This is what I've experienced before.
This is a bs design, of course, and files should probably be compared via means other than URL.
Sure, I get it, but when it happens you're just in a bad world and you can either try to put breakpoints in every copy of the file that Firebug/Devtools detects, or you can say *&$% it, and add "debugger;" in the file.
I still can't seem to view websocket frames with DevTools. It's the only thing I switch to Chrome dev tools for. Am I alone?
Platform support has landed in Firefox 44 and we're working on a prototype extension: https://github.com/firebug/websocket-monitor
Soon!
Soon!
I've started developing in FF because of the ability to not have all my chrome plugins installed everywhere, and the dev tools are pretty much there compared to chrome a few versions ago.
For performance inspection chrome is still the winner for sure, but when I just want a light fast experience, FF has been great the last few months.
For performance inspection chrome is still the winner for sure, but when I just want a light fast experience, FF has been great the last few months.
Can you expand on that first point? Do you mean that you'd prefer that your Chrome extensions not sync across different machines? Or that you just use a different browser when you want to work without a bunch of extensions enabled?
For the latter, you can create a new user[1] and switch to it for a different set of extensions or none at all, or you can just use an incognito window.
[1] https://support.google.com/chrome/answer/2364824?hl=en
For the latter, you can create a new user[1] and switch to it for a different set of extensions or none at all, or you can just use an incognito window.
[1] https://support.google.com/chrome/answer/2364824?hl=en
Sure! For "I'm a person who is also developer" browsing I have a variety of plugins installed that play havoc with the console normally. In FF I have "I'm working" plugins installed.
I'm aware that I can have different user, but I enjoy the ability to alt-tab obviously based on intent (FF is _always dev, not sometimes dev, sometimes life, or a collection of incognito windows that I then have to alt-~ through).
Though I'm weird about my browsers :-) I use Fluid "apps" (http://fluidapp.com/) for pretty much every site that I visit regularly and BrowserFairy (http://www.browserfairy.com/) to correctly send me to the correct "app" when clicking links.
I'm aware that I can have different user, but I enjoy the ability to alt-tab obviously based on intent (FF is _always dev, not sometimes dev, sometimes life, or a collection of incognito windows that I then have to alt-~ through).
Though I'm weird about my browsers :-) I use Fluid "apps" (http://fluidapp.com/) for pretty much every site that I visit regularly and BrowserFairy (http://www.browserfairy.com/) to correctly send me to the correct "app" when clicking links.
I second the mentioning and advocating of this feature. For my main Chrome user, I have StayFocusd installed, and its workings make themselves known in various debug outputs, so I switch to a stub user setup on Chrome when doing dev work. I also switch the theme so that I subconsciously associate the non-logged-in, green-colored browser with "hey, it's work time". On a separate user instance, I'm logged into Facebook but have otherwise thrown away the password...it's amazing how the friction of a simple clicks (it only takes a right-click to pop-open the available Chrome users, then left-click to select one) can almost by itself break the reflexive whim to check social media accounts.
Or, you can run Chrome(/ium) using a different profile subdirectory. Relevant commandline option:
--user-data-dir=/home/owner/.config/alternative-directory
> Firebug 3 is not another developer tool, it is rather a thin layer built on top of DevTools.
Why I feel it's terrible news?
I feel like this is a promise of less features for more bugs without any clear vision about why Firebug should be ditched in favor of DevTools.
Why I feel it's terrible news?
I feel like this is a promise of less features for more bugs without any clear vision about why Firebug should be ditched in favor of DevTools.
Here are two articles from last year articulating Mozilla's view on Firebug:
https://hacks.mozilla.org/2014/12/firebug-3-multiprocess-fir...
https://hacks.mozilla.org/2013/10/firefox-developer-tools-an...
https://hacks.mozilla.org/2013/10/firefox-developer-tools-an...
https://hacks.mozilla.org/2014/12/firebug-3-multiprocess-fir...
https://hacks.mozilla.org/2013/10/firefox-developer-tools-an...
https://hacks.mozilla.org/2013/10/firefox-developer-tools-an...
What really bother me with Firebug and Firefox-debugging is that I can't see when the debugger pauses my page.
So when I'm testing and the debugger fires, I'd still be clicking stuff on my page, wondering why it isn't responding.
So when I'm testing and the debugger fires, I'd still be clicking stuff on my page, wondering why it isn't responding.
I just checked and Debugger -> Sources is still a single alphabetical list. This makes it unusable on a non-trivial JavaScript app that will easily have 50+ modules.
there is a bug for this, please vote for it
Display the script sources in a collapsible folder tree rather than in a list
https://bugzilla.mozilla.org/show_bug.cgi?id=987685
Display the script sources in a collapsible folder tree rather than in a list
https://bugzilla.mozilla.org/show_bug.cgi?id=987685
There is no reason to still use Firebug in 2015 besides laziness.
Chrome is not the world, pal.
Firebug inspired all the current tools and it's great to see them still contributing to Mozilla's fight for the open web.
If you're supporting the Gecko rendering engine, using a tool to debug it is not laziness. Treating Chrome as the only game in town is laziness.
Firebug inspired all the current tools and it's great to see them still contributing to Mozilla's fight for the open web.
If you're supporting the Gecko rendering engine, using a tool to debug it is not laziness. Treating Chrome as the only game in town is laziness.
I think parent was talking about Firebug vs. the native Dev Tools. Nothing to do with Chrome.
I just imagined the next sentence would be something something Chrome...maybe I inferred too much.
Unix is about lots of tools coming together and so is the internet - if you don't like a tool fork it or go use something else. I don't understand grandstanding about it being antiquated or sucking when others find it useful and appreciate the development efforts.
Unix is about lots of tools coming together and so is the internet - if you don't like a tool fork it or go use something else. I don't understand grandstanding about it being antiquated or sucking when others find it useful and appreciate the development efforts.
In what regard?
Firebug has several little features that aren't available in FF DevTools nor Chrome DevTools. Let's hope Firebug 3 has no feature regression and stays around.
Which ones? Curious :)
Thanks Mozilla, exciting developments! I really enjoy the Firebug user experience, and am looking forward to having it be the frontend to the developer tools.
Sure you can drag the devtool out, but it still lives as part of the browser windows, and switching back and forth between several instances of browser windows? tough! I am not sure, but has Mozilla hired the folks behind Firebug already?