Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 597
39digits Avatar asked May 22 '20 11:05

39digits


People also ask

How do I enable breakpoints in VSCode?

Breakpoints can be toggled by clicking on the editor margin or using F9 on the current line. Finer breakpoint control (enable/disable/reapply) can be done in the Run and Debug view's BREAKPOINTS section.

How debug react app in VS code?

In VSCode we can simply put a breakpoint in our component which is currently being rendered in the browser and then click debug Attach to Chrome. The breakpoint will break on the next re-render of the component and we don't have to navigate on a new browser window.

How do I debug Chrome in VSCode?

To debug any project in either Chrome or Microsoft Edge, all you need to do is to start a session by pressing F5 or activating the debug icon in the menu bar and selecting “Run and debug”. Alternatively, you can also use the Visual Studio Code command palette and run the “Debug: Open Link” command.

How to debug react app in chrome?

(You will also have to install npm to run the code ) To debug the React Application, we first need to install Debugger for Chrome extension. From the left panel select the extensions or use the shortcut (ctrl+shift+x) to open Extension view. Now type “chrome” in the search box.

Do you use VSCode debugger for react development?

When developing a React app (or any JavaScript app), I heavily use console.log () for debugging purposes if something is not running as expected. Only if it's really tricky, I use the VSCode debugger. It's not that I don't like debuggers, debugging JS is just not as convenient as it is in other programming languages.

What is the name of the browser in react-scripts?

"scripts": { "start": "BROWSER='google chrome' BROWSER_ARGS='--remote-debugging-port=9222' react-scripts start", ... } The name of the browser depends on the operating system. For example, Chrome is google chrome on macOS, google-chrome on Linux and chrome on Windows. You have to close Chrome completely before running this script.

How do I create a breakpoint in VSCode?

Find your file (example App.js) and set a breakpoint there. Refresh the page and go to vscode. Set a breakpoint in the same place of the document, in the new file that appeared (/mnt/e/ in my case) and in your file.


1 Answers

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__/*"
      }
    }
  ]
}

like image 67
Alex Avatar answered Sep 21 '22 08:09

Alex