How to inspect elements on Discord?

Discord is built on Electron, which embeds the Chromium rendering engine, so it ships with the same DevTools as Google Chrome. The easiest and most reliable way to inspect elements on Discord is to open it in a browser at discord.com/app and press F12, Ctrl+Shift+I on Windows or Linux, or Cmd+Option+I on Mac. In the desktop app these tools exist but are disabled by default, so you either re-enable them by editing a settings file or simply use the browser version where DevTools always work.

Why Discord Has DevTools (Electron and Chromium)

Discord is not a traditional native application. Both the web client and the desktop client render their interface using web technologies. The desktop app is packaged with Electron, a framework that bundles a Chromium browser engine and Node.js into a single application. Because Chromium powers the rendering, Discord's entire UI is HTML, CSS, and JavaScript, exactly like a web page.

This is why inspecting Discord works at all. The DevTools you use in Chrome are Chromium DevTools, and Discord runs on Chromium, so the same inspector is available. The difference is purely about access: the browser version exposes DevTools freely, while the desktop app hides them behind a safety flag.

Method 1 - Inspect Discord in the Browser

Running Discord in a browser is the cleanest path because standard browser developer tools are never restricted there. This works in Chrome, Edge, Firefox, and Safari.

Step-by-step:

• Open your browser and go to discord.com/app, then log in.
• Open DevTools using F12, Ctrl+Shift+I on Windows or Linux, or Cmd+Option+I on Mac. You can also right-click any part of the interface and choose Inspect.
• Click the Elements tab to view the HTML and CSS structure of the Discord interface.
• Use the element picker, the cursor icon at the top-left of DevTools, then hover over a channel, message, or button to jump straight to its markup.
• Edit values in the Styles pane to temporarily preview layout or color changes. These edits are local to your session and reset on refresh.
• Switch to the Console tab to read JavaScript logs, or the Network tab to watch the API requests Discord makes.

Why this is recommended: the browser client renders the same React components as the desktop app, so the DOM you inspect is essentially identical, and you avoid editing any configuration files or triggering safety warnings.

Method 2 - Discord Developer Mode (Copy IDs, Not DevTools)

Discord has a feature literally called Developer Mode, and it is frequently confused with DevTools. It is not the same thing. Developer Mode only exposes the unique numeric IDs of objects so you can copy them, which is useful for bots and API work, not for inspecting HTML or CSS.

Step-by-step:

• Click the gear icon next to your username to open User Settings.
• Scroll down the left sidebar to the Advanced section.
• Toggle Developer Mode on.
• Right-click a user, server, channel, or message and choose Copy ID to grab its snowflake identifier.

Keep this in mind: Developer Mode gives you IDs for the Discord API. If your goal is to read the underlying markup or restyle the interface, you still need DevTools from Method 1 or Method 3.

Method 3 - Enabling DevTools in the Discord Desktop App

In modern stable builds of the desktop app, pressing Ctrl+Shift+I does nothing. Discord deliberately disabled DevTools to defend users against self-XSS scams, where bad actors talk people into pasting console code that steals their account token. The tools are still in the binary because of Chromium, so you can switch them back on by editing a configuration file. Do this only if you understand the risk.

Step-by-step:

• Fully quit Discord, including from the system tray, so no process is running in the background.
• Open the settings folder. On Windows press Win+R and enter %AppData%\discord. On Mac go to ~/Library/Application Support/discord.
• Open settings.json in a text editor.
• Add the line "DANGEROUS_ENABLE_DEVTOOLS_ONLY_ENABLE_IF_YOU_KNOW_WHAT_YOURE_DOING": true inside the JSON object, then save.
• Restart Discord. Ctrl+Shift+I now opens the Chromium DevTools inside the desktop app.

Safety note: the flag name is a warning, not decoration. Never paste code into the Discord console that someone else gave you, and consider turning the flag back off once you are done inspecting.

Inspecting Discord on Mobile

