Skip to main content
The Developer Tools commands allow you to open and close an integrated DevTools panel within the View Exports SVG viewer for inspecting and debugging SVG icon properties.

​
Commands

Open DevTools

Command ID: JT-View-Exports-SVG.openDevToolsTitle: Open Developer ToolsIcon: Custom tools icon (filled)

Close DevTools

Command ID: JT-View-Exports-SVG.closeDevToolsTitle: Close Developer ToolsIcon: Custom tools icon (outline)

Category

View Exports SVG

​
Availability

Both commands are available when:
  • The View Exports SVG webview panel is active (activeWebviewPanelId == 'JT-View-Exports-SVG')
  • Actions are enabled (JT-View-Exports-SVG.showActions == true)

​
Additional Conditions

  • Open DevTools: Only shown when DevTools is currently closed
    • !JT-View-Exports-SVG.isOpenDevTools
  • Close DevTools: Only shown when DevTools is currently open
    • JT-View-Exports-SVG.isOpenDevTools

​
Usage

​
From the Editor Title Bar

When the View Exports SVG panel is active, you’ll see a tools icon in the editor title bar:
1

Opening DevTools

Click the filled tools icon in the title bar to open the DevTools panel
2

Closing DevTools

Click the outline tools icon in the title bar to close the DevTools panel

​
From Command Palette

1

Open Command Palette

Press Ctrl/Cmd + Shift + P
2

Search for command

Type “View Exports SVG: Open Developer Tools” or “View Exports SVG: Close Developer Tools”
3

Execute

Press Enter to toggle the DevTools state

​
DevTools Panel Features

The DevTools panel provides:
  • Real-time property inspection for selected SVG icons
  • Interactive property editing to test different configurations
  • SVG code preview showing the current icon markup
  • Attribute debugging to understand icon rendering
The DevTools panel is especially useful when customizing icon properties or troubleshooting rendering issues.

​
Configuration

​
Default Click-to-Open Behavior

Control whether clicking on an icon opens DevTools automatically:
settings.json
{
  "JT-View-Exports-SVG.defaultClickToOpenDevTools": true
}
Clicking an icon in the viewer automatically opens the DevTools panel
DevTools must be manually opened using the command or title bar button

​
Button Placement

The DevTools toggle button appears in the editor title bar at:
  • Navigation group position 2 (navigation@2)
  • Located between the expand/collapse controls and the clear cache button

Build docs developers (and LLMs) love

Get started for freeTalk to us