Vscode-remote-release: Breakpoint set but not yet bound in

[alcbotta]

• VSCode Version: 1.41.0
• Local OS Version: Windows 10
• Remote OS Version: Docker image node:12.13
• Remote Extension/Connection Type: Docker

Steps to Reproduce:

1. create .devcontainer folder and add the following files:
   .devcontainer.json

{
  "name": "Node.js Sample",
  "dockerFile": "Dockerfile",
  // Specifies a list of ports that should be published.
  "appPort": ["3006:3000"],
  // Comment out the next line to run as root instead. Linux users, update
  // Dockerfile with your user's UID/GID if not 1000.
  "runArgs": ["-u", "node"],
  // Use 'settings' to set *default* container specific settings.json values on container create.
  // You can edit these settings after create using File > Preferences > Settings > Remote.
  "settings": {
    "terminal.integrated.shell.linux": "/bin/bash"
  },
  // Specifies a command that should be run after the container has been created.
  //   "postCreateCommand": "yarn install",
  "extensions": [
    "dbaeumer.vscode-eslint",
    "msjsdiag.debugger-for-chrome",
    "esbenp.prettier-vscode"
  ]
}

Dockerfile:

FROM node:12.13

# Avoid warnings by switching to noninteractive
ENV DEBIAN_FRONTEND=noninteractive

# The node image comes with a base non-root 'node' user which this Dockerfile
# gives sudo access. However, for Linux, this user's GID/UID must match your local
# user UID/GID to avoid permission issues with bind mounts. Update USER_UID / USER_GID 
# if yours is not 1000. See https://aka.ms/vscode-remote/containers/non-root-user.
ARG USER_UID=1000
ARG USER_GID=$USER_UID

