Vscode-js-debug: Cannot set breakponint in remote development env (create app using create-react-app)

Created on 14 Nov 2019 · 21Comments · Source: microsoft/vscode-js-debug

VS Code Version: 1.40.1
Log file (set "trace": true in launch config): vscode-chrome-debug.txt

Steps to reproduce:

cd to an empty folder
yarn create react-app . to create a fresh react app
test code:

import './App.css';
import React, { useState } from 'react';

function App() {
  const [date, setDate] = useState(new Date().toString());

  return (
    <div className="App">
      <p>{date}</p>
      <button onClick={() => setDate(new Date().toString())}>now</button>
    </div>
  );
}

export default App;

Set some breakpoints
ok now create launch.json, all using default config

{
    // 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://<remote_host_ip>:3030",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

I modified the url field to make sure Chrome in local can navigate to target devserver.

yarn start to start devserver
launch debugger
App running perfectly
but all breakpoints were ignored and debugger show me "breakpoint set but not yet bound"

Output of `.scripts` command in debugger

› VM21 (/__vscode-remote-uri__/mnt/work/Project/test/reacttest2/VM21)
› VM22 (/__vscode-remote-uri__/mnt/work/Project/test/reacttest2/VM22)
› VM24 (/__vscode-remote-uri__/mnt/work/Project/test/reacttest2/VM24)
› http://192.168.33.110:3000/main.069bf2beeaca19cabfce.hot-update.js (/__vscode-remote-uri__/mnt/work/Project/test/reacttest2/main.069bf2beeaca19cabfce.hot-update.js)
    - /mnt/work/Project/test/reacttest2/src/App.css (/mnt/work/Project/test/reacttest2/src/App.css)
    - webpack:///./src/App.css?498e (/__vscode-remote-uri__/mnt/work/Project/test/reacttest2/src/App.css)
    - /mnt/work/Project/test/reacttest2/src/App.js (/mnt/work/Project/test/reacttest2/src/App.js)
    - /mnt/work/Project/test/reacttest2/src/index.js (/mnt/work/Project/test/reacttest2/src/index.js)
› http://192.168.33.110:3000/static/js/1.chunk.js (/__vscode-remote-uri__/mnt/work/Project/test/reacttest2/static/js/1.chunk.js)
    - /mnt/work/Project/test/reacttest2/node_modules/ansi-styles/index.js (/mnt/work/Project/test/reacttest2/node_modules/ansi-styles/index.js)
    - /mnt/work/Project/test/reacttest2/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/arrayWithHoles.js (/mnt/work/Project/test/reacttest2/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/arrayWithHoles.js)
    - /mnt/work/Project/test/reacttest2/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/arrayWithHoles.js (/mnt/work/Project/test/reacttest2/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/arrayWithHoles.js)
    - /mnt/work/Project/test/reacttest2/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/iterableToArrayLimit.js (/mnt/work/Project/test/reacttest2/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/iterableToArrayLimit.js)
    - /mnt/work/Project/test/reacttest2/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/nonIterableRest.js (/mnt/work/Project/test/reacttest2/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/nonIterableRest.js)
    - /mnt/work/Project/test/reacttest2/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/slicedToArray.js (/mnt/work/Project/test/reacttest2/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/slicedToArray.js)
    - /mnt/work/Project/test/reacttest2/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/iterableToArrayLimit.js (/mnt/work/Project/test/reacttest2/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/iterableToArrayLimit.js)
    - /mnt/work/Project/test/reacttest2/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/nonIterableRest.js (/mnt/work/Project/test/reacttest2/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/nonIterableRest.js)
    - /mnt/work/Project/test/reacttest2/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/slicedToArray.js (/mnt/work/Project/test/reacttest2/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/slicedToArray.js)
    - /mnt/work/Project/test/reacttest2/node_modules/chalk/index.js (/mnt/work/Project/test/reacttest2/node_modules/chalk/index.js)
    - /mnt/work/Project/test/reacttest2/node_modules/chalk/node_modules/supports-color/browser.js (/mnt/work/Project/test/reacttest2/node_modules/chalk/node_modules/supports-color/browser.js)
    - /mnt/work/Project/test/reacttest2/node_modules/chalk/templates.js (/mnt/work/Project/test/reacttest2/node_modules/chalk/templates.js)
    - /mnt/work/Project/test/reacttest2/node_modules/color-convert/conversions.js (/mnt/work/Project/test/reacttest2/node_modules/color-convert/conversions.js)
    - /mnt/work/Project/test/reacttest2/node_modules/color-convert/index.js (/mnt/work/Project/test/reacttest2/node_modules/color-convert/index.js)
    - /mnt/work/Project/test/reacttest2/node_modules/color-convert/route.js (/mnt/work/Project/test/reacttest2/node_modules/color-convert/route.js)
    - /mnt/work/Project/test/reacttest2/node_modules/color-name/index.js (/mnt/work/Project/test/reacttest2/node_modules/color-name/index.js)
    - /mnt/work/Project/test/reacttest2/node_modules/css-loader/dist/runtime/api.js (/mnt/work/Project/test/reacttest2/node_modules/css-loader/dist/runtime/api.js)
    - /mnt/work/Project/test/reacttest2/node_modules/escape-string-regexp/index.js (/mnt/work/Project/test/reacttest2/node_modules/escape-string-regexp/index.js)
    - /mnt/work/Project/test/reacttest2/node_modules/inherits/inherits_browser.js (/mnt/work/Project/test/reacttest2/node_modules/inherits/inherits_browser.js)
    - /mnt/work/Project/test/reacttest2/node_modules/json3/lib/json3.js (/mnt/work/Project/test/reacttest2/node_modules/json3/lib/json3.js)
    - /mnt/work/Project/test/reacttest2/node_modules/ms/index.js (/mnt/work/Project/test/reacttest2/node_modules/ms/index.js)
    - /mnt/work/Project/test/reacttest2/node_modules/node-libs-browser/node_modules/punycode/punycode.js (/mnt/work/Project/test/reacttest2/node_modules/node-libs-browser/node_modules/punycode/punycode.js)
    - /mnt/work/Project/test/reacttest2/node_modules/object-assign/index.js (/mnt/work/Project/test/reacttest2/node_modules/object-assign/index.js)
    - /mnt/work/Project/test/reacttest2/node_modules/process/browser.js (/mnt/work/Project/test/reacttest2/node_modules/process/browser.js)
    - /mnt/work/Project/test/reacttest2/node_modules/prop-types/checkPropTypes.js (/mnt/work/Project/test/reacttest2/node_modules/prop-types/checkPropTypes.js)
    - /mnt/work/Project/test/reacttest2/node_modules/prop-types/lib/ReactPropTypesSecret.js (/mnt/work/Project/test/reacttest2/node_modules/prop-types/lib/ReactPropTypesSecret.js)
    - /mnt/work/Project/test/reacttest2/node_modules/querystring-es3/decode.js (/mnt/work/Project/test/reacttest2/node_modules/querystring-es3/decode.js)
    - /mnt/work/Project/test/reacttest2/node_modules/querystring-es3/encode.js (/mnt/work/Project/test/reacttest2/node_modules/querystring-es3/encode.js)
    - /mnt/work/Project/test/reacttest2/node_modules/querystring-es3/index.js (/mnt/work/Project/test/reacttest2/node_modules/querystring-es3/index.js)
    - /mnt/work/Project/test/reacttest2/node_modules/querystringify/index.js (/mnt/work/Project/test/reacttest2/node_modules/querystringify/index.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/formatWebpackMessages.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/formatWebpackMessages.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/launchEditorEndpoint.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/launchEditorEndpoint.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/debug/src/browser.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/debug/src/browser.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/debug/src/common.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/debug/src/common.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/entry.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/entry.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/event/close.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/event/close.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/event/emitter.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/event/emitter.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/event/event.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/event/event.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/event/eventtarget.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/event/eventtarget.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/event/trans-message.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/event/trans-message.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/facade.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/facade.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/iframe-bootstrap.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/iframe-bootstrap.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/info-ajax.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/info-ajax.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/info-iframe-receiver.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/info-iframe-receiver.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/info-iframe.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/info-iframe.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/info-receiver.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/info-receiver.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/location.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/location.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/main.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/main.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/shims.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/shims.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport-list.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport-list.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/browser/abstract-xhr.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/browser/abstract-xhr.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/browser/eventsource.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/browser/eventsource.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/browser/websocket.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/browser/websocket.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/eventsource.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/eventsource.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/htmlfile.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/htmlfile.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/iframe.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/iframe.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/jsonp-polling.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/jsonp-polling.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/lib/ajax-based.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/lib/ajax-based.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/lib/buffered-sender.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/lib/buffered-sender.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/lib/iframe-wrap.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/lib/iframe-wrap.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/lib/polling.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/lib/polling.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/lib/sender-receiver.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/lib/sender-receiver.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/receiver/eventsource.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/receiver/eventsource.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/receiver/htmlfile.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/receiver/htmlfile.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/receiver/jsonp.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/receiver/jsonp.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/receiver/xhr.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/receiver/xhr.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/sender/jsonp.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/sender/jsonp.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/sender/xdr.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/sender/xdr.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/sender/xhr-cors.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/sender/xhr-cors.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/sender/xhr-fake.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/sender/xhr-fake.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/sender/xhr-local.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/sender/xhr-local.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/websocket.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/websocket.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/xdr-polling.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/xdr-polling.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/xdr-streaming.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/xdr-streaming.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/xhr-polling.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/xhr-polling.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/xhr-streaming.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/transport/xhr-streaming.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/utils/browser-crypto.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/utils/browser-crypto.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/utils/browser.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/utils/browser.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/utils/escape.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/utils/escape.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/utils/event.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/utils/event.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/utils/iframe.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/utils/iframe.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/utils/log.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/utils/log.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/utils/object.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/utils/object.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/utils/random.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/utils/random.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/utils/transport.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/utils/transport.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/utils/url.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/utils/url.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/version.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/node_modules/sockjs-client/lib/version.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/webpackHotDevClient.js (/mnt/work/Project/test/reacttest2/node_modules/react-dev-utils/webpackHotDevClient.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dom/cjs/react-dom.development.js (/mnt/work/Project/test/reacttest2/node_modules/react-dom/cjs/react-dom.development.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-dom/index.js (/mnt/work/Project/test/reacttest2/node_modules/react-dom/index.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react-error-overlay/lib/index.js (/mnt/work/Project/test/reacttest2/node_modules/react-error-overlay/lib/index.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react/cjs/react.development.js (/mnt/work/Project/test/reacttest2/node_modules/react/cjs/react.development.js)
    - /mnt/work/Project/test/reacttest2/node_modules/react/index.js (/mnt/work/Project/test/reacttest2/node_modules/react/index.js)
    - /mnt/work/Project/test/reacttest2/node_modules/requires-port/index.js (/mnt/work/Project/test/reacttest2/node_modules/requires-port/index.js)
    - /mnt/work/Project/test/reacttest2/node_modules/scheduler/cjs/scheduler-tracing.development.js (/mnt/work/Project/test/reacttest2/node_modules/scheduler/cjs/scheduler-tracing.development.js)
    - /mnt/work/Project/test/reacttest2/node_modules/scheduler/cjs/scheduler.development.js (/mnt/work/Project/test/reacttest2/node_modules/scheduler/cjs/scheduler.development.js)
    - /mnt/work/Project/test/reacttest2/node_modules/scheduler/index.js (/mnt/work/Project/test/reacttest2/node_modules/scheduler/index.js)
    - /mnt/work/Project/test/reacttest2/node_modules/scheduler/tracing.js (/mnt/work/Project/test/reacttest2/node_modules/scheduler/tracing.js)
    - /mnt/work/Project/test/reacttest2/node_modules/strip-ansi/index.js (/mnt/work/Project/test/reacttest2/node_modules/strip-ansi/index.js)
    - /mnt/work/Project/test/reacttest2/node_modules/strip-ansi/node_modules/ansi-regex/index.js (/mnt/work/Project/test/reacttest2/node_modules/strip-ansi/node_modules/ansi-regex/index.js)
    - /mnt/work/Project/test/reacttest2/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js (/mnt/work/Project/test/reacttest2/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js)
    - /mnt/work/Project/test/reacttest2/node_modules/url-parse/index.js (/mnt/work/Project/test/reacttest2/node_modules/url-parse/index.js)
    - /mnt/work/Project/test/reacttest2/node_modules/url/url.js (/mnt/work/Project/test/reacttest2/node_modules/url/url.js)
    - /mnt/work/Project/test/reacttest2/node_modules/url/util.js (/mnt/work/Project/test/reacttest2/node_modules/url/util.js)
    - /mnt/work/Project/test/reacttest2/node_modules/webpack/buildin/amd-options.js (/mnt/work/Project/test/reacttest2/node_modules/webpack/buildin/amd-options.js)
    - /mnt/work/Project/test/reacttest2/node_modules/webpack/buildin/global.js (/mnt/work/Project/test/reacttest2/node_modules/webpack/buildin/global.js)
    - /mnt/work/Project/test/reacttest2/node_modules/webpack/buildin/module.js (/mnt/work/Project/test/reacttest2/node_modules/webpack/buildin/module.js)
› http://192.168.33.110:3000/static/js/bundle.js (/__vscode-remote-uri__/mnt/work/Project/test/reacttest2/static/js/bundle.js)
    - /mnt/work/Project/test/reacttest2/webpack/bootstrap (/mnt/work/Project/test/reacttest2/webpack/bootstrap)
› http://192.168.33.110:3000/static/js/main.chunk.js (/__vscode-remote-uri__/mnt/work/Project/test/reacttest2/static/js/main.chunk.js)
    - /mnt/work/Project/test/reacttest2/src/App.css (/mnt/work/Project/test/reacttest2/src/App.css)
    - /mnt/work/Project/test/reacttest2/src/index.css (/mnt/work/Project/test/reacttest2/src/index.css)
    - webpack:///./src/App.css?498e (/__vscode-remote-uri__/mnt/work/Project/test/reacttest2/src/App.css)
    - /mnt/work/Project/test/reacttest2/src/App.js (/mnt/work/Project/test/reacttest2/src/App.js)
    - webpack:///./src/index.css?e32c (/__vscode-remote-uri__/mnt/work/Project/test/reacttest2/src/index.css)
    - /mnt/work/Project/test/reacttest2/src/index.js (/mnt/work/Project/test/reacttest2/src/index.js)
    - /mnt/work/Project/test/reacttest2/src/serviceWorker.js (/mnt/work/Project/test/reacttest2/src/serviceWorker.js)

Workspace Path: /mnt/work/Project/test/reacttest2

Source

dev-techmoe

👍2

Most helpful comment

@tosinek it seems that your files are on windows directories.
I tried using the direct path to my folder to no avail.

      {
           "type": "chrome",
           "request": "launch",
           "name": "Launch Chrome against localhost",
           "url": "http://localhost:3000",
           "webRoot": "${workspaceFolder}/src",
           "sourceMapPathOverrides": {
               "/home/dev/test-breakpoing/*": "${webRoot}/*",
           }
       }

Here's a portiong of my .scripts output

› http://localhost:3000/static/js/bundle.js (/__vscode-remote-uri__/home/dev/test-breakpoing/src/static/js/bundle.js)
    - /home/dev/test-breakpoing/webpack/bootstrap (/__vscode-remote-uri__/home/dev/test-breakpoing/src/webpack/bootstrap)
› http://localhost:3000/static/js/main.chunk.js (/__vscode-remote-uri__/home/dev/test-breakpoing/src/static/js/main.chunk.js)
    - /home/dev/test-breakpoing/src/App.css (/__vscode-remote-uri__/home/dev/test-breakpoing/src/src/App.css)
    - /home/dev/test-breakpoing/src/index.css (/__vscode-remote-uri__/home/dev/test-breakpoing/src/src/index.css)
    - webpack:///./src/App.css?498e (/__vscode-remote-uri__/home/dev/test-breakpoing/src/static/js/webpack:/src/App.css)
    - /home/dev/test-breakpoing/src/App.tsx (/__vscode-remote-uri__/home/dev/test-breakpoing/src/src/App.tsx)
    - webpack:///./src/index.css?e32c (/__vscode-remote-uri__/home/dev/test-breakpoing/src/static/js/webpack:/src/index.css)
    - /home/dev/test-breakpoing/src/index.tsx (/__vscode-remote-uri__/home/dev/test-breakpoing/src/src/index.tsx)
    - /home/dev/test-breakpoing/src/logo.svg (/__vscode-remote-uri__/home/dev/test-breakpoing/src/src/logo.svg)
    - /home/dev/test-breakpoing/src/serviceWorker.ts (/__vscode-remote-uri__/home/dev/test-breakpoing/src/src/serviceWorker.ts)

Have you tried removing src from the webpath?
Also, could you try the attach option instead of launch?

I tried removing the src from webpath and have not tried doing the attach option.

However

I've found a fix. If I use the default launch config:

        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}",
            "sourceMapPathOverrides": {
                "/home/dev/test-breakpoing/*": "${webRoot}/*",
            }
        }

And then modify the settings.json and force chrome extension to be ran on the workspace it works!

    "remote.extensionKind": {
        "msjsdiag.debugger-for-chrome": [
            "workspace"
        ]
    },

flipch on 6 Jan 2020

👍3

All 21 comments

@dev-techmoe did you manage to solve this?

CristoAMH on 18 Nov 2019

bump

mmmikeal on 18 Nov 2019

@dev-techmoe did you manage to solve this?

I have no idea to solve this...

dev-techmoe on 19 Nov 2019

My sourcemapping is for sure messed up as my breakpoints wont detect. Ive tried to override them but they still point to my bundle js code. When you all type “.scripts” in the vscode debug console, does the path of the files show up for u in parenthesis like in the examples?

mmmikeal on 19 Nov 2019

My sourcemapping is for sure messed up as my breakpoints wont detect. Ive tried to override them but they still point to my bundle js code. When you all type “.scripts” in the vscode debug console, does the path of the files show up for u in parenthesis like in the examples?

@mmmikeal I think yes. They are all the correct path of the source code file in my workspace folder.
And I can set breakpoints in Chrome DevTools without any problem.

dev-techmoe on 20 Nov 2019

Is there any evidence at all that the debugger connects to the script? For example, in there anything in the variables section?

Did you try port forwarding as described in the docs?

I'm having trouble too and wondering if I need port forwarding, but I don't understand the docs. What port do I forward? My web server's just the default 80, but the port must be >= 1024. I tried 9222 from the -remote-debugging-port=9222 argument to chrome, but that didn't work. The Firefox extension does not require port forwarding.

sfsccn on 30 Nov 2019

I see the issue. The sourcemap has some absolute paths and some webpackpaths in it which causes it to bypass some remote path handling code.

roblourens on 5 Dec 2019

@sfsccn you just need to forward the port that your app is running on. Forwarding a port <1024 requires admin privileges on the machine. If you have that, you can just forward it in your ssh config file (if using Remote-SSH). Otherwise, you can pick a different port.

roblourens on 5 Dec 2019

@roblourens What should we do then? Following Create-React-App's guidance our launch.json should look like

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

Is this not correct for those running in remote, or wsl, environments?

Here's a log with more info https://gist.github.com/kwskii/db15a36c59f015ac0922d7a0e0c4e43f

flipch on 3 Jan 2020

👍1

Following the guides in React-create-app and Debugger for Chrome, it is working for me now with following:

            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceFolder}",
            "sourceMapPathOverrides": {
                "/mnt/c/myprojectFolder/*": "${webRoot}/*"
            }

tosinek on 6 Jan 2020

@tosinek it seems that your files are on windows directories.

I tried using the direct path to my folder to no avail.

```
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/src",
"sourceMapPathOverrides": {
"/home/dev/test-breakpoing/": "${webRoot}/",
}
}

Here's a portiong of my `.scripts` output

› http://localhost:3000/static/js/bundle.js (/__vscode-remote-uri__/home/dev/test-breakpoing/src/static/js/bundle.js)
- /home/dev/test-breakpoing/webpack/bootstrap (/__vscode-remote-uri__/home/dev/test-breakpoing/src/webpack/bootstrap)
› http://localhost:3000/static/js/main.chunk.js (/__vscode-remote-uri__/home/dev/test-breakpoing/src/static/js/main.chunk.js)
- /home/dev/test-breakpoing/src/App.css (/__vscode-remote-uri__/home/dev/test-breakpoing/src/src/App.css)
- /home/dev/test-breakpoing/src/index.css (/__vscode-remote-uri__/home/dev/test-breakpoing/src/src/index.css)
- webpack:///./src/App.css?498e (/__vscode-remote-uri__/home/dev/test-breakpoing/src/static/js/webpack:/src/App.css)
- /home/dev/test-breakpoing/src/App.tsx (/__vscode-remote-uri__/home/dev/test-breakpoing/src/src/App.tsx)
- webpack:///./src/index.css?e32c (/__vscode-remote-uri__/home/dev/test-breakpoing/src/static/js/webpack:/src/index.css)
- /home/dev/test-breakpoing/src/index.tsx (/__vscode-remote-uri__/home/dev/test-breakpoing/src/src/index.tsx)
- /home/dev/test-breakpoing/src/logo.svg (/__vscode-remote-uri__/home/dev/test-breakpoing/src/src/logo.svg)
- /home/dev/test-breakpoing/src/serviceWorker.ts (/__vscode-remote-uri__/home/dev/test-breakpoing/src/src/serviceWorker.ts)
```

flipch on 6 Jan 2020

@tosinek it seems that your files are on windows directories.

I tried using the direct path to my folder to no avail.

      {
           "type": "chrome",
           "request": "launch",
           "name": "Launch Chrome against localhost",
           "url": "http://localhost:3000",
           "webRoot": "${workspaceFolder}/src",
           "sourceMapPathOverrides": {
               "/home/dev/test-breakpoing/*": "${webRoot}/*",
           }
       }

Here's a portiong of my .scripts output

› http://localhost:3000/static/js/bundle.js (/__vscode-remote-uri__/home/dev/test-breakpoing/src/static/js/bundle.js)
    - /home/dev/test-breakpoing/webpack/bootstrap (/__vscode-remote-uri__/home/dev/test-breakpoing/src/webpack/bootstrap)
› http://localhost:3000/static/js/main.chunk.js (/__vscode-remote-uri__/home/dev/test-breakpoing/src/static/js/main.chunk.js)
    - /home/dev/test-breakpoing/src/App.css (/__vscode-remote-uri__/home/dev/test-breakpoing/src/src/App.css)
    - /home/dev/test-breakpoing/src/index.css (/__vscode-remote-uri__/home/dev/test-breakpoing/src/src/index.css)
    - webpack:///./src/App.css?498e (/__vscode-remote-uri__/home/dev/test-breakpoing/src/static/js/webpack:/src/App.css)
    - /home/dev/test-breakpoing/src/App.tsx (/__vscode-remote-uri__/home/dev/test-breakpoing/src/src/App.tsx)
    - webpack:///./src/index.css?e32c (/__vscode-remote-uri__/home/dev/test-breakpoing/src/static/js/webpack:/src/index.css)
    - /home/dev/test-breakpoing/src/index.tsx (/__vscode-remote-uri__/home/dev/test-breakpoing/src/src/index.tsx)
    - /home/dev/test-breakpoing/src/logo.svg (/__vscode-remote-uri__/home/dev/test-breakpoing/src/src/logo.svg)
    - /home/dev/test-breakpoing/src/serviceWorker.ts (/__vscode-remote-uri__/home/dev/test-breakpoing/src/src/serviceWorker.ts)

Have you tried removing src from the webpath?
Also, could you try the attach option instead of launch?

tosinek on 6 Jan 2020

@tosinek it seems that your files are on windows directories.
I tried using the direct path to my folder to no avail.

      {
           "type": "chrome",
           "request": "launch",
           "name": "Launch Chrome against localhost",
           "url": "http://localhost:3000",
           "webRoot": "${workspaceFolder}/src",
           "sourceMapPathOverrides": {
               "/home/dev/test-breakpoing/*": "${webRoot}/*",
           }
       }

Here's a portiong of my .scripts output

› http://localhost:3000/static/js/bundle.js (/__vscode-remote-uri__/home/dev/test-breakpoing/src/static/js/bundle.js)
    - /home/dev/test-breakpoing/webpack/bootstrap (/__vscode-remote-uri__/home/dev/test-breakpoing/src/webpack/bootstrap)
› http://localhost:3000/static/js/main.chunk.js (/__vscode-remote-uri__/home/dev/test-breakpoing/src/static/js/main.chunk.js)
    - /home/dev/test-breakpoing/src/App.css (/__vscode-remote-uri__/home/dev/test-breakpoing/src/src/App.css)
    - /home/dev/test-breakpoing/src/index.css (/__vscode-remote-uri__/home/dev/test-breakpoing/src/src/index.css)
    - webpack:///./src/App.css?498e (/__vscode-remote-uri__/home/dev/test-breakpoing/src/static/js/webpack:/src/App.css)
    - /home/dev/test-breakpoing/src/App.tsx (/__vscode-remote-uri__/home/dev/test-breakpoing/src/src/App.tsx)
    - webpack:///./src/index.css?e32c (/__vscode-remote-uri__/home/dev/test-breakpoing/src/static/js/webpack:/src/index.css)
    - /home/dev/test-breakpoing/src/index.tsx (/__vscode-remote-uri__/home/dev/test-breakpoing/src/src/index.tsx)
    - /home/dev/test-breakpoing/src/logo.svg (/__vscode-remote-uri__/home/dev/test-breakpoing/src/src/logo.svg)
    - /home/dev/test-breakpoing/src/serviceWorker.ts (/__vscode-remote-uri__/home/dev/test-breakpoing/src/src/serviceWorker.ts)

Have you tried removing src from the webpath?
Also, could you try the attach option instead of launch?

I tried removing the src from webpath and have not tried doing the attach option.

However

I've found a fix. If I use the default launch config:

        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}",
            "sourceMapPathOverrides": {
                "/home/dev/test-breakpoing/*": "${webRoot}/*",
            }
        }

And then modify the settings.json and force chrome extension to be ran on the workspace it works!

    "remote.extensionKind": {
        "msjsdiag.debugger-for-chrome": [
            "workspace"
        ]
    },

flipch on 6 Jan 2020

👍3

Also having the exact same issue. I have tried port forwarding / adding absolute urls / changing the config from launch to attach / removing the src suffix. Every breakpoint set is still ignored with the message 'Breakpoint set but not yet bound'

Config here:

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

a portion of .scripts output

- /mnt/c/users/thomas/documents/personal/projects/xccelerate/thomas.corbin/exercises/54-router-debugger/ab/src/components/Screens/TimerPage.js (/mnt/c/users/thomas/documents/personal/projects/xccelerate/thomas.corbin/exercises/54-router-debugger/ab/src/components/Screens/TimerPage.js) - /mnt/c/users/thomas/documents/personal/projects/xccelerate/thomas.corbin/exercises/54-router-debugger/ab/src/components/Timer/Timer.js (/mnt/c/users/thomas/documents/personal/projects/xccelerate/thomas.corbin/exercises/54-router-debugger/ab/src/components/Timer/Timer.js) - webpack:///./src/index.css?f3f6 (/__vscode-remote-uri__/home/thomascorbin/xccelerate/thomas.corbin/exercises/54-router-debugger/ab/src/static/js/webpack:/src/index.css) - /mnt/c/users/thomas/documents/personal/projects/xccelerate/thomas.corbin/exercises/54-router-debugger/ab/src/index.js (/mnt/c/users/thomas/documents/personal/projects/xccelerate/thomas.corbin/exercises/54-router-debugger/ab/src/index.js) - /mnt/c/users/thomas/documents/personal/projects/xccelerate/thomas.corbin/exercises/54-router-debugger/ab/src/serviceWorker.js (/mnt/c/users/thomas/documents/personal/projects/xccelerate/thomas.corbin/exercises/54-router-debugger/ab/src/serviceWorker.js)

ThomasCorbin22 on 3 Jul 2020

Could you try this with our new debugger implementation? You can try it in the VS Code Insiders build https://code.visualstudio.com/insiders

roblourens on 3 Jul 2020

I still get the same issue with the Insider's build as well. Are there any additional settings or features that I need to change?

ThomasCorbin22 on 6 Jul 2020

cc @connor4312

roblourens on 6 Jul 2020

This works for me with the new js debugger (e.g. on Insiders). @ThomasCorbin22 can you add trace: true to your launch configuration and share the resulting log with us? The location of the log file on your disk will be written to the Debug Console.

⚠️ This log file will not contain source code, but will contain file paths. You can drop it into https://microsoft.github.io/vscode-pwa-analyzer/index.html to see what it contains. If you'd rather not share the log publicly, you can email it to [email protected]

connor4312 on 6 Jul 2020

Thanks for the email, @ThomasCorbin22. It looks like you need to configure your localRoot and remoteRoot. Eyeballing what you have, something like this:

"localRoot": "${workspaceFolder}",
"remoteRoot": "/mnt/c/Users/Thomas/Documents/Personal/Projects/Xccelerate/thomas.corbin/exercises/54-router-debugger/ab",

connor4312 on 6 Jul 2020

I faced the exact same problem, strangely, once I changed type from "chrome" to "pwa-chrome" everything just worked. I have no idea why. If someone can shed some light on this I would be very grateful.

Here is my launch.json

{
  // 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": "pwa-chrome",
      "request": "launch",
      "name": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    },
    {
      "type": "pwa-chrome",
      "request": "attach",
      "name": "attach",
      "webRoot": "${workspaceFolder}",
      "port": 9222,
    },
  ]
}

create-react-app, using react 17.0.1 with typescript.

sinapis on 1 Nov 2020

This is an old issue that started on our previous debug adapter, so closing this for housekeeping. If people continue running into issues here, please create a new issue on this repo. Thanks!

connor4312 on 2 Nov 2020

Was this page helpful?

0 / 5 - 0 ratings