Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

What do you miss from Firebug?

274 views
Skip to first unread message

Patrick Brosset

unread,
Nov 21, 2016, 9:16:51 AM11/21/16
to dev-developer-tools
Hi DevTools users,

With electrolysis [1] slowly reaching more and more of the Firefox
population, Firebug is going away.
We've been preparing for this and have put in place a number of things
[2][3][4] to make sure Firebug users switching to Firefox DevTools would
have the best experience possible.

A lot of users are experiencing something else than Firebug for the first
time now, so now is a good time to ask again what people are missing from
Firebug that does not exist yet in the Firefox built-in tools.

If you are still using Firebug, what would you like to see implemented or
fixed in Firefox to help you migrate fully to the built-in tools?

To get people started, here's a list I have extracted from the "Firebug
Gaps" meta bug [5]:

- Toggling individual debugger statements in the debugger.
- Editing width and height in the box-model.
- Previewing attribute changes as you type in the inspector.
- DOM sidebar panel in the inspector.
- Breaking on XHR.
- Breaking on DOM mutations.
- Event sidebar panel in the inspector.
- Better console autocompletion.

Thanks for your help!
Patrick

[1] Multi-process firefox https://wiki.mozilla.org/Electrolysis
[2] https://hacks.mozilla.org/2015/10/firebug-devtools-integration/
[3]
https://blog.getfirebug.com/2016/02/08/merging-firebug-into-the-built-in-firefox-developer-tools/
[4]
https://blog.getfirebug.com/2016/06/07/unifying-firebug-firefox-devtools/
[5] https://bugzilla.mozilla.org/show_bug.cgi?id=991806

charles madison

unread,
Nov 28, 2016, 2:32:31 AM11/28/16
to mozilla-dev-d...@lists.mozilla.org
I miss not seeing the value of a variable as I pause the cursor over the variable's name when I'm stepping through javascripts.

joschka...@gmail.com

unread,
Nov 29, 2016, 3:04:38 AM11/29/16
to mozilla-dev-d...@lists.mozilla.org
I would really like to copy the absolute CSS Selector path instead of the relative! Both options would be very cool!

I would like to have a shortcut for they eyedropper!

I would really easily jump with the TAB Key from one value to another in the Box Model view!

I would really love to see the old syntax highlighting or maybe a some new - well choosen - themes!

Patrick Brosset

unread,
Nov 30, 2016, 8:20:54 AM11/30/16
to Joschka Truemmer, mozilla-dev-d...@lists.mozilla.org
Thanks for your feedback.
Joschka and I have been chatting about these in more details. I'll make
sure we have the right bugs filed.
> _______________________________________________
> dev-developer-tools mailing list
> dev-devel...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/dev-developer-tools
>

joschka...@gmail.com

unread,
Dec 1, 2016, 10:17:51 AM12/1/16
to mozilla-dev-d...@lists.mozilla.org
In the Cookie Panel there is no option to:

Create Cookie
(Opens a dialog, which allows adding a new cookie.)

Export Cookies For This Site
(Exports all cookies of the current website as text file in Netscape standard format)

In the CSS Panel we did not have:

Selector Side Panel
(https://getfirebug.com/wiki/index.php/Selectors_Side_Panel)

In the Breadcrumbs toolbar we did not have:
The possibility to right click it like in Firebug and e.g. copy the CSS Selector!

Karl Dubost

unread,
Dec 1, 2016, 9:05:58 PM12/1/16
to Patrick Brosset, dev-developer-tools
Patrick,

Le 21 nov. 2016 à 23:16, Patrick Brosset <pbro...@mozilla.com> a écrit :
> so now is a good time to ask again what people are missing from
> Firebug that does not exist yet in the Firefox built-in tools.


good question, I will hijack it a bit ;) with:

What people are missing from Opera DRAGONFLY
that does not exist yet in the Firefox built-in tools?

* Selecting the debugging context - debugging context selector
When the browser has more than one tab opened, giving the possibility to select another tab from developer tools without having to open a new devtools window.
see http://www.opera.com/dragonfly/documentation/

* DOM Inspector - RegExp search
"The RegExp search allows for searching using JavaScript regular expressions. RegExp matches results in the same way as text search, rather than being a freeform search."
http://www.opera.com/dragonfly/documentation/dom/

