Developer Toolbox

:discourse2: Summary Developer Toolbox gives quick access to common links, actions, and settings often used when developing with Discourse.
:hammer_and_wrench: Repository Link https://github.com/discourse/discourse-dev-utils
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

:information_source: For local development use only. Not useful for production sites

Features

How it works

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.

Settings

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 documentPerform check on document:
42 Likes

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 Likes

i quite like this component. thank you! :slight_smile: :+1:

i just noticed that the Discourse Docs button goes to the Plugin API link instead of docs.

2 Likes

Thanks for identifying that @Lilly, I’ve pushed an update resolving this:

Thanks for the request @nolo, I’ve added this now:

3 Likes

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 Like

Adding/installing this theme component in addition to the Developer Toolbox makes the Toggle Outlets button work…

2 Likes

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 Likes

Thanks, I made the PR :+1:

3 Likes

Thanks @Arkshine for the fix, I’ve merged that in :tada:

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 Likes

Can we submit translation for this component on crowdin? I didn’t find the entrance to it.

1 Like

Hi @th21 thanks for letting us know. I have added it as a translation project in Crowdin.

3 Likes