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: [Developer Tools] This provides 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. :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! 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!

[imagem] David Taylor: In production, it can be enabled by running enableDevTools() in the browser console. You can even try it here on Meta! 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)" ]

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)] 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!

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

Just merged this commit which will fix the infinite-rerendering on the topic page

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).

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.

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

Here it is: [imagem] Enable Dev Tools Button Theme component information_source Summary Adds a button to the site header to enable Dev Tools eyeglasses Preview https://discourse.theme-creator.io/theme/NateDhaliwal/enable-dev-tools-button hammer_and_wrench Repository GitHub - NateDhaliwal/Enable-Dev-Tools-Button · GitHub question Install Guide How to install a theme or theme component open_book New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component This Theme Component adds a butt…

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

Why not the toggle in the sidebar though?

Apresentando a barra de ferramentas do desenvolvedor do Discourse

Dev

david (David Taylor) 17 Fevereiro , 2025 10:05 15

Claro, o modo mobile parece uma boa adição

Tópico		Respostas	Vistas
Developer Toolbox Theme component official , development , developer-toolbox	12	2826	6 Fevereiro , 2025
(deprecated) Plugin outlet locations theme component Theme component end-of-life	38	11047	23 Janeiro , 2025
Enable Dev Tools Button Theme component	13	772	3 Janeiro , 2026
Developing Discourse Plugins - Part 2 - Connect to a plugin outlet Developer Guides plugin-guides , tutorial	38	30944	23 Novembro , 2025
Developer Guides Index Developer Guides index	0	2457	15 Maio , 2024

Apresentando a barra de ferramentas do desenvolvedor do Discourse

Related topics