>  기사  >  개발 도구  >  VSCode에서 Node.js 기반의 JS 디버깅 환경을 구성하는 방법에 대해 이야기해보겠습니다.

VSCode에서 Node.js 기반의 JS 디버깅 환경을 구성하는 방법에 대해 이야기해보겠습니다.

青灯夜游
青灯夜游앞으로
2023-04-18 17:22:394094검색

VSCode에서 디버깅 환경을 구성하는 방법은 무엇입니까? 다음 글에서는 JavaScript 기반 Node.js 디버깅 환경을 구성하기 위해 VSCode를 구성하는 방법을 소개하겠습니다.

VSCode에서 Node.js 기반의 JS 디버깅 환경을 구성하는 방법에 대해 이야기해보겠습니다.

1. VSCode 및 Node.js 설치

서문: 과학적 연구를 하고 나면 요약하고 축적하는 일이 사실 드물다. 어쩌면 과학 연구에서 발생하는 문제에 대한 해결책이 더 많을 수도 있다. 다양하고 유연합니다. 게으른 하하하하. 프론트 엔드 작업을 마친 후 환경 구성을 기록하기 위해 더 이상 블로그를 작성할 필요가 없습니다. 자, 헛소리는 그만하고 본문을 시작하겠습니다. 다시 한번 말씀드리지만, 이 글에서 구성한 환경은 주로 LeetCode의 코드를 디버깅하기 위해 중단점 디버깅만을 목표로 합니다.

내 환경 :

Visual Studio Code 1.66.0
  • Node.js 16.14.2
  • Windows10 64-bit
  • VScode 다운로드에 대해서는 별로 말하지 않겠습니다. 주로 Node 설치만 기록합니다. (실제로는 이전에 여러 번 설치한 적이 있습니다.) [추천 학습:
vscode tutorial

, Programming Teaching]

먼저 공식 웹사이트로 이동하여 해당 버전을 다운로드하세요: https://nodejs.org/en/
    여기에 그림 설명 삽입
  1. https://nodejs.org/en/
    VSCode에서 Node.js 기반의 JS 디버깅 환경을 구성하는 방법에 대해 이야기해보겠습니다.
  2. 开始安装,可以自定义选择安装路径。
    VSCode에서 Node.js 기반의 JS 디버깅 환경을 구성하는 방법에 대해 이야기해보겠습니다.
  3. 这里选择Add Path,系统变量会自动设置,但是用户变量并没有自动设置,需要的话可以自己手动加一下。
    VSCode에서 Node.js 기반의 JS 디버깅 환경을 구성하는 방법에 대해 이야기해보겠습니다.
  4. 测试是否安装成功,在命令行输入node -vnpm -v,如果能显示出版本号说明安装成功,且已经有了正确的环境变量。
    VSCode에서 Node.js 기반의 JS 디버깅 환경을 구성하는 방법에 대해 이야기해보겠습니다.
           用户变量嘛最好也手动自己添加一个比较稳妥,因为我之前没有加,有时候在VSCode中会出现node.js找不到路径的情况,虽然重启会解决问题,但是弹了两次我总觉得还有些不对劲,所以就还是加了一下,大家在安装的时候最好提前加一下。
    VSCode에서 Node.js 기반의 JS 디버깅 환경을 구성하는 방법에 대해 이야기해보겠습니다.
  5. 到这里,Node.js安装完成

