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

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

Apr 18, 2023 pm 05:22 PM
vscode vscode 디버깅

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

vscode에서 word 문서 보는 방법 vscode에서 word 문서 보는 방법 vscode에서 word 문서 보는 방법 vscode에서 word 문서 보는 방법 May 09, 2024 am 09:37 AM

먼저 컴퓨터에서 vscode 소프트웨어를 열고 그림의 ①과 같이 왼쪽의 [확장] 아이콘을 클릭한 다음 그림의 ②와 같이 확장 인터페이스의 검색 상자에 [officeviewer]를 입력합니다. 그런 다음 검색 결과에서 [officeviewer]를 선택하여 그림의 ③과 같이 설치합니다. 마지막으로 아래와 같이 docx, pdf 등의 파일을 엽니다.

vscode로 순서도 그리는 방법 Visual_studio 코드로 순서도 그리는 방법 vscode로 순서도 그리는 방법 Visual_studio 코드로 순서도 그리는 방법 Apr 23, 2024 pm 02:13 PM

먼저 컴퓨터에서 Visual Studio 코드를 열고 왼쪽에 있는 네 개의 사각형 버튼을 클릭한 다음 검색 상자에 draw.io를 입력하여 플러그인을 쿼리하고 설치를 클릭한 후 새 test.drawio 파일을 생성합니다. test.drawio 파일을 선택하고 왼쪽의 편집 모드로 진입합니다. 측면에 다양한 그래픽이 있습니다. 드로잉 후 파일 → Embed → svg를 클릭한 다음 svg를 복사합니다. 복사한 svg 코드를 html 코드에 붙여넣으세요. html 웹페이지를 열면 해당 페이지의 그림을 클릭하시면 해당 페이지를 확대/축소하실 수 있습니다. 흐름도 여기서는 오른쪽 하단에 있는 연필 패턴을 클릭하여 웹 페이지로 이동합니다.

Caltech Chinese는 AI를 사용하여 수학적 증명을 뒤집습니다! 충격적인 Tao Zhexuan의 속도 5배 향상, 수학 단계의 80%가 완전 자동화됨 Caltech Chinese는 AI를 사용하여 수학적 증명을 뒤집습니다! 충격적인 Tao Zhexuan의 속도 5배 향상, 수학 단계의 80%가 완전 자동화됨 Apr 23, 2024 pm 03:01 PM

테렌스 타오(Terence Tao)를 비롯한 많은 수학자들이 극찬한 공식 수학 도구인 LeanCopilot이 다시 진화했다고요? 방금 Caltech 교수인 Anima Anandkumar는 팀이 LeanCopilot 논문의 확장 버전을 출시하고 코드 기반을 업데이트했다고 발표했습니다. 이미지 논문 주소: https://arxiv.org/pdf/2404.12534.pdf 최신 실험에 따르면 이 Copilot 도구는 수학적 증명 단계의 80% 이상을 자동화할 수 있는 것으로 나타났습니다! 이 기록은 이전 베이스라인 이솝보다 2.3배 향상된 기록이다. 그리고 이전과 마찬가지로 MIT 라이선스에 따른 오픈 소스입니다. 사진 속 그는 중국 소년 송페이양이다.

vscode 작업 공간에 파일을 추가하는 방법 vscode 작업 공간에 파일을 추가하는 방법 vscode 작업 공간에 파일을 추가하는 방법 vscode 작업 공간에 파일을 추가하는 방법 May 09, 2024 am 09:43 AM

1. 먼저 vscode 소프트웨어를 열고 탐색기 아이콘을 클릭한 후 작업 공간 창을 찾습니다. 2. 그런 다음 왼쪽 상단 모서리에 있는 파일 메뉴를 클릭하고 작업 공간에 폴더 추가 옵션을 찾습니다. 3. 마지막으로 폴더 위치를 찾습니다. 로컬 디스크, 추가 버튼을 클릭하세요

vscode에서 백그라운드 업데이트를 활성화하는 방법 vscode에서 백그라운드 업데이트를 활성화하는 방법 vscode에서 백그라운드 업데이트를 활성화하는 방법 vscode에서 백그라운드 업데이트를 활성화하는 방법 May 09, 2024 am 09:52 AM

1. 먼저 인터페이스를 연 후 왼쪽 상단에 있는 파일 메뉴를 클릭합니다. 2. 그런 다음 환경 설정 열에서 설정 버튼을 클릭합니다. 3. 그런 다음 이동하는 설정 페이지에서 업데이트 섹션을 찾습니다. 마지막으로 마우스를 클릭하여 확인하고 활성화합니다. Windows의 백그라운드에서 새 VSCode 버전 버튼을 다운로드하여 설치하고 프로그램을 다시 시작합니다.

vscode에서 wsl 구성 파일을 비활성화하는 방법 vscode에서 wsl 구성 파일을 비활성화하는 방법 vscode에서 wsl 구성 파일을 비활성화하는 방법 vscode에서 wsl 구성 파일을 비활성화하는 방법 May 09, 2024 am 10:30 AM

1. 먼저 설정 메뉴에서 설정 옵션을 엽니다. 2. 그런 다음 일반적으로 사용되는 페이지에서 터미널 열을 찾습니다. 3. 마지막으로 열 오른쪽에 있는 usewslprofiles 버튼을 선택 취소합니다.

VScode에서 애니메이션 부드러운 삽입을 설정하는 방법 VScode 튜토리얼에서 애니메이션 부드러운 삽입을 설정하는 방법 VScode에서 애니메이션 부드러운 삽입을 설정하는 방법 VScode 튜토리얼에서 애니메이션 부드러운 삽입을 설정하는 방법 May 09, 2024 am 09:49 AM

1. 먼저 인터페이스를 연 후 작업 공간 인터페이스를 클릭합니다. 2. 그런 다음 열린 편집 패널에서 파일 메뉴를 클릭합니다. 3. 그런 다음 기본 설정 열 아래의 설정 버튼을 클릭합니다. 4. 마지막으로 마우스를 클릭하여 CursorSmoothCaretAnimation을 확인합니다. 버튼을 누르고 저장하면 됩니다.

Vscode에서 작업 공간 신뢰 권한을 여는 방법 Vscode 메서드에서 작업 공간 신뢰 권한을 여는 방법 Vscode에서 작업 공간 신뢰 권한을 여는 방법 Vscode 메서드에서 작업 공간 신뢰 권한을 여는 방법 May 09, 2024 am 10:34 AM

1. 먼저 편집 창을 연 후 왼쪽 하단에 있는 구성 아이콘을 클릭합니다. 2. 그런 다음 열리는 하위 메뉴에서 워크스페이스 신뢰 관리 버튼을 클릭합니다. 3. 그런 다음 편집 창에서 해당 페이지를 찾습니다. 마지막으로 귀하의 사무실에 따라 필요한 경우 관련 지침을 확인하십시오.

See all articles