Debugging with Visual Studio Code

This page contains tips for editing and debugging scratch-gui, scratch-vm, scratch-render, and related repositories using Visual Studio Code, also known as VS Code. This page does NOT contain tips for using Visual Studio, which is a separate development environment with a similar name.

VS Code Extensions

VS Code by itself provides a very basic experience; for a more complete editing and debugging experience you'll need to install some extensions. This section lists some extensions that work well with the Scratch 3.0 repositories.

Please note that the extensions marketplace changes rapidly and this information may be out of date; this is just meant as a starting point.

Extension Name	Extension ID / search term	Notes
Code Spell checker	streetsidesoftware.code-spell-checker
Debugger for Chrome	msjsdiag.debugger-for-chrome	See below for setup help
EditorConfig for VS Code	editorconfig.editorconfig
EJS language support	digitalbrainstem.javascript-ejs-support
ESLint	dbaeumer.vscode-eslint
GitLens — Git supercharged	eamodio.gitlens
GLSL Lint	cadenas.vscode-glsllint	Specifically for editing shaders in scratch-render
HTML CSS Support	ecmel.vscode-html-css	Primarily for scratch-gui
Markdown All in One	yzhang.markdown-all-in-one
markdownlint	davidanson.vscode-markdownlint
Node.js Modules Intellisense	leizongmin.node-module-intellisense
npm	eg2.vscode-npm-script
Visual Studio IntelliCode	visualstudioexptteam.vscodeintellicode
XML	redhat.vscode-xml
YAML	redhat.vscode-yaml

Debugging in VS Code

These instructions will focus on debugging in Chrome or Chromium. It should be possible to use other browsers but you'll need different VS Code extensions and at least some of the setup instructions will be different.

Step 0: Install the basics

Goal: Install all software necessary for a basic Scratch 3.0 debugging experience.

1. Install VS Code
   • Download: https://code.visualstudio.com/
   • Homebrew: brew cask install visual-studio-code
   • Chocolatey: cinst vscode
2. Install Chrome or Chromium
   • NOTE: Consider using a different browser from the one you use for regular browsing. It can occasionally be nice to restart the browser for debugging purposes and that can be annoying if it also means closing all your Stack Overflow and MDN reference tabs.
   • Download
     • Chrome: https://www.google.com/chrome/
     • Chromium: https://chromium.woolyss.com/ (WARNING: this is an unofficial site)
   • Homebrew: brew cask install google-chrome or brew cask install chromium
   • Chocolatey: cinst GoogleChrome or cinst chromium
3. In VS Code, install the "Debugger for Chrome" extension (search for msjsdiag.debugger-for-chrome)
4. Clone the Scratch 3.0 repositories: see Getting Started

Step 1: Running in the debugger

Goal: Get VS Code to pause when the code reaches a debugger statement you've manually added to the code.

Step 2: Breakpoints and Source Maps

Goal: Get VS Code to pause when the code reaches a breakpoint set through VS Code.