The native mobile apps do not include an inspector, so you inspect the Discord web app instead and use remote debugging from a desktop machine.

• Android: open discord.com/app in Chrome on the phone, connect the device to a computer, and open chrome://inspect in desktop Chrome to remotely inspect the page.
• iOS: open the Discord web app in Safari on the iPhone, connect it to a Mac, and use Safari's Develop menu and Web Inspector to inspect the page.

Cross-Browser Inspection of Discord

Because the Discord web client is a regular web app, its layout can render slightly differently across browser engines and operating systems. If you are testing a theme, an embed, a bot dashboard, or a Discord-connected web page, it helps to inspect the same interface on more than one environment.

A cloud platform lets you open the Discord web app on real browsers and operating systems without installing each one locally. You can run a live session, right-click, choose Inspect, and use the built-in DevTools to check how the interface behaves across Chrome, Firefox, Edge, and Safari. You can do this with TestMu AI's platform, which spins up a real browser and OS in the cloud where standard DevTools work exactly as they do on your own machine.

Common Issues and Troubleshooting

• Ctrl+Shift+I does nothing in the desktop app: this is expected on stable builds. DevTools is disabled by default. Either follow Method 3 to enable it, or inspect the web version where the shortcut always works.
• You enabled Developer Mode but still cannot see HTML: Developer Mode only copies IDs. It is not an inspector. Use DevTools from Method 1 or Method 3 to view markup.
• The shortcut still fails after editing settings.json: confirm Discord was fully closed before editing, that the JSON is valid with no trailing comma, and that you edited the file for the right build, discord, discordptb, or discordcanary.
• A non-US keyboard layout blocks the shortcut: some layouts map the I key differently. Try the right-click then Inspect path in the browser instead, which does not depend on the shortcut.
• Edits disappear on refresh: DevTools changes to HTML and CSS are temporary and live only in the current session. Reloading Discord restores the original interface.

Frequently Asked Questions

Is DevTools disabled in the Discord app?

Yes. In modern stable builds of the Discord desktop app, the Ctrl+Shift+I DevTools shortcut is disabled by default for safety. The DevTools engine is still present because Discord is built on Electron and Chromium, but you must re-enable it by editing Discord's settings.json file. The browser version at discord.com/app has no such restriction.

Does Discord have DevTools?

Yes. Discord is built on Electron, which embeds Chromium, so it has the same DevTools as Google Chrome. In the web app they open with F12 or right-click then Inspect. In the desktop app they are present but disabled by default.

What is the easiest way to inspect Discord elements?

Open Discord in a browser at discord.com/app and press F12, Ctrl+Shift+I on Windows or Linux, or Cmd+Option+I on Mac. You can also right-click any element and choose Inspect. This launches the browser DevTools where you can view and edit the HTML and CSS of the Discord interface.

Is Discord Developer Mode the same as DevTools?

No. Discord Developer Mode is a setting under User Settings then Advanced that lets you right-click and copy the unique IDs of users, servers, channels, and messages. It does not expose HTML or CSS. To inspect the actual interface you need DevTools.

Why does Ctrl+Shift+I do nothing in the Discord desktop app?

Discord disabled the DevTools shortcut in stable desktop builds to protect users from self-XSS scams, where attackers trick people into pasting code into the console to steal account tokens. To re-enable it you add a DANGEROUS_ENABLE_DEVTOOLS flag to settings.json and restart the app, or simply use the browser version instead.

Can I inspect Discord elements on mobile?

Not directly inside the mobile app. On Android, open the Discord web app in Chrome and use chrome://inspect remote debugging from a connected desktop. On iOS, open the web app in Safari and use Safari's Web Inspector from a connected Mac. A cloud cross-browser platform also lets you inspect the Discord web app across many browser and OS combinations.

• How to Open Inspect Element on Chrome?
• How to Inspect Element on Firefox?
• How to Open Chrome Developer Tools?
• How to Open Console in Chrome?
• How to Inspect on Macbook?