Razzle: vscode로 노드 서버 디버그

프로세스 ID로 연결하는 데 행운이 있습니다. true로 설정할 수 있는 sourceMaps vscode 실행 구성 옵션도 있습니다.

    {
      "type": "node",
      "request": "attach",
      "name": "Attach by Process ID",
      "processId": "${command:PickProcess}",
      "restart": true
    }

@ajsharp 답변 감사합니다 :smiley_cat:

첨부 방법과 동일합니다. src/index.js에 중단점을 설정할 수 없습니다.

sourceMaps 옵션은 기본적으로 true입니다(https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_source-maps 참조).

다른 소스 맵 설정을 사용하여 이 문제를 해결했는데 VSCode가 cheap-module-sourcemap 를 좋아하지 않는 것 같습니다.
razzle.config.js :

module.exports = {
    modify(config, { target, dev }, webpack) {
        config.devtool = dev ? 'eval-source-map' : 'none';
        return config;
    }
}

launch.json :

{
    "name": "Attach to dev server",
    "type": "node",
    "request": "attach",
    "protocol": "inspector",
    "address": "localhost",
    "port": 9230
}

yarn start --inspect --inspect-port 9230 로 서버를 시작합니다.

*수정됨, 오류를 잡아준 @dguyonvarch 에게 감사드립니다.

@benhamlin :smile_cat: 잘 작동합니다!
방금 귀하의 스 니펫을 다음과 같이 수정했습니다.

module.exports = {
  modify: (config, { target, dev }, webpack) => {
      config.devtool = dev ? 'eval-source-map' : 'none';
      return config
  }
}

razzle/packages/razzle/config/createConfig.js 93행에서 이것을 찾았습니다.

// Controversially, decide on sourcemaps.
devtool: 'cheap-module-source-map'

그래서 나는 논쟁을 엽니다 :wink: ! $# eval-source-map cheap-module-source-map 인 이유

이 레시피에 대한 섹션을 문서에 추가하고 싶은 사람이 있습니까?

@jaredpalmer eval-source-map 로 병합 요청을 제안해도 됩니까? 이 경우 문서를 업데이트할 필요가 없습니다.

헐! 그래서 여기 오픈 소스와 일상 업무 및 생활 사이의 거래가 있습니다. 관리해야 할 것이 많기 때문에 GitHub 봇을 사용하여 여기저기서 몇 가지를 자동화합니다. 이 특정 GitHub 봇은 최근 활동이 한동안 없었기 때문에 이것을 부실한 것으로 표시할 것입니다. 며칠 동안 더 이상 활동이 없으면 폐쇄됩니다. 이 작업을 개인적으로 심각하게 받아들이지 마십시오. 이것은 완전히 자동화된 작업입니다. 이것이 실수라면 댓글, DM, 캐리어 비둘기 또는 연기 신호를 보내십시오.

비활성 상태로 인해 ProBot이 이를 자동으로 닫았습니다. 이것이 실수라면 Holler, 그리고 우리는 그것을 다시 열 것입니다.

업데이트: 서버를 디버그하기 위해 vscode를 얻는 더 좋은 방법은 이것을 launch.json에 추가하고 devtool 구성을 razzle의 기본값으로 두는 것입니다.

이렇게 하면 VSCode 디버깅과 더 나은 클라이언트 디버깅 경험이 가능합니다(eval-source-maps는 React의 디버그 오류 뷰어를 중단함).

"sourceMapPathOverrides": {
    "webpack:///*": "${workspaceRoot}/*"
 }

@benhamlin님 감사합니다. Razzle에서 소프트 재시작( rs then ENTER )을 수행한 후 VSCode에서 디버거 인스턴스에 쉽게 다시 연결할 수 있는 방법이 있습니까?

ATM을 소프트 다시 시작하면 VSCode 디버거 연결이 끊어지므로 서버를 종료하고 다시 시작한 다음 디버거를 다시 연결해야 합니다.

@benhamlin 이 구성으로 매력처럼 작동합니다.wink:

{
      "type": "node",
      "request": "attach",
      "name": "Attach",
      "port": 9230,
      "sourceMapPathOverrides": {
         "webpack:///*": "${workspaceRoot}/*"
      }
}

@ourmaninamsterdam RS는 새 디버그 포트(9230 + 1)에서 서버를 다시 시작하므로 시작 구성에서 연결 포트를 변경해야 합니다. 나는 더 이상 조사하지 않았다 : 실망 :