Overview

RenderDoc for VS Code brings the full power of the RenderDoc graphics debugger into Visual Studio Code. Open any .rdc capture file and get an instant, first-class inspection experience — hierarchical draw call timelines, live shader source, full pipeline state, texture previews, GPU timing profiling, Mali shader analysis, and an AI-powered frame analyzer via GitHub Copilot Chat.

No context switching. No external viewers. Just your capture, your editor, and your agent.

Highlights

Quick Start

1. Install the extension in VS Code 1.95+
2. File → Open File… → select your .rdc capture
3. The RenderDoc sidebar appears automatically
4. Click any draw call → Inspector opens beside your editor
5. Run "Fetch GPU Timings" to populate durationUs per draw
6. Chat with @renderdoc for deep frame analysis

Requires: A local RenderDoc installation (for the replay runtime DLL). The extension auto-discovers the default install path; override via RenderDoc: Configure RenderDoc Path if needed.

Usage Guide

1 · Installing the Extension

Option A — from VSIX (recommended):

code --install-extension renderdoc-for-vscode-0.0.1.vsix

Or: Extensions panel → ··· menu → Install from VSIX…

Option B — from source: see Building from Source.

2 · Installing RenderDoc (runtime dependency)

The extension loads RenderDoc's replay library (renderdoc.dll / librenderdoc.so) at runtime. Install the official build — no patched fork needed.

renderdoc.org/builds — any stable version v1.30 or newer.

For non-default paths, run RenderDoc: Configure RenderDoc Path or set renderdoc.installPath in Settings.

3 · Opening a Capture

• File explorer: right-click a .rdc → Open RDC Capture
• Command palette: RenderDoc: Open RDC Capture
• Drag & drop a .rdc onto the VS Code window

The activity bar shows three sidebar views: Capture Info, Draw Calls, and Resources.

4 · Inspector Workflow

Click any draw call in the Draw Calls tree to open the tabbed Inspector panel.

Navigation:

• ‹ / › buttons — step to previous/next event
• EID input → Go — jump directly to any event by number

5 · GPU Timing Profiling

1. Open the Draw Calls sidebar.
2. Click the Fetch GPU Timings button (⏱).
3. Each draw call is annotated with its measured GPU time (durationUs).
4. Ask @renderdoc to rank draws by cost — it reads the timing data directly.

6 · Mali Offline Compiler Integration

1. Install the Mali Offline Compiler from Arm Developer.
2. Set renderdoc.maliOfflineCompilerPath to the path of malioc.exe in VS Code Settings.
3. In the Inspector → Shaders tab, click Analyze with Mali Offline Compiler.
4. The analysis result appears in a resizable pane beside the shader source.
5. Ask @renderdoc for optimization suggestions — it has access to the Mali analysis output.

7 · Copilot Chat (@renderdoc)

Open VS Code Chat (Ctrl+Alt+I) and address @renderdoc:

@renderdoc 帮我找出当前帧耗时最高的前20个Draw，带完整层级名称
@renderdoc Analyze the fragment shader for EID 495 and suggest optimizations
@renderdoc Find all draw calls rendering to the shadow map
@renderdoc Show pipeline state diff between EID 300 and EID 355
@renderdoc Which textures are bound at the currently selected draw?

The participant reads your active Inspector selection (focused EID, draw call, sidebar resource) so natural references like "this draw" or "the current event" resolve automatically.

Available tools (also invokable via #tool-name):

8 · Exporting Resources

• Texture → PNG: right-click a texture in Resources → Export Texture (ASTC, HDR, sRGB handled automatically)
• Shader source: Inspector → Shaders tab → Copy button, or Open in Editor for a full VS Code buffer

9 · Troubleshooting

Architecture

┌──────────────────────────────────────────────────────────────────────┐
│                        VS Code Extension Host                        │
│  ┌──────────────┐   ┌──────────────────┐   ┌──────────────────────┐  │
│  │   Sidebar    │   │    Inspector     │   │  Copilot Participant  │  │
│  │   Views      │   │    Webview       │   │  + LM Tools (10×)    │  │
│  └──────┬───────┘   └────────┬─────────┘   └──────────┬───────────┘  │
│         └────────────────────┼────────────────────────┘              │
│                              ▼                                       │
│                   ┌─────────────────────┐                            │
│                   │   RenderDocBridge   │  ← TypeScript JSON-RPC     │
│                   └──────────┬──────────┘                            │
└──────────────────────────────┼───────────────────────────────────────┘
                               │ stdin / stdout
                               ▼
                   ┌───────────────────────┐
                   │  renderdoc_bridge.exe │  ← C++ native bridge
                   │  (links to RenderDoc) │
                   └───────────┬───────────┘
                               │ IReplayController
                               ▼
                   ┌───────────────────────┐
                   │  renderdoc_replay.dll │
                   └───────────────────────┘

The native bridge maintains a long-lived replay session, caches pipeline state per EID, and streams results as JSON — shader disassembly, descriptor access, GPU timings, and texture readback all execute at native speed.

Project Layout

renderdoc-for-vscode/
├── src/
│   ├── extension.ts              # Activation, command registration
│   ├── renderdocBridge.ts        # Native bridge client (JSON-RPC over stdio)
│   ├── rdcParser.ts              # Pure-TS .rdc header/section parser
│   ├── views/                    # Sidebar tree providers + Inspector webview
│   │   ├── inspectorPanel.ts     # Main Inspector panel (IPC, Mali analysis)
│   │   └── inspector/html.ts     # Inspector HTML template generation
│   └── copilot/
│       ├── chatParticipant.ts    # @renderdoc Copilot Chat handler
│       └── tools.ts              # Language model tool implementations
├── native/
│   ├── include/                  # RenderDoc public headers (vendored)
│   ├── 3rdparty/                 # ASTC decoder, stb_image_write
│   ├── src/                      # main.cpp, dll_loader.cpp, json.hpp
│   └── CMakeLists.txt
├── media/inspector/              # Webview frontend (JS + CSS)
├── package.json
├── tsconfig.json
└── LICENSE

Building from Source

Prerequisites

• Node.js 18+ and npm
• CMake 3.20+ with a C++17 compiler (MSVC 2019+ / Clang 12+ / GCC 10+)
• RenderDoc installed locally (replay DLL required at runtime)

Build

# TypeScript extension
npm install
npm run compile

# C++ native bridge (Windows / MSVC)
cd native
cmake -B build -A x64
cmake --build build --config Release

The compiled renderdoc_bridge.exe is discovered automatically by the extension at runtime.

Run in Development

Press F5 in VS Code — launches an Extension Development Host with the extension loaded and the debugger attached.

Configuration

Run RenderDoc: Configure RenderDoc Path for a guided setup wizard.

Supported APIs

Contributing

Pull requests are welcome. For significant changes, open an issue first to discuss the design.

1. Fork the repository
2. Create a feature branch: git checkout -b feat/my-feature
3. Write conventional commit messages
4. Open a PR targeting main

License

Released under the MIT License.

RenderDoc is © Baldur Karlsson and contributors, licensed under the MIT License.