GitHub Copilot in VS Code Debugger: Inline Variable Suggestion Behavior

When you debug JavaScript, Python, or TypeScript code in VS Code, GitHub Copilot may display inline variable suggestions directly in the editor. These suggestions appear as gray text next to variable names, showing predicted values or type hints. This behavior occurs because Copilot analyzes the current debugging context, including breakpoints, stack frames, and variable states. This article explains why these suggestions appear, how they work, and how to control or disable them.

Why Copilot Shows Inline Variable Suggestions During Debugging

Copilot uses the VS Code Inlay Hints API to display inline variable suggestions. When the debugger is active and a breakpoint is hit, Copilot reads the current variable values from the debug adapter protocol. It then predicts the most likely value or type for each variable and renders it as an inlay hint directly next to the variable name in the editor.

This behavior is part of Copilot’s broader inline suggestion system, which also includes code completions and ghost text. The debugger-specific suggestions are designed to help you understand variable state without hovering over each variable or opening the Variables pane. The suggestions update in real time as you step through code.

How Copilot Determines Variable Values

Copilot does not execute your code. Instead, it reads the variable data provided by the VS Code debugger extension for your language. For JavaScript, this is the built-in Node.js debugger. For Python, it is the Python debugger extension. The debugger sends variable names, types, and current values to VS Code. Copilot then formats this data into inline hints.

When Inline Suggestions Appear

Inline variable suggestions appear only when all three conditions are true:

1. Debugger is active
   A debugging session is running and a breakpoint is paused on a line.
2. Variable is in scope
   The variable is defined in the current stack frame and has a known value.
3. Inlay hints are enabled
   The VS Code setting editor.inlayHints.enabled is set to "on" or "onUnlessPressed".

How to Control Inline Variable Suggestions

You can enable, disable, or customize inline variable suggestions through VS Code settings. There are three methods: the Settings UI, the command palette, and direct editing of settings.json.

Method 1: Using the Settings UI

1. Open Settings
   Press Ctrl+, on Windows/Linux or Cmd+, on macOS.
2. Search for inlay hints
   Type inlay hints in the search bar at the top.
3. Toggle the setting
   Under Editor: Inlay Hints > Enabled, choose one of three options:
   – on: Always show inlay hints including Copilot suggestions
   – onUnlessPressed: Show hints unless you press Ctrl or Alt (useful to temporarily hide them)
   – off: Never show inlay hints

Method 2: Using the Command Palette

1. Open Command Palette
   Press Ctrl+Shift+P on Windows/Linux or Cmd+Shift+P on macOS.
2. Run the command
   Type Developer: Toggle Inlay Hints and press Enter. This toggles the editor.inlayHints.enabled setting between on and off.

Method 3: Editing settings.json Directly

1. Open settings.json
   Press Ctrl+Shift+P on Windows/Linux or Cmd+Shift+P on macOS. Type Preferences: Open Settings (JSON) and press Enter.
2. Add or modify the setting
   Insert this line:
   "editor.inlayHints.enabled": "off"
   Replace "off" with "on" or "onUnlessPressed" as needed. Save the file.

Common Issues with Inline Variable Suggestions

Copilot Shows Incorrect or Stale Variable Values

Copilot displays the value the debugger provides. If the value appears wrong, verify the debugger itself is showing the correct value in the Variables pane. If the debugger shows a stale value, restart the debugging session. This often happens when you edit code while the debugger is paused.

Inline Suggestions Overlap with Other Hints

If other extensions also use inlay hints, the suggestions may overlap. For example, the TypeScript language service shows type hints for variables. To reduce overlap, disable inlay hints from other extensions individually in their settings. Alternatively, set editor.inlayHints.enabled to "offUnlessPressed" and hold Ctrl or Alt to see hints only when needed.

Copilot Does Not Show Any Inline Suggestions

This occurs when the debugger is not active, the variable is out of scope, or inlay hints are disabled. Verify the debugger is paused at a breakpoint. Check that the variable exists in the current scope by looking in the Variables pane. Then confirm editor.inlayHints.enabled is set to "on" or "onUnlessPressed".

Copilot Inline Suggestions vs Debugger Variables Pane

Item	Inline Suggestions	Variables Pane
Location	Next to variable name in editor	Separate panel in Run and Debug view
Visibility	Requires inlay hints enabled	Always visible when debugger is active
Data shown	Value or type hint	Name, value, type, and nested properties
Update frequency	On each debugger step	On each debugger step
Scope filtering	Only in-scope variables	Local, global, and closure variables
Customization	On/off via inlay hints setting	Filter by scope, search, and pin variables

Inline suggestions are faster to read because they appear directly in the code. The Variables pane provides more detail and is better for complex objects. Use inline suggestions for quick checks and the Variables pane for deep inspection.

You can now control inline variable suggestions from Copilot during debugging in VS Code. If the suggestions distract you, set editor.inlayHints.enabled to "off" in settings.json. For a faster debugging workflow, keep hints enabled but use "onUnlessPressed" to hide them temporarily with Ctrl or Alt. Combine inline hints with the Variables pane for the most efficient debugging experience.