# Configure apt and install packages
RUN apt-get update \
    && apt-get -y install --no-install-recommends apt-utils dialog 2>&1 \ 
    #
    # Verify git and needed tools are installed
    && apt-get install -y git procps \
    #
    # Remove outdated yarn from /opt and install via package 
    # so it can be easily updated via apt-get upgrade yarn
    && rm -rf /opt/yarn-* \
    && rm -f /usr/local/bin/yarn \
    && rm -f /usr/local/bin/yarnpkg \
    && apt-get install -y curl apt-transport-https lsb-release \
    && curl -sS https://dl.yarnpkg.com/$(lsb_release -is | tr '[:upper:]' '[:lower:]')/pubkey.gpg | apt-key add - 2>/dev/null \
    && echo "deb https://dl.yarnpkg.com/$(lsb_release -is | tr '[:upper:]' '[:lower:]')/ stable main" | tee /etc/apt/sources.list.d/yarn.list \
    && apt-get update \
    && apt-get -y install --no-install-recommends yarn \
    #
    # Install eslint globally
    && npm install -g eslint \
    #
    # Create a non-root user to use if preferred - see https://aka.ms/vscode-remote/containers/non-root-user.
    && if [ "$USER_GID" != "1000" ]; then groupmod node --gid $USER_GID; fi \
    && if [ "$USER_UID" != "1000" ]; then usermod --uid $USER_UID node; fi \
    # [Optional] Add sudo support for non-root users
    && apt-get install -y sudo \
    && echo node ALL=\(root\) NOPASSWD:ALL > /etc/sudoers.d/node \
    && chmod 0440 /etc/sudoers.d/node \
    #
    # Clean up
    && apt-get autoremove -y \
    && apt-get clean -y \
    && rm -rf /var/lib/apt/lists/*

# Switch back to dialog for any ad-hoc use of apt-get
ENV DEBIAN_FRONTEND=

1. Reopen in container
2. create new react app
   npx create-react-app my-app
3. move files from my-app folder to root folder
4. Launch.json configuration file:

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3006",
      "webRoot": "${workspaceFolder}",
      "trace": true
    }
  ]
}

When trying to debug, it shows the message: Breakpoint set but not yet bound in

From the Debug Console, the .scripts command seems to return all the file

› http://localhost:3006/static/js/0.chunk.js (/__vscode-remote-uri__/workspaces/test_create_react_app/static/js/0.chunk.js)
    - /workspaces/test_create_react_app/node_modules/@babel/runtime/helpers/arrayWithHoles.js (/workspaces/test_create_react_app/node_modules/@babel/runtime/helpers/arrayWithHoles.js)
    - /workspaces/test_create_react_app/node_modules/@babel/runtime/helpers/iterableToArrayLimit.js (/workspaces/test_create_react_app/node_modules/@babel/runtime/helpers/iterableToArrayLimit.js)
    - /workspaces/test_create_react_app/node_modules/@babel/runtime/helpers/nonIterableRest.js (/workspaces/test_create_react_app/node_modules/@babel/runtime/helpers/nonIterableRest.js)
    - /workspaces/test_create_react_app/node_modules/@babel/runtime/helpers/slicedToArray.js (/workspaces/test_create_react_app/node_modules/@babel/runtime/helpers/slicedToArray.js)
    - /workspaces/test_create_react_app/node_modules/ansi-styles/index.js (/workspaces/test_create_react_app/node_modules/ansi-styles/index.js)
    - /workspaces/test_create_react_app/node_modules/chalk/index.js (/workspaces/test_create_react_app/node_modules/chalk/index.js)
    - /workspaces/test_create_react_app/node_modules/chalk/node_modules/supports-color/browser.js (/workspaces/test_create_react_app/node_modules/chalk/node_modules/supports-color/browser.js)
    - /workspaces/test_create_react_app/node_modules/chalk/templates.js (/workspaces/test_create_react_app/node_modules/chalk/templates.js)
    - /workspaces/test_create_react_app/node_modules/color-convert/conversions.js (/workspaces/test_create_react_app/node_modules/color-convert/conversions.js)
    - /workspaces/test_create_react_app/node_modules/color-convert/index.js (/workspaces/test_create_react_app/node_modules/color-convert/index.js)
    - /workspaces/test_create_react_app/node_modules/color-convert/route.js (/workspaces/test_create_react_app/node_modules/color-convert/route.js)
    - /workspaces/test_create_react_app/node_modules/color-name/index.js (/workspaces/test_create_react_app/node_modules/color-name/index.js)
    - /workspaces/test_create_react_app/node_modules/css-loader/dist/runtime/api.js (/workspaces/test_create_react_app/node_modules/css-loader/dist/runtime/api.js)
    - /workspaces/test_create_react_app/node_modules/escape-string-regexp/index.js (/workspaces/test_create_react_app/node_modules/escape-string-regexp/index.js)
    - /workspaces/test_create_react_app/node_modules/events/events.js (/workspaces/test_create_react_app/node_modules/events/events.js)
    - /workspaces/test_create_react_app/node_modules/node-libs-browser/node_modules/punycode/punycode.js (/workspaces/test_create_react_app/node_modules/node-libs-browser/node_modules/punycode/punycode.js)
    - /workspaces/test_create_react_app/node_modules/object-assign/index.js (/workspaces/test_create_react_app/node_modules/object-assign/index.js)
    - /workspaces/test_create_react_app/node_modules/process/browser.js (/workspaces/test_create_react_app/node_modules/process/browser.js)
    - /workspaces/test_create_react_app/node_modules/prop-types/checkPropTypes.js (/workspaces/test_create_react_app/node_modules/prop-types/checkPropTypes.js)
    - /workspaces/test_create_react_app/node_modules/prop-types/lib/ReactPropTypesSecret.js (/workspaces/test_create_react_app/node_modules/prop-types/lib/ReactPropTypesSecret.js)
    - /workspaces/test_create_react_app/node_modules/querystring-es3/decode.js (/workspaces/test_create_react_app/node_modules/querystring-es3/decode.js)
    - /workspaces/test_create_react_app/node_modules/querystring-es3/encode.js (/workspaces/test_create_react_app/node_modules/querystring-es3/encode.js)
    - /workspaces/test_create_react_app/node_modules/querystring-es3/index.js (/workspaces/test_create_react_app/node_modules/querystring-es3/index.js)
    - /workspaces/test_create_react_app/node_modules/react-dev-utils/formatWebpackMessages.js (/workspaces/test_create_react_app/node_modules/react-dev-utils/formatWebpackMessages.js)
    - /workspaces/test_create_react_app/node_modules/react-dev-utils/launchEditorEndpoint.js (/workspaces/test_create_react_app/node_modules/react-dev-utils/launchEditorEndpoint.js)
    - /workspaces/test_create_react_app/node_modules/react-dev-utils/webpackHotDevClient.js (/workspaces/test_create_react_app/node_modules/react-dev-utils/webpackHotDevClient.js)
    - /workspaces/test_create_react_app/node_modules/react-dom/cjs/react-dom.development.js (/workspaces/test_create_react_app/node_modules/react-dom/cjs/react-dom.development.js)
    - /workspaces/test_create_react_app/node_modules/react-dom/index.js (/workspaces/test_create_react_app/node_modules/react-dom/index.js)
    - /workspaces/test_create_react_app/node_modules/react-error-overlay/lib/index.js (/workspaces/test_create_react_app/node_modules/react-error-overlay/lib/index.js)
    - /workspaces/test_create_react_app/node_modules/react/cjs/react.development.js (/workspaces/test_create_react_app/node_modules/react/cjs/react.development.js)
    - /workspaces/test_create_react_app/node_modules/react/index.js (/workspaces/test_create_react_app/node_modules/react/index.js)
    - /workspaces/test_create_react_app/node_modules/scheduler/cjs/scheduler-tracing.development.js (/workspaces/test_create_react_app/node_modules/scheduler/cjs/scheduler-tracing.development.js)
    - /workspaces/test_create_react_app/node_modules/scheduler/cjs/scheduler.development.js (/workspaces/test_create_react_app/node_modules/scheduler/cjs/scheduler.development.js)
    - /workspaces/test_create_react_app/node_modules/scheduler/index.js (/workspaces/test_create_react_app/node_modules/scheduler/index.js)
    - /workspaces/test_create_react_app/node_modules/scheduler/tracing.js (/workspaces/test_create_react_app/node_modules/scheduler/tracing.js)
    - /workspaces/test_create_react_app/node_modules/strip-ansi/index.js (/workspaces/test_create_react_app/node_modules/strip-ansi/index.js)
    - /workspaces/test_create_react_app/node_modules/strip-ansi/node_modules/ansi-regex/index.js (/workspaces/test_create_react_app/node_modules/strip-ansi/node_modules/ansi-regex/index.js)
    - /workspaces/test_create_react_app/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js (/workspaces/test_create_react_app/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js)
    - /workspaces/test_create_react_app/node_modules/url/url.js (/workspaces/test_create_react_app/node_modules/url/url.js)
    - /workspaces/test_create_react_app/node_modules/url/util.js (/workspaces/test_create_react_app/node_modules/url/util.js)
    - /workspaces/test_create_react_app/node_modules/webpack/buildin/global.js (/workspaces/test_create_react_app/node_modules/webpack/buildin/global.js)
    - /workspaces/test_create_react_app/node_modules/webpack/buildin/module.js (/workspaces/test_create_react_app/node_modules/webpack/buildin/module.js)
    - /workspaces/test_create_react_app/node_modules/webpack/hot/dev-server.js (/workspaces/test_create_react_app/node_modules/webpack/hot/dev-server.js)
    - /workspaces/test_create_react_app/node_modules/webpack/hot/emitter.js (/workspaces/test_create_react_app/node_modules/webpack/hot/emitter.js)
    - /workspaces/test_create_react_app/node_modules/webpack/hot/log-apply-result.js (/workspaces/test_create_react_app/node_modules/webpack/hot/log-apply-result.js)
    - /workspaces/test_create_react_app/node_modules/webpack/hot/log.js (/workspaces/test_create_react_app/node_modules/webpack/hot/log.js)
› http://localhost:3006/static/js/bundle.js (/__vscode-remote-uri__/workspaces/test_create_react_app/static/js/bundle.js)
    - /workspaces/test_create_react_app/webpack/bootstrap (/workspaces/test_create_react_app/webpack/bootstrap)
› http://localhost:3006/static/js/main.chunk.js (/__vscode-remote-uri__/workspaces/test_create_react_app/static/js/main.chunk.js)
    - /workspaces/test_create_react_app/src/App.css (/workspaces/test_create_react_app/src/App.css)
    - /workspaces/test_create_react_app/src/index.css (/workspaces/test_create_react_app/src/index.css)
    - webpack:///./src/App.css?498e (/__vscode-remote-uri__/workspaces/test_create_react_app/src/App.css)
    - /workspaces/test_create_react_app/src/App.js (/workspaces/test_create_react_app/src/App.js)
    - webpack:///./src/index.css?e32c (/__vscode-remote-uri__/workspaces/test_create_react_app/src/index.css)
    - /workspaces/test_create_react_app/src/index.js (/workspaces/test_create_react_app/src/index.js)
    - /workspaces/test_create_react_app/src/logo.svg (/workspaces/test_create_react_app/src/logo.svg)
    - /workspaces/test_create_react_app/src/serviceWorker.js (/workspaces/test_create_react_app/src/serviceWorker.js)

Thank you.
Kind regards.

[roblourens]

Which file did you set the breakpoint in, and is the path correct for that in the above output?

[alcbotta]

I have set the breakpoints at the App.js file (created by the 'create-react-app' command)

In regards to the path, this is my launch.json (I tried adding '/src' to the webRoot, but it didn't work also):

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3006",
      "webRoot": "${workspaceFolder}",
      "trace": true
    }
  ]
}

[masa-iwasaki]

I have simillar issues but on WSL2.

• VSCode Version: 1.43.2
• Local OS Version: Windows 10 Pro 2004 9041.172
• Remote OS Version: Ubuntu 18.04
• Remote Extension/Connection Type: WSL

Steps to Reproduce:

1. Create new React app with Typescript support

npx create-react-app cra --typescript

1. Overwrite launch.json as below

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000",
      "trace": "verbose",
      "webRoot": "${workspaceFolder}/",
    }
  ]
}

1. Set a breakpoint in index.tsx

1. Start the app with yarn run start and run debugger.
2. Reload the Chrome window opend by debugger. But the application doesn't stop at the breakpoint.

Does this issue occur when you try this locally?: Not tried
Does this issue occur when you try this locally and all extensions are disabled?: Not tried

I also attached the result of .scripts and debug console logs.

• scripts.txt
• debug_console.txt

And additional version infomation for other tools.

• Node: v12.16.1
• Yarn: 1.17.3
• create-react-app: 3.4.1

[benc-uk]

Seeing the same issue

I've tried everything I can think of and no joy. I've battled with the VS Code debugger and WSL way back to when WSL first launched so know most of the tricks, but can't crack it

[LiamKarlMitchell]

Having this problem when trying to attach to a port that is forwarded from docker.

Files in Ubuntu at:
/home/ubuntu/projects/server

Docker container runs and port forwards 9229:9229 specified in the docker-composer.yml

Can attach and see console output but breakpoints never hit.

Can attach just fine using Google Chrome node.js dev tools or Webstorm IDE.
But a colleague of mine wants to use vscode.

I suspect it is an issue with the path mappings
Is someone able to point me in the right direction?

In ubuntu on WSL2 on Windows 10 from windows update 2004 we cd to the folder and write code .
We added a launch.json to attach and click the button.

Can debug fine from windows using google chromes node.js debugger tool.

[roblourens]

Sorry for the slow response. Could you all try this with our new debugger implementation? We have fixed a lot of debugger bugs here. https://code.visualstudio.com/updates/v1_43#_new-javascript-debugger

[guerra08]

Having the same issue with WSL2 running Ubuntu 20.04.

Trying to debug an Express.js backend and a React client with no success.

Edit: tested with the nightly js debugger and still not working, unbound breakpoint.

[roblourens]

@guerra08 could you open a new issue in https://github.com/microsoft/vscode-js-debug/issues, set "trace": true in your launch config, try again with the new debugger, and include the log from the path in the debug console? Thanks

[guerra08]

Debug data from log .json.
vscode-debugadapter-1.zip

[iyio]

This modification in launch.json by Stack Overflow user Alex fixed this issue for me:
https://stackoverflow.com/a/62207696
The response also gives insight into the issue.

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

[alcbotta]

thanks a lot, @iyio! your solution seems to fix the issue.

[txh57]

Hi @iyio, thanks for your solution. It solved the issue that I had with WSL2 on Windows 2004.

[LiamKarlMitchell]

Does this work for node.js server as well not chrome url?