Breakpoints not working debugging React app in Chrome through Visual Studio Code on Windows 10 and WSL2

Question

After this year's MSBuild conference and the announcement of Terminal 1.x, winget and other extras, I wanted to give Windows 10 another test run ahead of needing to purchase a new laptop (Surface Book 3 or MacBook Pro...that is the question).

The Issue

Breakpoints aren't working when debugging web apps in Chrome on Windows 10 using WSL2 and Visual Studio Code. When running a debug session the message Breakpoint set but not yet bound is shown.

The exact same app works flawlessly when debugging on MacOS.

My Setup

MacBook Pro running the latest version of MacOS with Windows 10 Pro installed under BootCamp.

Windows 10 has WSL2 running Ubuntu 20.04. Terminal 1.x is installed and used to access the Linux commandline.

Visual Studio Code is the latest 1.45.1 stable release and includes the WSL remote development extension (0.44.2) on Windows 10. VSCode is launched from within WSL2 by running code . within the project directory.

Debugger for Chrome extension is 4.12.8

The Application

The application is a default Create React App with only a small change to assign breakpoints.

I start by running:

npx create-react-app sandbox

I then simplified src/App.js and added a few arbitrary variables and assignments to use as breakpoint tests.

The App.js file contents.

import React from 'react';
import './styles/main.css';

function App() {
  const test = true;
  let temp = 9;
  temp = 10;
  return (
    <div>
      <h1>Breakpoint test</h1>
      <p>Did it work?</p>
    </div>
  );
}

export default App;

I place a breakpoint on the const and let creation lines as well as the reassignment of temp.

My launch.json contents as recommended by the Create React App editor setup documentation.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

Win10 - What happens when running a Debug session?

I run the Create React App using npm run start and when I run the Launch Chrome debug config it automatically opens Chrome as expected.

Unfortunately, the breakpoints are ignored and inside Visual Studio Code the breakpoints are shown as unfilled circles. The message given is Breakpoint set but not yet bound.

MacOS - What happens when running a Debug session?

Chrome opens and control is shifted back to Visual Studio Code with the breakpoint information showing (e.g. variables data, call stack, etc).

Win10 - Firefox works

Interesting side point but Firefox debugging works. When running a Firefox debug session I do have to refresh the initial page load before the breakpoints trigger though.

The breakpoint initially showed the error Unverified Breakpoint. Clicking on this prompted a wizard to add a pathMappings to my config.

The Firefox launch.json configuration in use on Windows 10 is:

    {
      "name": "Launch Firefox",
      "type": "firefox",
      "request": "launch",
      "reAttach": true,
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "pathMappings": [
          {
             "url": "http://localhost:3000/home/rando/dev/sandbox/src",
             "path": "${workspaceFolder}/src"
          }
      ]
    }

Note that /home/rando/dev/sandbox/src is the location of the app within WSL2 Ubuntu. MacOS Firefox setup is the same but without the pathMappings.

Conclusion

At this stage I can only conclude it is something to do with the path mappings needing to be set differently despite Visual Studio Code WSL documentation hinting no additional changes are required.

Help me, StackOverflow. You're my only hope.

Answer 1

I just ran into this and I think I have it working for myself. Using the .script command of the Debugger for Chrome extension, I saw the below output.

› http://localhost:3000/static/js/0.chunk.js (/__vscode-remote-uri__/home/user/projects/TachiWeb-React/src/static/js/0.chunk.js)
    - /home/user/projects/TachiWeb-React/node_modules/@babel/runtime-corejs2/core-js/date/now.js (/home/user/projects/TachiWeb-React/node_modules/@babel/runtime-corejs2/core-js/date/now.js)

It seems it doesn't append your webroot to the inferred local path. But using ${webRoot}/* also doesn't work for some reason. Doing so leads to your path repeating twice like the below result.

/__vscode-remote-uri__/home/user/projects/TachiWeb-React/src/home/user/projects/TachiWeb-React/node_modules/@babel/runtime-corejs2/core-js/date/now.js

But manually writing out "/__vscode-remote-uri__/*" seems to get round the above duplicate path problem.

This is my working configuration of launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "WSL Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "/*": "/__vscode-remote-uri__/*"
      }
    }
  ]
}