* DOM Inspector - XPath search
"The XPath expression search works the same way as the CSS selector search, except that it shows which elements match the entered XPath expression."
http://www.opera.com/dragonfly/documentation/dom/

* Debugger - Breakpoints events != lines
http://www.opera.com/dragonfly/documentation/debugger/

* Network - Saved Presets HTTP headers
The possibility to have presets profiles of HTTP headers for testing certain scenarios (content-negotiation, compression, caching, user-agent sniffing, etc.)
http://www.opera.com/dragonfly/documentation/network/



--
Karl Dubost, Mozilla
http://www.la-grange.net/karl/moz

Bryan Clark

unread,
Dec 2, 2016, 3:52:38 PM12/2/16
to Karl Dubost, dev-developer-tools, Patrick Brosset
Thanks for piling on!

On Thu, Dec 1, 2016 at 6:05 PM, Karl Dubost <kdu...@mozilla.com> wrote:

> Patrick,
>
> Le 21 nov. 2016 à 23:16, Patrick Brosset <pbro...@mozilla.com> a écrit :
> > so now is a good time to ask again what people are missing from
> > Firebug that does not exist yet in the Firefox built-in tools.
>
>
> good question, I will hijack it a bit ;) with:
>
> What people are missing from Opera DRAGONFLY
> that does not exist yet in the Firefox built-in tools?
>
> * Selecting the debugging context - debugging context selector
> When the browser has more than one tab opened, giving the possibility to
> select another tab from developer tools without having to open a new
> devtools window.
> see http://www.opera.com/dragonfly/documentation/


I've seen requests for this, not necessarily for other tabs though. Chrome
has a context chooser for the console as well. Worth looking into.


>
> * DOM Inspector - RegExp search
> "The RegExp search allows for searching using JavaScript regular
> expressions. RegExp matches results in the same way as text search, rather
> than being a freeform search."
> http://www.opera.com/dragonfly/documentation/dom/


Neat.


>
> * DOM Inspector - XPath search
> "The XPath expression search works the same way as the CSS selector
> search, except that it shows which elements match the entered XPath
> expression."
> http://www.opera.com/dragonfly/documentation/dom/


I believe XPath is dead, at the very least it smells funny. So I don't
think we'll support this. ( https://developer.mozilla.
org/en-US/docs/Web/XPath )


>
> * Debugger - Breakpoints events != lines
> http://www.opera.com/dragonfly/documentation/debugger/


This exists in the old debugger and will be arriving fairly soon in the new
debugger.


>
> * Network - Saved Presets HTTP headers
> The possibility to have presets profiles of HTTP headers for testing
> certain scenarios (content-negotiation, compression, caching, user-agent
> sniffing, etc.)
> http://www.opera.com/dragonfly/documentation/network/


Nice.


>
>
>
> --
> Karl Dubost, Mozilla
> http://www.la-grange.net/karl/moz
>

rma...@ourtrainingroom.com

unread,
Dec 7, 2016, 4:49:13 PM12/7/16
to mozilla-dev-d...@lists.mozilla.org
Thanks for providing this feedback mechanism!

Our shop uses firebug exclusively over say Chrome dev tools because of the productivity improvements we realize out of the use of firebug. Specifically the availability and behavior of the multiline command editor, the ability to create and manipulate cookies, and the ability to at a quick glass, inspect objects.

The current pain points in our switch over to the native debugger:

It is very tedious having to expand deeply nested objects to view the contents of a object to get some context as to what your looking at. Instead of seeing the word Object that we would need to drill into, Firebug would show you the first N characters of the object in JSON. In our case being an API provider passing deeply nested JSON objects back and forth, this time savings is paramount.

Having the ability to have the scratchpad and console side by side. There's a ton on real estate on a 16x9 monitor to have them next to each other. Having them split vertical makes it very difficult to keep the application/page in view along with the scratchpad and console to see the results of xhr calls for example.

My personal preference would be to replace the single line command editor with the scratchpad.

Also, scratchpad includes verbiage to use CMD-R to run the script within. CMD-R on a Mac within Firefox reloads the entire browser forcing us to have to click on the Run each time. I suggest CMD+Enter from firebug.

