# Introducing Discourse developer toolbar

**URL:** https://meta.discourse.org/t/introducing-discourse-developer-toolbar/346215
**Category:** Development
**Tags:** dev-news
**Created:** [January 8, 2025, 4:33pm UTC](https://meta.discourse.org/t/introducing-discourse-developer-toolbar/346215 "2025-01-08T16:33:31Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [January 8, 2025, 4:33pm UTC](https://meta.discourse.org/t/introducing-discourse-developer-toolbar/346215/1 "2025-01-08T16:33:31Z")

</div>

When running the [latest version of Discourse core](https://github.com/discourse/discourse/commit/498481e5be21780c20e3646bd934eb9d7316a8f8) in a development environment, you’ll notice a new toolbar on the left-hand-side of the screen:

 ![Developer Tools](https://global.discourse-cdn.com/meta/original/4X/f/2/2/f22b51daaffa3465a6263530892c73243127540a.png)

This provides one-click access to commonly-needed developer tools. So far, we have:

### 🔌 Plugin Outlet Debug

This shows all plugin outlets, with tooltips showing realtime values of all of the available `@outletArgs`.

This was inspired by the popular [plugin outlet locations](https://meta.discourse.org/t/plugin-outlet-locations-theme-component/100673) theme component, and [the plugin before it](https://meta.discourse.org/t/plugin-outlet-locations/29589). But unlike those, the tight integration with core means it can always be 100% up-to-date with the latest outlets & arguments.

### 🚑 Safe ​mode

Toggles [safe mode](https://meta.discourse.org/t/53504?silent=true) on and off

### 📜 Verbose localization

Toggles [the verbose localization feature](https://meta.discourse.org/t/find-a-translation-key-with-verbose-localization/134651)

* * *

In development, this is enabled by default, and can be disabled using the ‘X’ button.

In production, it can be enabled by running `enableDevTools()` in the browser console. You can even try it here on Meta! If `enableDevTools()` is not available, it’s probably because you’re on an error page which doesn’t load the full Ember app.

We hope to add more tools over the coming weeks/months, so watch this space! If you have any feedback, or ideas for tools, let us know below!

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [January 17, 2025, 1:00pm UTC](https://meta.discourse.org/t/introducing-discourse-developer-toolbar/346215/2 "2025-01-17T13:00:09Z")

</div>

> [@david](#):
>
> In production, it can be enabled by running `enableDevTools()` in the browser console. You can even try it here on Meta!

Clicking the 🔌 icon to show outlets makes Chrome crash, making the page/tab unresponsive. I disabled my Chrome extensions, but it still crashes.

More specifically, it crashes when clicking the icon while on a topic (not only on meta).

On Firefox/Edge, it works but there’s an error in the console:

```plaintext
Multiple connectors were registered for the discovery-list-area outlet. Using the first. 
Array [undefined, "discovery-list-area/kanban-board (discourse/theme-351/discourse/connectors/discovery-list-area/kanban-board)"]

```

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [January 17, 2025, 1:50pm UTC](https://meta.discourse.org/t/introducing-discourse-developer-toolbar/346215/3 "2025-01-17T13:50:04Z")

</div>

I can reproduce it on Meta as well.

On Firefox, you can see that there is also a rendering infinite loop:

 ![The image displays a JavaScript console error message "Uncaught (in promise) Error: infinite rendering invalidation detected" next to a list of numbers and strings: '7', '29', '_trigger', 'end', 'endor;' which appear to be part of a code line. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/3/a/5/3a510d2eb0f702502e56eac58e33a7b31dec7a9f.png)

It works fine on a local dev installation, even with Kanban enabled. I see the same error, but there is no rendering loop.

* * *

By the way, thanks for bringing this tool, it’s really convenient, love it!

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [January 17, 2025, 3:03pm UTC](https://meta.discourse.org/t/introducing-discourse-developer-toolbar/346215/4 "2025-01-17T15:03:58Z")

</div>

Huh! It definitely worked a few days ago, but now I see the same error. I’ll investigate - thanks for the reports!

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [January 20, 2025, 3:17pm UTC](https://meta.discourse.org/t/introducing-discourse-developer-toolbar/346215/6 "2025-01-20T15:17:27Z")

</div>

Just merged [this commit](https://github.com/discourse/discourse/commit/89df65e8434ce18c88c0c4e1cc91eaef2d1e4137) which will fix the infinite-rerendering on the topic page

---

<div class="post-metadata">

### Author: ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [February 5, 2025, 1:17pm UTC](https://meta.discourse.org/t/introducing-discourse-developer-toolbar/346215/8 "2025-02-05T13:17:44Z")

</div>

Since I don’t see any way to do this on mobile, I’m working on a simple TC to add a button to the header (inspired by the Plugin Outlets TC).

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [February 5, 2025, 1:27pm UTC](https://meta.discourse.org/t/introducing-discourse-developer-toolbar/346215/9 "2025-02-05T13:27:52Z")

</div>

When viewing a development environment on mobile, the toolbar will appear on the left of the screen so you can use it as normal.

In production environments, you’ll need to call `enableDevTools()` from the console (or from theme/theme-component javascript) to turn on the toolbar. Note that this has a performance cost, so you shouldn’t do it for all users on a real production site.

---

<div class="post-metadata">

### Author: ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [February 5, 2025, 1:33pm UTC](https://meta.discourse.org/t/introducing-discourse-developer-toolbar/346215/10 "2025-02-05T13:33:18Z")

</div>

Yep. Users can click the button to activate dev tools for them. Not for all users.

---

<div class="post-metadata">

### Author: ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [February 6, 2025, 11:27am UTC](https://meta.discourse.org/t/introducing-discourse-developer-toolbar/346215/11 "2025-02-06T11:27:01Z")

</div>

Here it is:

> [@Enable Dev Tools Button](https://meta.discourse.org/t/enable-dev-tools-button/350803):
>
> information_sourceSummary Adds a button to the site header to enable Dev ToolseyeglassesPreview [https://discourse.theme-creator.io/theme/NateDhaliwal/enable-dev-tools-button](https://discourse.theme-creator.io/theme/NateDhaliwal/enable-dev-tools-button)hammer_and_wrenchRepository [GitHub - NateDhaliwal/Enable-Dev-Tools-Button · GitHub](https://github.com/NateDhaliwal/Enable-Dev-Tools-Button)questionInstall Guide [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component This Theme Component adds a butt…

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [February 15, 2025, 9:32pm UTC](https://meta.discourse.org/t/introducing-discourse-developer-toolbar/346215/12 "2025-02-15T21:32:17Z")

</div>

Can we have a toggle for `mobile_view`? Sometimes, I want to check quickly this view.  
I can make a PR if so!

---

<div class="post-metadata">

### Author: ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [February 16, 2025, 1:38am UTC](https://meta.discourse.org/t/introducing-discourse-developer-toolbar/346215/13 "2025-02-16T01:38:13Z")

</div>

Why not the toggle in the sidebar though?

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [February 16, 2025, 1:44am UTC](https://meta.discourse.org/t/introducing-discourse-developer-toolbar/346215/14 "2025-02-16T01:44:17Z")

</div>

You don’t have the mobile toggle in desktop mode. I believe it appears only on mobile or tablet.  
Also, this is about the convenience of having all the buttons in the same place.

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [February 17, 2025, 10:05am UTC](https://meta.discourse.org/t/introducing-discourse-developer-toolbar/346215/15 "2025-02-17T10:05:16Z")

</div>

Sure, mobile mode sounds like a good one to add 👍

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [February 17, 2025, 4:49pm UTC](https://meta.discourse.org/t/introducing-discourse-developer-toolbar/346215/16 "2025-02-17T16:49:00Z")

</div>

There we go:

[https://github.com/discourse/discourse/pull/31369](https://github.com/discourse/discourse/pull/31369)

---

<div class="post-metadata">

### Author: ![gormus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gormus/32/428592_2.png) [@gormus](https://meta.discourse.org/u/gormus)
#### Post date: [February 28, 2025, 11:56am UTC](https://meta.discourse.org/t/introducing-discourse-developer-toolbar/346215/17 "2025-02-28T11:56:13Z")

</div>

I just wanted to shout out, and thank you for this handy dev tool.

Identifying the available plugin outlets is a breeze now, or pinpointing the localization strings…

Thanks! 😃

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [March 10, 2025, 2:51pm UTC](https://meta.discourse.org/t/introducing-discourse-developer-toolbar/346215/18 "2025-03-10T14:51:52Z")

</div>

But it doesn’t work on the 404 page?

Visit [https://meta.discourse.org/ewfsezfef](https://meta.discourse.org/ewfsezfef), hit F12, enable dev tools, and

 ![image](https://global.discourse-cdn.com/meta/original/4X/3/3/5/335b5d0d9eff2301b5257245257af5a8db121120.png)

```plaintext
VM190:1 Uncaught ReferenceError: enableDevTools is not defined
    at <anonymous>:1:1

```

I was hoping to add some text to that page.

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [March 10, 2025, 2:56pm UTC](https://meta.discourse.org/t/introducing-discourse-developer-toolbar/346215/19 "2025-03-10T14:56:18Z")

</div>

Right now the 404 pages don’t load any of the ember app JS. There is a hidden site setting `bootstrap_error_pages` which you can enable to make them full ember app pages.

Perhaps we’ll make that the default in future, but it’s not at the top of our priority list right now.

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [March 10, 2025, 3:01pm UTC](https://meta.discourse.org/t/introducing-discourse-developer-toolbar/346215/20 "2025-03-10T15:01:54Z")

</div>

Makes sense. Maybe add that to the OP? It looks like I can do it.

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [March 10, 2025, 3:03pm UTC](https://meta.discourse.org/t/introducing-discourse-developer-toolbar/346215/21 "2025-03-10T15:03:22Z")

</div>

Sure! added:

> [@david](#):
>
> If `enableDevTools()` is not available, it’s probably because you’re on an error page which doesn’t load the full Ember app.

---

<div class="post-metadata">

### Author: ![nathank](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nathank/32/290039_2.png) [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [January 15, 2026, 1:47am UTC](https://meta.discourse.org/t/introducing-discourse-developer-toolbar/346215/23 "2026-01-15T01:47:51Z")

</div>

Is this still working? When I try it on Meta (or any other site), I get this:

 ![image](https://global.discourse-cdn.com/meta/original/4X/0/c/0/0c056925e319b878ffb080b6d0348f469fc0b0fd.png)

And no toolbar.

[Next page](https://meta.discourse.org/t/introducing-discourse-developer-toolbar/346215.md?page=2)
