Chrome의 VSCode/Javascript에 중단 점이 적용되지 않았습니다.

Question

this guide을 작성한 javascript와 webpack을 사용하여 node.js 웹 앱을 실행하고 있습니다. Chrome 디버거 확장 프로그램을 설치했습니다.

는 내가 명령을 사용하여 노드 서버를 실행 : 나는 또한 웹팩 --devtool 소스 맵을 실행했습니다

webpack-dev-server --progress --colors 

을

내 발사 설정은 다음과 같습니다

:

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

webpack-dev-server --progress --colors를 실행하고 VSCode Chrome에서 F5를 누르면 Chrome이 웹 페이지로로드되고 모든 중단 점은 단색으로 나타납니다. 그러나 배치하면 배치 한 지점에서 약간 낮게 점프합니다 (i 코드를 실행하는 라인에는 제외). 중단 점에도 충돌이 없어 디버그 매핑에 문제가 있다고 생각합니다. 때때로 중단 점이있을 때 무작위 파일이로드되고 그 안에있는 보이지 않는 중단 점이 발생합니다. node_modules/firebase/index.js와 같이 주석 처리 된 행의 보이지 않는 중단 점이 발생합니다.

또한 vscode에서 .scripts를 실행하면 (모든 모듈 중에서) 내 breakpoints를 치려고하는 entry.js 파일이 생성된다는 점에 유의해야합니다. 즉 : -webpack : ///./entry.js (d : \ myproject \ entry.js)

모든 것이 내 디렉토리의 루트에 위치합니다 (디렉토리를 실수로 옮기는 경우의 스크린 샷).

또한 내 webpack.config.js 파일 :

module.exports = { 
    entry: "./entry.js", 
    output: { 
     path: __dirname, 
     filename: "bundle.js" 
    }, 
    module: { 
     loaders: [ 
      { test: /\.css$/, loader: "style-loader!css-loader" } 
     ] 
    } 
}; 

Answer 1

문제 해결!

추가하는 데 필요한 :

devtool: 'inline-source-map' 

내 webpack.config.js의 module.exports합니다. 이제는 중단 점이 어디서나 함수에 인라인으로 적용됩니다.