The cookies functionality of firebug was perfect. I can create edit or delete a cookie at will. Trying to work on bugs for multiple users/clients we can easily session spoof to switch context and test their issue.

Our 2cents :)

Thanks!

Patrick Brosset

unread,
Dec 15, 2016, 10:18:49 AM12/15/16
to Joschka Truemmer, mozilla-dev-d...@lists.mozilla.org
I just filed this bug for the selector side panel:
https://bugzilla.mozilla.org/show_bug.cgi?id=1323746
I had never seen this in Firebug. That sounds useful.
It reminds me of a somewhat similar feature in DevTools: in the rule-view
sidebar, you can click on the little inspector icon next to CSS selectors
to highlight elements in the page that match this selector.
It isn't exactly the same, but it might help to know about it.

For creating cookies, we have bugs already opened:
https://bugzilla.mozilla.org/show_bug.cgi?id=1231451
https://bugzilla.mozilla.org/show_bug.cgi?id=1231452
https://bugzilla.mozilla.org/show_bug.cgi?id=1279602

I don't believe we have anything currently for exporting cookies though.

Patrick Brosset

unread,
Dec 15, 2016, 10:23:02 AM12/15/16
to rma...@ourtrainingroom.com, mozilla-dev-d...@lists.mozilla.org
Thank you for your feedback.
About cookies, as I mentioned in an earlier email, there's no possibility
to create a cookie yet, but bugs exist. It's just a matter of actually
doing them now.
We do have a storage panel though. I mention it only because it's not
visible by default, so people might not know it exists:
https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector

About the console, I think both the multi-line input and the ability to
inspect objects inline are planned, just not there yet. So these things
should come, in time. Thanks for confirming that these are important things
to you.

Jan Odvarko

unread,
Dec 15, 2016, 10:23:23 AM12/15/16
to Patrick Brosset, Joschka Truemmer, mozilla-dev-d...@lists.mozilla.org
> On Thu, Dec 1, 2016 at 1:13 PM, <joschka...@gmail.com> wrote:
>
>> In the Cookie Panel there is no option to:
>>
>> Create Cookie
>> (Opens a dialog, which allows adding a new cookie.)
>>
>> Export Cookies For This Site
>> (Exports all cookies of the current website as text file in Netscape
>> standard format)

As far as the Cookies panel in Firebug is concerned,
here is full list of available features:

http://www.softwareishard.com/blog/firecookie/ <http://www.softwareishard.com/blog/firecookie/>

Honza

Mike Ratcliffe

unread,
Dec 18, 2016, 6:35:12 AM12/18/16
to dev-devel...@lists.mozilla.org
I am responsible for creating the Add Cookie functionality and am making
it a high priority to do so... don't worry, you will see it soon!


