The component is designed by default to be unobtrusive, so you trigger a modal by tapping the grave slash ` character on your keyboard. Alternatively, you can enable a trigger button in the UI by toggling a theme setting.
Once the modal appears you have access to some common actions, links and settings that you might typically need while developing with Discourse.
Name
Description
show header button
Show the trigger for the dev toolbox in the header panel
remove button from flow
Fixes the header button to bottom right. (Requires show_header_button to be enabled)
actions close modal
Triggering an action in the toolbox will also close the toolbox modal.
custom links
Translation
Default
dev_utils.toggle_btn
Dev Toolbox
dev_utils.modal.title
Developer Toolbox
dev_utils.modal.cancel
Cancel
dev_utils.actions.title
Quick Actions
dev_utils.actions.toggle_alerts
Toggle Alerts
dev_utils.actions.toggle_plugin_outlets
Toggle Outlets
dev_utils.links.title
Quick Links
dev_utils.links.themes
Themes
dev_utils.links.components
Theme Components
dev_utils.links.colors
Colors
dev_utils.links.settings
Settings
dev_utils.links.plugins
Plugins
dev_utils.links.user_prefs
User Preferences
dev_utils.links.text
Text
dev_utils.links.plugin_api
Plugin API
dev_utils.links.docs
Discourse Docs
dev_utils.common_settings.title
Common Settings
dev_utils.common_settings.none
Select a setting
Last edited by @JammyDodger 2024-06-15T18:10:29Z
Check document Perform check on document:
「いいね！」 42
nolo
2022 年 10 月 11 日午前 11:15
2
Thank you for this great component, Keegan!
Right now the header icon always shows. A small improvement could be to only show it to admins. So when browsing the site as a regular user the look is not tweaked.
「いいね！」 5
Lilly
2023 年 6 月 8 日午後 2:08
3
i quite like this component. thank you!
i just noticed that the Discourse Docs button goes to the Plugin API link instead of docs.
「いいね！」 2
keegan
2023 年 6 月 14 日午後 6:57
4
Thanks for identifying that @Lilly , I’ve pushed an update resolving this:
main ← fix-incorrect-link
opened 06:32PM - 14 Jun 23 UTC
This PR fixes an issue where the <kbd>Discourse Docs</kbd> button link was direc… ting to the `plugin-api.js` file instead of [`https://docs.discourse.org`](https://docs.discourse.org)
Thanks for the request @nolo , I’ve added this now:
committed 06:56PM - 14 Jun 23 UTC
「いいね！」 3
This looks very good – I need to identify all of the outlets, but both Toggle Outlets and Toggle Alerts seem to do nothing except close the modal.
Are they supposed to display/show or highlight something on screen when toggled on?
「いいね！」 1
Adding/installing this theme component in addition to the Developer Toolbox makes the Toggle Outlets button work…
「いいね！」 2
Alteras
2024 年 5 月 16 日午後 8:39
7
The Plugin API link is not opening the file. Seems like it needs to be updated to app/assets/javascripts/discourse/app/lib/plugin-api.gjs?
「いいね！」 2
keegan
2024 年 5 月 17 日午後 8:26
9
Thanks @Arkshine for the fix, I’ve merged that in
I’ve also added a few updates (fixes/modernizations) as well as a new feature where you can now add custom links by defining them in the theme setting:
「いいね！」 3
th21
2024 年 11 月 17 日午前 7:30
10
Can we submit translation for this component on crowdin? I didn’t find the entrance to it.
「いいね！」 1
Lilly
2024 年 12 月 1 日午後 6:16
13
Hi @th21 thanks for letting us know. I have added it as a translation project in Crowdin.
「いいね！」 3
th21
2025 年 2 月 6 日午前 12:13
17
What is the expected result of “Toggle Alerts”? clicked and nothing happened
「いいね！」 1
keegan
2025 年 2 月 6 日午後 4:02
18
It is intended to hide any alerts you have on your Discourse instance. If you have any alerts on your forum like this:
It will hide it from the page. It’s quite useful for example, when theming and you want to temporarily see the page without any alerts.
「いいね！」 2
For local development use only. Not useful for production sites
