# How to debug the styling of the toolbar popups like bookmarks-popup?

**URL:** <https://discourse.mozilla.org/t/how-to-debug-the-styling-of-the-toolbar-popups-like-bookmarks-popup/48933>\
**Category:** Firefox Development\
**Created:** [November 21, 2019, 7:25am UTC](https://discourse.mozilla.org/t/how-to-debug-the-styling-of-the-toolbar-popups-like-bookmarks-popup/48933 "2019-11-21T07:25:38Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![vaxul](https://avatars.discourse-cdn.com/v4/letter/v/71e660/32.png) [@vaxul](https://discourse.mozilla.org/u/vaxul)\
**Post date:** [November 21, 2019, 7:25am UTC](https://discourse.mozilla.org/t/how-to-debug-the-styling-of-the-toolbar-popups-like-bookmarks-popup/48933/1 "2019-11-21T07:25:38Z")

</div>

Hi,

I’ve liked to learn how the styling of this toolbar popup was build:

 ![toolbar-bookmark-popup](https://us1.discourse-cdn.com/flex001/uploads/mozilla/original/3X/3/4/34fbfab3903bda2e4d1ee6c696da32f8e30f515d.png)

I downloaded the [Firefox source code](https://archive.mozilla.org/pub/firefox/releases/70.0.1/source/), but didn’t find any sign of the styling of this popup.

Best regards

---

<div class="post-metadata">

**Author:** ![ato](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/ato/32/21114_2.png) [@ato](https://discourse.mozilla.org/u/ato)\
**Post date:** [November 21, 2019, 10:30am UTC](https://discourse.mozilla.org/t/how-to-debug-the-styling-of-the-toolbar-popups-like-bookmarks-popup/48933/2 "2019-11-21T10:30:58Z")

</div>

You need to enable ‘Remote Debugging’ and ‘Enable browser chrome  
and add-on debugging toolboxes’ under ‘Advanced settings’ in DevTools.  
In the ‘Web Developer’ menu a new ‘Browser Toolbox’ option will  
appear. This will allow you to investigate styling for chrome  
panels.

For what it’s worth, I believe its styling is mainly determined by  
panelUI.js.

---

<div class="post-metadata">

**Author:** ![miton](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/miton/32/32462_2.png) [@miton](https://discourse.mozilla.org/u/miton)\
**Post date:** [December 12, 2019, 10:22am UTC](https://discourse.mozilla.org/t/how-to-debug-the-styling-of-the-toolbar-popups-like-bookmarks-popup/48933/3 "2019-12-12T10:22:30Z")

</div>

Steps:

1. visit about:debugging, select “this browser” in the left sidebar.
2. choose the ext you wanna debug, click “inspect”;
3. select the ext. icon in the right top toolbar. the inspection page will show the debugging info of the ext.