2020년 4월 5일 업데이트: 본고는 현재 다음 글의 일부입니다.js 파일: https://nextjs.org/docs/advanced-features/debugging
👋 안녕하십니까? 본고는 다음 디버깅을 할 수 있도록 개발자 환경을 어떻게 설정하는지 소개합니다.Visual Studio Code debugger 또는 Chrome DevTools의 js 응용 프로그램을 사용합니다.
다음부터.js는 노드입니다.js 응용 프로그램, 여기에서 제공하는 지도도 모든 노드에 적용됩니다.js 프로그램.
완전히 설정하면 프런트엔드(React) 및 백엔드 코드(Node.js, API 라우팅)에 배치할 수 있습니다breakpoints.그리고 코드가 끊길 때마다 가장 좋아하는 디버거가 팝업됩니다.
전체 강좌는 5분이 걸립니다. 완성되면 다음 체험(VS 코드, React)을 얻을 수 있습니다.

디렉토리:

Mandatory introduction: why even bother?

Step one: create your Next.js debugging demo application

Step two: configure Next.js to start in debug mode

Step three: launch your application

Step four: connect your debugging inspector

VS Code

Chrome DevTools

Step five: actually debug your application

왜 또 귀찮게 해요?

나는 줄곧 JavaScript의 디버거가 필요하지 않다고 생각했다. 나는 대부분의 시간 console.log 에 문제를 해결할 수 있다.나는 이 습관의 원인이 자바스크립트 디버깅 도구가 항상 정상적으로 작동할 수 있기 때문이라고 생각하지만, 실제로는 그렇지 않다.브라우저에서는 최소한 정상적으로 작동할 수 있지만 그 다음은 노드입니다.js가 왔어요. 디버깅을 잘 하기 어려워요.디버깅 과정 전체가 고통스러워서 창을 전환하는 데 걸리는 시간이 다른 어떤 것보다 많다.
이제 VS 코드를 사용하여 React 및 노드를 디버깅한 후js 코드는 일반 컨트롤러보다 훨씬 강하다고 생각합니다.로그(obj) > 페이지 다시 로드 > 터미널로 전환(🔁 콘솔에 대해 위의 작업을 반복합니다.로그 (객체 속성...)흐르다
한번 해 봐, 너는 그것을 즐길 수 있을 거야.
나는 그것이 어떻게 작동하는지 새로운 create-next-app 예시를 사용할 것이다.

첫 번째 단계: 다음을 만듭니다.js 디버그 프레젠테이션 응용 프로그램

만약 네가 이미 다음이 있다면, 너는 할 수 있다.js 응용 프로그램
터미널에서:

> npx create-next-app
✔ What is your project named? … demo-nextjs-debugging
# wait...
> cd create-next-app

두 번째 단계로 건너뛰기 2단계: 다음 단계를 구성합니다.js 디버그 모드로 시작

파일 편집package.json 및 이 섹션 변경:

  "scripts": {
-   "dev": "next",
+   "dev": "NODE_OPTIONS='--inspect' next",
  }

다른 방식으로 다음을 시작하면js, NODE_OPTIONS='--inspect' 항상 next 명령 전에 확보해야 합니다.
개발자 모드에서 언제든지 바로 가기로 디버깅 세션을 시작할 수 있도록 기본 dev 명령을 바꾸는 것을 좋아합니다.
사용 NODE_OPTIONS='--inspect' npm run dev 또는 NODE_OPTIONS='--inspect' yarn run dev 은 작동하지 않습니다.이것은 같은 포트에서 여러 개의 디버거를 시작합니다. 하나는 npm/yarn 프로세스에 사용되고, 다른 하나는 다음에 사용됩니다.js.그런 다음 콘솔에서 유사한 오류Starting inspector on 127.0.0.1:9229 failed: address already in use가 발생합니다.NODE_OPTIONS예 .

표준 노드.js 로고 3단계: 애플리케이션 시작

터미널에서:

> yarn dev
yarn run v1.22.0
$ NODE_OPTIONS='--inspect' next dev
Debugger listening on ws://127.0.0.1:9229/6bd49cb3-e640-4d76-ad88-86480e167df7
For help, see: https://nodejs.org/en/docs/inspector
[ wait ]  starting the development server ...
[ info ]  waiting on http://localhost:3000 ...
[ ready ] compiled successfully - ready on http://localhost:3000

4단계: 디버그 검사기 연결

이것은 복잡한 제목이지만, VS 코드 디버깅 기능이나 크롬 개발 도구를 다음에 연결하는 것을 의미할 뿐이다.js 응용 프로그램.

VS 코드

당신도 할 수 있습니다 .
VS 코드 관리자를 다음으로 연결하는 방법은 여러 가지가 있습니다.js 응용 프로그램이 디버깅 모드에서 실행됩니다.이 모든 것은 VS Code Gianticskip to the chosen solution에서 설명했습니다.
다음을 수행할 수 있습니다.

VS 코드를 구성하여 다음을 실제로 시작합니다.js 프로그램을 디버거에 연결합니다.솔직히 말하면 이것은 내가 가장 좋아하는 해결 방안이 아니다. 왜냐하면 통상적으로 모든 개발자 환경은 이미 어떤 프로세스 관리자를 사용하고 있기 때문이다. 예를 들어 Node.js debugging documentation page,❤️ node-foreman , overmind , docker-compose , heroku local . 그래서아니오

다음 단계를 시작합니다.js 응용 프로그램은 VS 코드의 내부 단말기에서 삭제합니다.1과 같습니다.내부 VS 코드 터미널을 사용하지 않습니다. 사이드 터미널이 있습니다.

VS 코드를 구성하여 시작된 다음 코드에 연결합니다.js 응용 프로그램.✅ 이것이 바로 내가 좋아하는 것이다.

nodemon

Here's how to do it:

Create .vscode/launch.json at the root of your project:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Launch Program",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "port": 9229
    }
  ]
}