On 01/12/2016 12:13, joschka...@gmail.com wrote:
> In the Cookie Panel there is no option to:
>
> Create Cookie
> (Opens a dialog, which allows adding a new cookie.)
>
> Export Cookies For This Site
> (Exports all cookies of the current website as text file in Netscape standard format)
>
> In the CSS Panel we did not have:
>
> Selector Side Panel
> (https://getfirebug.com/wiki/index.php/Selectors_Side_Panel)
>
> In the Breadcrumbs toolbar we did not have:
> The possibility to right click it like in Firebug and e.g. copy the CSS Selector!
>

Dylan Barrell

unread,
Dec 19, 2016, 4:08:06 AM12/19/16
to dev-devel...@lists.mozilla.org
I miss the ability to copy an XPath, Chrome devtools has this too :-(

r...@peytz.dk

unread,
Jan 12, 2017, 9:27:23 AM1/12/17
to mozilla-dev-d...@lists.mozilla.org
I miss:

* the Edit button. - I know I can 'right click - edit' the dom element, but that's an extra click added that wasn't there before
* right click and edit element in the styles tab - now I have to scroll to the top
* in the styles tab: right click and open (an image url) image in new tab - now I have to copy url, create new tab and paste
* Keep the dev tools in one window when popped out, instead of new windows for every tab (https://bugzilla.mozilla.org/show_bug.cgi?id=1219917)
* When I edit the css, the whole site jumps/flickers, as if some parts are being repainted - even though they are not related to the element I'm editing.

Especially the last 2, would be reason enough for me to go completely off Firefox for dev purpose. :-(

ldi...@gmail.com

unread,
Jan 30, 2017, 3:16:43 AM1/30/17
to mozilla-dev-d...@lists.mozilla.org
Key missing features in the Dev tools compared to firebug:

1. Layout:
For larger displays having the CSS information below the html rather then side by side was a cleaner view. Devtools in firefox ONLy does this if the window is too small and this is NOT useful

2. Devtools is way too cluttered, even in the new firebug mode and needs a good cleanup badly!

3. You can not copy an objects data like you could in firefox. You can not just highlight all its properties and copy. Nor can you view the pure JSON etc like you could in firebug. A lot of the JSON and script object manipulation and handling features lack compared to firebug. Some of the suggestions have been in devTools logs for over 3 years now and not been done yet used by most people in firebug.

4. As some others have mentioned - Copying the CSS paths etc you had options of absolute or relative paths

5. The cookie stuff. I want to be able to add a cookie and change a cookie's information What about all the other cookie options in firebug?



thech...@hotmail.com

unread,
Feb 9, 2017, 8:25:32 AM2/9/17
to mozilla-dev-d...@lists.mozilla.org
I miss real-time updating of the page when making edits in the inspector window (changing classes, editing HTML etc). I have to commit the change before it's shown. It seems to update in real-time when editing in the CSS rules, but not in the HTML itself.

One other thing that was also a problem in Firebug is that I'd love for the Dev Tools window to be treated as a single, combined entity with Firefox when tabbing between programs in Windows. I have three screens, with Firefox in one and a full-screen Dev Tools in another. Windows treats them as different entities, which is a bit messy when tabbing between Firefox, Dev Tools and other programs repeatedly. It would be great for the Dev Tools window to behave like Photoshop or Visual Studio's various windowed snap-ins. :)

DL Neil

unread,
Feb 9, 2017, 3:43:40 PM2/9/17
to thech...@hotmail.com, mozilla-dev-d...@lists.mozilla.org


On 08/02/17 15:02, thech...@hotmail.com wrote:
> I miss real-time updating of the page when making edits in the inspector window (changing classes, editing HTML etc). I have to commit the change before it's shown. It seems to update in real-time when editing in the CSS rules, but not in the HTML itself.

+1


> One other thing that was also a problem in Firebug is that I'd love for the Dev Tools window to be treated as a single, combined entity with Firefox when tabbing between programs in Windows. I have three screens, with Firefox in one and a full-screen Dev Tools in another. Windows treats them as different entities, which is a bit messy when tabbing between Firefox, Dev Tools and other programs repeatedly. It would be great for the Dev Tools window to behave like Photoshop or Visual Studio's various windowed snap-ins. :)

+1


--
Regards,
=dn

thech...@hotmail.com

unread,
Feb 9, 2017, 6:45:46 PM2/9/17
to mozilla-dev-d...@lists.mozilla.org
Another couple of bits:

I miss not being able to use the cursors to cycle through available values in the CSS panel. For example, a class has vertical-align and I used to be able to click into the value and press down to go through 'top', 'middle', 'bottom' etc, seeing the effect on the page as I made the change. It seems that this still works with numerical values, but not with word values.

Already mentioned by someone else, but I also miss being able to right-click a background image in the CSS panel and choose to open in new tab (or anywhere), plus the missing Edit HTML button is a little frustrating.

bencze...@gmail.com

unread,
Mar 29, 2017, 6:21:41 AM3/29/17
to mozilla-dev-d...@lists.mozilla.org
Hi!

I really miss accepting an auto-completion entry with the Enter key.
Now I always end up typing half-methods/properties causing errors.

Patrick Brosset

unread,
Mar 29, 2017, 6:26:43 AM3/29/17
to bencze...@gmail.com, mozilla-dev-d...@lists.mozilla.org
Thanks for the feedback!

Do you mind giving more details about this though? Which panel does this
happen in (I suspect the console).
What steps did you take: type the beginning of a property or method, press
enter?

I think Chrome and Firefox both behave the same in this respect, typing
Enter will submit what is currently typed in the input, not what is
suggested. You have to press tab to first accept the suggestion.
Did Firebug do this differently?

Thanks for your help,
Patrick
0 new messages