二、VSCode配置

  1. 先在VSCode里面安装两个插件,一个是负责运行的Code Runner,一个是JS的语法提示JavaScript(ES6) code snippets
    VSCode에서 Node.js 기반의 JS 디버깅 환경을 구성하는 방법에 대해 이야기해보겠습니다.
  2. 创建配置文件,打开你的代码文件夹,先随便创建一个test.js,随便写几句测试代码。然后点击左边侧边栏的调试工具,选择创建launch.json文件。
    VSCode에서 Node.js 기반의 JS 디버깅 환경을 구성하는 방법에 대해 이야기해보겠습니다.
  3. 选择node.js调试环境,测试代码也可以用图里面的。
    VSCode에서 Node.js 기반의 JS 디버깅 환경을 구성하는 방법에 대해 이야기해보겠습니다.
  4. 此时配置文件会自动生成,注意重点要修改一个地方,这里不要写死。将program属性改成${file}설치를 시작하고 설치 경로를 사용자 정의할 수 있습니다. .
    여기에 이미지 설명 삽입VSCode에서 Node.js 기반의 JS 디버깅 환경을 구성하는 방법에 대해 이야기해보겠습니다.
  5. 여기에 경로 추가, 시스템을 선택하세요. 변수는 자동으로 설정되지만 사용자 변수는 자동으로 설정되지 않습니다. 필요한 경우 수동으로 추가할 수 있습니다.
  6. 여기에 그림 설명 삽입
    VSCode에서 Node.js 기반의 JS 디버깅 환경을 구성하는 방법에 대해 이야기해보겠습니다.설치 성공 여부 테스트 , 명령줄에 node -vnpm -v를 입력하세요. 버전 번호가 표시되면 설치에 성공한 것이며 올바른 환경 변수가 이미 있는 것입니다.
    VSCode에서 Node.js 기반의 JS 디버깅 환경을 구성하는 방법에 대해 이야기해보겠습니다. 사용자 변수가 최고입니다. 이전에 추가한 적이 없기 때문에 수동으로 추가하는 것이 더 안전합니다. 때때로 node.js가 VSCode에서 경로를 찾을 수 없습니다. 다시 시작하면 문제가 해결되지만, 두 번 재생하면 항상 뭔가 문제가 있다고 느껴서 계속 추가했습니다. .설치시 미리 추가해 두는 것이 가장 좋습니다.
  7. 여기에 이미지 설명 삽입

자, Node.js js 설치 완료

2. VSCode 구성

🎜🎜 먼저 VSCode에 두 개의 플러그인을 설치하고, 하나는 Code Runner 실행을 담당하고, 다른 하나는 JS 구문 팁 JavaScript(ES6) 코드 조각입니다. 🎜여기에 이미지 설명 삽입🎜🎜구성 파일을 생성하고 엽니다. 코드 폴더에서 먼저 test.js를 만들고 몇 가지 테스트 코드를 작성하세요. 그런 다음 왼쪽 사이드바에서 디버깅 도구를 클릭하고 launch.json 파일 생성을 선택합니다. 🎜여기에 이미지 설명 삽입🎜🎜node.js 디버깅 선택 환경과 테스트 코드도 그림에서 사용할 수 있습니다. 🎜여기에 이미지 설명 삽입🎜🎜이때 구성 파일 자동으로 생성되므로 수정할 핵심 사항에 주의하세요. 여기에 하드코딩하지 마세요. program 속성을 ​​${file}로 변경하면 현재 디버깅된 파일을 식별할 수 있습니다. 매번 F5 키만 누르면 됩니다. 파일을 디버그하십시오. 🎜🎜🎜🎜이때 실제 구성은 이렇게 됩니다. test.js 파일에 직접 중단점을 넣고 F5를 눌러 디버깅하면 됩니다🎜🎜🎜🎜🎜🎜🎜 3. 가능한 문제 🎜🎜🎜 구성이 완료된 후 VSCode 디버깅을 시작하고 오류를 보고하는 경우: 경로에서 실행 가능한 노드를 찾을 수 없는 경우 VSCode를 다시 시작한 다음 디버깅하면 문제가 없습니다. 🎜약간의 감동 : 올해 가을 모집 작업을 위해 공부의 길이 다시 시작되었습니다. 작업을 잘하려면 먼저 도구를 연마해야 하므로 환경 구성에 대한 블로그 작성을 시작해야 합니다. 예상대로 다음 기사는 VSCode에서 Vue 구성에 관한 것입니다. 인턴때 반레이크지 글을 썼는데 별로 좋지 않아서 이제 다시 복습해서 완성해야겠습니다. 기술 분야에서 일하기로 선택한 이상, 한 가지 일을 사랑할 수 없다면 한 가지 일을 하고, 가능한 한 한 가지 일을 사랑해야 합니다. , 그리고 서두르세요!

VSCode에 대한 자세한 내용을 보려면

vscode 기본 튜토리얼을 방문하세요!

위 내용은 VSCode에서 Node.js 기반의 JS 디버깅 환경을 구성하는 방법에 대해 이야기해보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제