Save it. Now hit F5 on your keyboard or go click on "Run and Debug (F5)" in the 🐞 debugging panel of VS Code. You should get this:

보시다시피 현재 전체 VS 코드 관리자를 다음으로 연결합니다.js 응용 프로그램.그것은 심지어 콘솔 출력까지 보여 주었다.
지금은'응, 나는 무엇이 작용하지 않는지, 이 변수가 진정으로 무엇을 포함하고 있는지 알고 싶다'고 생각할 때마다.VS 코드의 F5를 클릭하면 베이스 코드를 터치합니다(페이지 새로 고침, 클릭...)좋은 디버깅 체험을 즐겨보세요!

상금: 네가 다음에.js 코드는 작업 영역의 루트 디렉터리에 없습니다.

니 다음이js 프로젝트가 VSCode 작업공간의 루트 디렉토리에 없으면 다음을 추가해야 합니다.
.vscode/launch.json

{
  // ...
  "configurations": [
    {        
      // ...
      "sourceMapPathOverrides": {
        "webpack:///./*": "${workspaceRoot}/subfolder/*",
      }
    }
  ]
}

힌트 고마워요!

크롬 개발 도구

니가 니 다음 거 디버깅하는 거 좋아하면js 응용 프로그램은 일반적인 Chrome 개발 도구를 사용합니다. 현재 Chrome에서 새로운 옵션 카드를 열 수 있습니다. url: chrome://inspect.
다음을 볼 수 있습니다.

"inspect"를 누르면 크롬 개발 도구가 다음 도구에 연결됩니다.js 응용 프로그램.

단계 5: 실제 디버깅 응용 프로그램

현재 프로그램에서 인터럽트를 설정하는 것이 필요합니다.코드의 어느 곳에나 키워드 debugger; 를 추가하거나 VS code editor 또는 Chrome에서 한 줄의 왼쪽을 클릭하여 중단합니다.
이렇게 하고 밑바닥 코드가 실행될 때마다 (페이지 불러오기, 페이지 클릭,api 호출...)디버그 UI가 나타납니다.
VS 코드 또는 Chrome 디버깅 도구를 사용하는 방법에 대해 설명할 수 있습니다.

VS Code Node.js debugging: Breakpoints

🔚 그렇습니다!
🙏 읽어주셔서 감사합니다.
당신은 이 게시물을 좋아합니까?다음 단계는 무슨 건의가 있습니까?js 또는 노드.js 디버깅?댓글에 감사의 편지나 건의를 추가하면 답장을 드리겠습니다:)
아래를 클릭하여 이 게시물을 공유합니다.
액체 오류: 내부