Question

使用VSCode 1.15和VSCode Chrome Debugger 3.1.7，我的断点显示为灰色，标题为“断点被忽略，因为找不到生成的代码”。 .scripts命令显示源映射的路径确实正确。

项目树：

我使用webpack-dev-server命令运行应用程序。

webpack.config.js文件：

const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devtool: 'cheap-module-source-map',
  devServer: {
    contentBase: './dist',
    port: 3000,
    hot: true,
    historyApiFallback: true
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(js|jsx)$/,
        use: ['babel-loader', 'eslint-loader'],
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    modules: [
      path.join(__dirname, 'src'),
      'node_modules'
    ],
    extensions: ['.js', '.jsx']
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ]
}

我的launch.json如下（我只使用启动选项）：

{
    "version": "0.2.0",
    "configurations": [        
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceRoot}/src",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:///*": "*",
                "webpack:///./*": "${webRoot}/*",
                "webpack:///src/*": "${webRoot}/*",
                "webpack:///./~/*": "${webRoot}/node_modules/*"
            },
            "trace": true
        },
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceRoot}"
        }
    ]
}

.scripts命令（我认为大部分都没有意思，最后两行显示映射是正确的，据我所知）：

› extensions::app
› http://localhost:3000/bundle.js
    - webpack:///webpack/bootstrap d9f16bc355f23b8122c3 (webpack\bootstrap d9f16bc355f23b8122c3)
    - webpack:///./node_modules/inherits/inherits_browser.js (node_modules\inherits\inherits_browser.js)
    - webpack:///(webpack)/buildin/global.js ((webpack)\buildin\global.js)
    - webpack:///./node_modules/process/browser.js (node_modules\process\browser.js)
    - webpack:///./node_modules/debug/src/browser.js (node_modules\debug\src\browser.js)
    - webpack:///./node_modules/sockjs-client/lib/event/emitter.js (node_modules\sockjs-client\lib\event\emitter.js)
    - webpack:///./node_modules/sockjs-client/lib/utils/url.js (node_modules\sockjs-client\lib\utils\url.js)
    - webpack:///./node_modules/json3/lib/json3.js (node_modules\json3\lib\json3.js)
    - webpack:///./node_modules/sockjs-client/lib/utils/event.js (node_modules\sockjs-client\lib\utils\event.js)
    - webpack:///./node_modules/sockjs-client/lib/utils/random.js (node_modules\sockjs-client\lib\utils\random.js)
    - webpack:///./node_modules/sockjs-client/lib/transport/lib/ajax-based.js (node_modules\sockjs-client\lib\transport\lib\ajax-based.js)
    - webpack:///./node_modules/sockjs-client/lib/transport/sender/xhr-local.js (node_modules\sockjs-client\lib\transport\sender\xhr-local.js)
    - webpack:///./node_modules/sockjs-client/lib/utils/browser.js (node_modules\sockjs-client\lib\utils\browser.js)
    - webpack:///./node_modules/sockjs-client/lib/utils/iframe.js (node_modules\sockjs-client\lib\utils\iframe.js)
    - webpack:///./node_modules/sockjs-client/lib/transport/receiver/xhr.js (node_modules\sockjs-client\lib\transport\receiver\xhr.js)
    - webpack:///./node_modules/sockjs-client/lib/transport/sender/xhr-cors.js (node_modules\sockjs-client\lib\transport\sender\xhr-cors.js)
    - webpack:///./node_modules/sockjs-client/lib/transport/sender/xdr.js (node_modules\sockjs-client\lib\transport\sender\xdr.js)
    - webpack:///./node_modules/sockjs-client/lib/transport/lib/iframe-wrap.js (node_modules\sockjs-client\lib\transport\lib\iframe-wrap.js)
    - webpack:///./node_modules/sockjs-client/lib/utils/object.js (node_modules\sockjs-client\lib\utils\object.js)
    - webpack:///./node_modules/sockjs-client/lib/event/event.js (node_modules\sockjs-client\lib\event\event.js)
    - webpack:///(webpack)/hot/log.js ((webpack)\hot\log.js)
    - webpack:///(webpack)/buildin/module.js ((webpack)\buildin\module.js)
    - webpack:///./node_modules/url-parse/index.js (node_modules\url-parse\index.js)
    - webpack:///./node_modules/sockjs-client/lib/event/eventtarget.js (node_modules\sockjs-client\lib\event\eventtarget.js)
    - webpack:///./node_modules/sockjs-client/lib/transport/lib/sender-receiver.js (node_modules\sockjs-client\lib\transport\lib\sender-receiver.js)
    - webpack:///./node_modules/sockjs-client/lib/transport/browser/abstract-xhr.js (node_modules\sockjs-client\lib\transport\browser\abstract-xhr.js)
    - webpack:///./node_modules/sockjs-client/lib/transport/xdr-streaming.js (node_modules\sockjs-client\lib\transport\xdr-streaming.js)
    - webpack:///./node_modules/sockjs-client/lib/transport/eventsource.js (node_modules\sockjs-client\lib\transport\eventsource.js)
    - webpack:///./node_modules/sockjs-client/lib/transport/browser/eventsource.js (node_modules\sockjs-client\lib\transport\browser\eventsource.js)
    - webpack:///./node_modules/sockjs-client/lib/transport/iframe.js (node_modules\sockjs-client\lib\transport\iframe.js)
    - webpack:///./node_modules/sockjs-client/lib/version.js (node_modules\sockjs-client\lib\version.js)
    - webpack:///./node_modules/sockjs-client/lib/transport/htmlfile.js (node_modules\sockjs-client\lib\transport\htmlfile.js)
    - webpack:///./node_modules/sockjs-client/lib/transport/xhr-polling.js (node_modules\sockjs-client\lib\transport\xhr-polling.js)
    - webpack:///./node_modules/sockjs-client/lib/location.js (node_modules\sockjs-client\lib\location.js)
    - webpack:///./node_modules/sockjs-client/lib/info-iframe-receiver.js (node_modules\sockjs-client\lib\info-iframe-receiver.js)
    - webpack:///./node_modules/sockjs-client/lib/info-ajax.js (node_modules\sockjs-client\lib\info-ajax.js)
    - webpack:///./node_modules/html-entities/lib/html5-entities.js (node_modules\html-entities\lib\html5-entities.js)
    - webpack:///(webpack)/hot/emitter.js ((webpack)\hot\emitter.js)
    - webpack:///(webpack)-dev-server/client ((webpack)-dev-server\client)
 - webpack:///./node_modules/url/url.js (node_modules\url\url.js)
    - webpack:///./node_modules/punycode/punycode.js (node_modules\punycode\punycode.js)
    - webpack:///./node_modules/url/util.js (node_modules\url\util.js)
    - webpack:///./node_modules/querystring-es3/index.js (node_modules\querystring-es3\index.js)
    - webpack:///./node_modules/querystring-es3/decode.js (node_modules\querystring-es3\decode.js)
    - webpack:///./node_modules/querystring-es3/encode.js (node_modules\querystring-es3\encode.js)
    - webpack:///./node_modules/strip-ansi/index.js (node_modules\strip-ansi\index.js)
    - webpack:///./node_modules/ansi-regex/index.js (node_modules\ansi-regex\index.js)
    - webpack:///./node_modules/loglevel/lib/loglevel.js (node_modules\loglevel\lib\loglevel.js)
    - webpack:///(webpack)-dev-server/client/socket.js ((webpack)-dev-server\client\socket.js)
    - webpack:///./node_modules/sockjs-client/lib/entry.js (node_modules\sockjs-client\lib\entry.js)
    - webpack:///./node_modules/sockjs-client/lib/transport-list.js (node_modules\sockjs-client\lib\transport-list.js)
    - webpack:///./node_modules/sockjs-client/lib/transport/websocket.js (node_modules\sockjs-client\lib\transport\websocket.js)
    - webpack:///./node_modules/sockjs-client/lib/utils/browser-crypto.js (node_modules\sockjs-client\lib\utils\browser-crypto.js)
    - webpack:///./node_modules/requires-port/index.js (node_modules\requires-port\index.js)
    - webpack:///./node_modules/url-parse/node_modules/querystringify/index.js (node_modules\url-parse\node_modules\querystringify\index.js)
    - webpack:///./node_modules/debug/src/debug.js (node_modules\debug\src\debug.js)
    - webpack:///./node_modules/ms/index.js (node_modules\ms\index.js)
    - webpack:///./node_modules/sockjs-client/lib/transport/browser/websocket.js (node_modules\sockjs-client\lib\transport\browser\websocket.js)
    - webpack:///./node_modules/sockjs-client/lib/transport/xhr-streaming.js (node_modules\sockjs-client\lib\transport\xhr-streaming.js)
    - webpack:///./node_modules/sockjs-client/lib/transport/lib/buffered-sender.js (node_modules\sockjs-client\lib\transport\lib\buffered-sender.js)
    - webpack:///./node_modules/sockjs-client/lib/transport/lib/polling.js (node_modules\sockjs-client\lib\transport\lib\polling.js)
    - webpack:///./node_modules/sockjs-client/lib/transport/receiver/eventsource.js (node_modules\sockjs-client\lib\transport\receiver\eventsource.js)
    - webpack:///(webpack)/buildin/amd-options.js ((webpack)\buildin\amd-options.js)
    - webpack:///./node_modules/sockjs-client/lib/transport/receiver/htmlfile.js (node_modules\sockjs-client\lib\transport\receiver\htmlfile.js)
    - webpack:///./node_modules/sockjs-client/lib/transport/xdr-polling.js (node_modules\sockjs-client\lib\transport\xdr-polling.js)
    - webpack:///./node_modules/sockjs-client/lib/transport/jsonp-polling.js (node_modules\sockjs-client\lib\transport\jsonp-polling.js)
    - webpack:///./node_modules/sockjs-client/lib/transport/receiver/jsonp.js (node_modules\sockjs-client\lib\transport\receiver\jsonp.js)
    - webpack:///./node_modules/sockjs-client/lib/transport/sender/jsonp.js (node_modules\sockjs-client\lib\transport\sender\jsonp.js)
    - webpack:///./node_modules/sockjs-client/lib/main.js (node_modules\sockjs-client\lib\main.js)
    - webpack:///./node_modules/sockjs-client/lib/shims.js (node_modules\sockjs-client\lib\shims.js)
    - webpack:///./node_modules/sockjs-client/lib/utils/escape.js (node_modules\sockjs-client\lib\utils\escape.js)
    - webpack:///./node_modules/sockjs-client/lib/utils/transport.js (node_modules\sockjs-client\lib\utils\transport.js)
    - webpack:///./node_modules/sockjs-client/lib/utils/log.js (node_modules\sockjs-client\lib\utils\log.js)
    - webpack:///./node_modules/sockjs-client/lib/event/close.js (node_modules\sockjs-client\lib\event\close.js)
    - webpack:///./node_modules/sockjs-client/lib/event/trans-message.js (node_modules\sockjs-client\lib\event\trans-message.js)
    - webpack:///./node_modules/sockjs-client/lib/info-receiver.js (node_modules\sockjs-client\lib\info-receiver.js)
    - webpack:///./node_modules/sockjs-client/lib/transport/sender/xhr-fake.js (node_modules\sockjs-client\lib\transport\sender\xhr-fake.js)
    - webpack:///./node_modules/sockjs-client/lib/info-iframe.js (node_modules\sockjs-client\lib\info-iframe.js)
    - webpack:///./node_modules/sockjs-client/lib/iframe-bootstrap.js (node_modules\sockjs-client\lib\iframe-bootstrap.js)
    - webpack:///./node_modules/sockjs-client/lib/facade.js (node_modules\sockjs-client\lib\facade.js)
    - webpack:///(webpack)-dev-server/client/overlay.js ((webpack)-dev-server\client\overlay.js)
    - webpack:///./node_modules/ansi-html/index.js (node_modules\ansi-html\index.js)
    - webpack:///./node_modules/html-entities/index.js (node_modules\html-entities\index.js)
    - webpack:///./node_modules/html-entities/lib/xml-entities.js (node_modules\html-entities\lib\xml-entities.js)
    - webpack:///./node_modules/html-entities/lib/html4-entities.js (node_modules\html-entities\lib\html4-entities.js)
    - webpack:///(webpack)/hot nonrecursive ^\.\/log$ ((webpack)\hot nonrecursive ^\log$)
    - webpack:///./node_modules/events/events.js (node_modules\events\events.js)
    - webpack:///(webpack)/hot/dev-server.js ((webpack)\hot\dev-server.js)
    - webpack:///(webpack)/hot/log-apply-result.js ((webpack)\hot\log-apply-result.js)
    - webpack:///src/index.js (src\index.js)
    - webpack:///src/lmao.js (src\lmao.js)

Answer 1

这对我有用（chromeDevTools）：

在项目工作区中将webpack://./映射到/

断点被忽略，因为生成的代码未找到VSCode Chrome调试

1 个答案: