Introducing Discourse developer toolbar

Dev
1

When running the latest version of Discourse core in a development environment, you’ll notice a new toolbar on the left-hand-side of the screen:

Discourse dev-tools
Discourse dev-tools100×308 1.52 KB

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

:electric_plug: 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 theme component, and the plugin before it. But unlike those, the tight integration with core means it can always be 100% up-to-date with the latest outlets & arguments.

outlet locations
outlet locations1252×872 81.8 KB
outlet tooltip
outlet tooltip1218×714 87 KB

:ambulance: Safe ​mode

Toggles safe mode on and off

:scroll: Verbose localization

Toggles the verbose localization feature

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!

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!

25 Likes
2

Clicking the :electric_plug: 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:

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)" ]
3 Likes
3

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)
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)518×206 2.51 KB

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!

2 Likes
4

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

5 Likes