How to Open Developer Tools in VS Code

Visual Studio Code is built on the Electron framework, which combines the Chromium rendering engine and Node.js. Because of this architecture, you can inspect and debug the editor’s user interface just like a web page using Chrome Developer Tools. This guide provides step-by-step instructions on how to quickly enable and access Developer Tools in VS Code using three different methods: keyboard shortcuts, the Command Palette, and the application menu.

Method 1: Use the Keyboard Shortcut

The fastest way to open the Developer Tools is by using a keyboard shortcut.

Once pressed, the Developer Tools panel will dock to the side or bottom of your VS Code window.

Method 2: Use the Command Palette

If you prefer using the keyboard but cannot remember the shortcut, you can access the tool via the Command Palette.

  1. Open the Command Palette using Ctrl + Shift + P (Windows/Linux) or Cmd + Shift + P (macOS).
  2. Type Toggle Developer Tools into the search bar.
  3. Press Enter to execute the command.

Method 3: Use the Application Menu

For a mouse-driven approach, you can navigate through the VS Code top menu bar.

  1. Click on Help in the menu bar at the top of the screen.
  2. Select Toggle Developer Tools from the dropdown menu.

How to Inspect UI Elements

Once the Developer Tools window is open, you can inspect specific parts of the VS Code interface:

  1. Click the Inspect Element icon (a small mouse cursor over a square) in the top-left corner of the Developer Tools window.
  2. Hover over any part of the VS Code UI (such as the sidebar, editor tabs, or status bar) and click on it.
  3. The HTML structure and applied CSS styles for that element will highlight in the Elements panel, allowing you to troubleshoot extension UI bugs or find CSS classes for custom themes.