Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>View Image for Python DebuggingNew to Visual Studio Code? Get it now.
View Image for Python Debugging

View Image for Python Debugging

Elazar Cohen

|
61,413 installs
| (24) | Free
simply view the image of the image variables when debugging python
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Simply View Image for Python Debugging

This extension offers a powerful and versatile solution for visualizing images, plots, and tensors during Python debugging. It is designed to enhance your debugging workflow with a rich set of features.

Features

Image Viewer

A built-in, enhanced image viewer with the following capabilities:

Image Values

Image Values

Display pixel values directly on the image.

Heatmap

Heatmap

Visualize images as heatmaps with customizable color maps and value clipping.

Labels

Segmentation

View label images with color mapping (e.g., 0=black, 1=red, etc.).

Plot Viewer

Visualize plots from various sources, including:

  • matplotlib.pyplot.Figure
  • matplotlib.pyplot.Axis
  • Plotly Figures (requires saving backend, see here).

Tensor Viewer

Inspect tensors from PyTorch and NumPy.

  • numpy.ndarray is treated as a tensor if it has 4 channels or 3 channels but does not qualify as a single image. Requires scikit-image.

Watch View

Monitor image, plot, or tensor variables and refresh the view at each breakpoint.

  • Supports custom Python expressions (use with caution to avoid side effects).

Additional Features

  • Hover over variables to view their shape (unrelated to the image viewer, but useful nonetheless).
  • Open local image files (supports PNG, JPG, BMP, TIFF) in the viewer.
    I find this feature useful for label images, as they often have small values (0, 1, etc.), which the default viewer does not enhance.
  • A colorbar for heatmap images with adjustable value clipping.
  • Interactive Python cell support: Use the Variables tab and click the arrow next to a variable name to view the image.

Settings

Setting Description Default Value
svifpd.autoFetchImages Controls whether images are automatically fetched.
  • true: Automatically fetch images at each step.
  • false: Fetch images only when the "Fetch Image" button is clicked.
  • "pinned": Automatically fetch pinned images.
true
svifpd.restrictImageTypes Restricts the types that are considered images.
  • true: Only numpy is checked.
  • false: All types are checked.
This setting is useful for improving performance in some cases.
true

Q&A

Memory Issues

Problem: Memory usage increases significantly when using the extension.

Solution: Enable the restrictImageTypes setting (default: true).


Extension Links

  • VS Code Marketplace
  • Open VSX Registry

Acknowledgment

This extension builds upon the foundational work of john-guo. While none of the original code remains, his project served as a valuable inspiration for this extension. Thank you, John!

Development

Prerequisites

  • Node.js: Ensure you have Node.js installed.
  • Yarn: Install Yarn as the package manager.
  • Rust: Required for building the webview.

Build Instructions

  1. Install dependencies:
    yarn install
    
  2. Build the project:
    yarn build
    
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft