# How to create addon for debugging tools

**URL:** <https://discourse.mozilla.org/t/how-to-create-addon-for-debugging-tools/121002>\
**Category:** Add-ons\
**Tags:** learning\
**Created:** [July 10, 2023, 10:40pm UTC](https://discourse.mozilla.org/t/how-to-create-addon-for-debugging-tools/121002 "2023-07-10T22:40:26Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dracula](https://avatars.discourse-cdn.com/v4/letter/d/ecc23a/32.png) [@Dracula](https://discourse.mozilla.org/u/Dracula)\
**Post date:** [July 10, 2023, 10:40pm UTC](https://discourse.mozilla.org/t/how-to-create-addon-for-debugging-tools/121002/1 "2023-07-10T22:40:26Z")

</div>

Hi Guys,

I’m looking a way to make an extension than can apply some CSS or JS on the Debugger tab of the Firefox debugging tools (F12).

I’m trying to solve the very annoying issue about the script text that do not scroll horizontally.

Thanks

---

<div class="post-metadata">

**Author:** ![Dracula](https://avatars.discourse-cdn.com/v4/letter/d/ecc23a/32.png) [@Dracula](https://discourse.mozilla.org/u/Dracula)\
**Post date:** [July 25, 2023, 1:14am UTC](https://discourse.mozilla.org/t/how-to-create-addon-for-debugging-tools/121002/3 "2023-07-25T01:14:55Z")

</div>

Hi @nikijones, thanks for your reply.  
I know a bit about extension and actually a created my first one a few months ago, but my problem is how to get the content inside the debugging tools, not the HTML of the current website page but Firefox debug tool, and how to apply those css and js file.  
Can you please provide an example code?

---

<div class="post-metadata">

**Author:** ![juraj.masiar](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/juraj.masiar/32/30587_2.png) [@juraj.masiar](https://discourse.mozilla.org/u/juraj.masiar)\
**Post date:** [July 25, 2023, 9:15am UTC](https://discourse.mozilla.org/t/how-to-create-addon-for-debugging-tools/121002/4 "2023-07-25T09:15:11Z")

</div>

WARNING: This forum is sadly filled with AI powered bots that replies to posts like yours, only to spam a link to some shitty spam page.  
And as you can see, the generative AI can already write pretty nice looking responses ☹.

In any case, the devtools is not my area of expertise so the best I can do is give you link for the docs:

> **[devtools - Mozilla | MDN](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools)**
>
> Enables extensions to interact with the browser's Developer Tools. You use this API to create Developer Tools pages, interact with the window that is being inspected, inspect the page network usage.