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

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에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
Visual Studio : 가격 및 라이센스 옵션 탐색Visual Studio : 가격 및 라이센스 옵션 탐색Apr 13, 2025 am 12:03 AM

Community Free Edition은 개인 및 소규모 팀을위한 Community Free Edition, Professional Pait Edition은 전문 개발자 및 중소형 팀을위한 것이며 Enterprise Ultimate Edition은 대기업 및 복잡한 프로젝트를위한 Enterprise입니다.

Visual Studio의 가치 : 이점에 대한 비용의 무게를 측정합니다Visual Studio의 가치 : 이점에 대한 비용의 무게를 측정합니다Apr 12, 2025 am 12:06 AM

VisualStudio는 .NET 개발에서 강력하고 포괄적이기 때문에 매우 가치가 있습니다. 높은 비용 및 자원 소비에도 불구하고 효율성 개선 및 개발 경험이 중요합니다. 커뮤니티는 개별 개발자와 소규모 팀에 이상적입니다. 대기업은 전문 또는 기업에 적합합니다.

Visual Studio의 가용성 : 어떤 판이 무료입니까?Visual Studio의 가용성 : 어떤 판이 무료입니까?Apr 10, 2025 am 09:44 AM

VisualStudio의 무료 버전에는 VisualStudiocommunity 및 VisualStudioCode가 포함됩니다. 1. VisualStudiocommunity는 개별 개발자, 오픈 소스 프로젝트 및 소규모 팀에 적합합니다. 강력하고 개별 프로젝트 및 학습 프로그래밍에 적합합니다. 2. VisualStudioCode는 여러 프로그래밍 언어 및 확장을 지원하는 가벼운 코드 편집기입니다. 빠른 시작 속도와 리소스 사용량이 낮으므로 유연성과 확장 성이 필요한 개발자에게 적합합니다.

Windows 8 용 Visual Studio를 설치하는 방법은 무엇입니까?Windows 8 용 Visual Studio를 설치하는 방법은 무엇입니까?Apr 09, 2025 am 12:19 AM

Windows 8에 VisualStudio를 설치하는 단계는 다음과 같습니다. 1. 공식 Microsoft 웹 사이트에서 VisualStudioCommunity2019 설치 패키지 다운로드. 2. 설치 프로그램을 실행하고 필요한 구성 요소를 선택하십시오. 3. 설치가 완료된 후에 사용할 수 있습니다. Windows 8 호환 구성 요소를 선택하고 충분한 디스크 공간과 관리자 권한이 있는지 확인하십시오.

내 컴퓨터가 코드를 실행할 수 있습니까?내 컴퓨터가 코드를 실행할 수 있습니까?Apr 08, 2025 am 12:16 AM

VSCODE는 기본 시스템 요구 사항이 충족되는 한 대부분의 최신 컴퓨터에서 실행할 수 있습니다. 1. 운영 체제 : Windows 7 이상, MacOS 10.9 이상, Linux; 2. 프로세서 : 1.6GHz 이상; 3. 메모리 : 최소 2GB RAM (4GB 이상 권장); 4. 저장 공간 : 최소 200MB의 가용 공간. 설정을 최적화하고 확장 된 사용량을 줄이면 저조제 컴퓨터에서 원활한 사용자 경험을 얻을 수 있습니다.

Windows 8과 프로그램을 호환하려면 어떻게해야합니까?Windows 8과 프로그램을 호환하려면 어떻게해야합니까?Apr 07, 2025 am 12:09 AM

Windows 8에서 프로그램을 원활하게 실행하려면 다음 단계가 필요합니다. 1. 호환성 모드 사용 코드를 통해이 모드를 감지하고 활성화하십시오. 2. API 호출을 조정하고 Windows 버전에 따라 적절한 API를 선택하십시오. 3. 성능 최적화를 수행하고 호환성 모드 사용을 피하고 API 호출을 최적화하고 일반 컨트롤을 사용하십시오.

대 코드는 Windows 8에서 작동합니까?대 코드는 Windows 8에서 작동합니까?Apr 06, 2025 am 12:13 AM

예, VSCODEISCOMPATIBLEWITHWINDOWS8.1) INSTALLERFROMSCODEWEBSITENUERETHELATEST.NETFRAMEWORKISINSTALLED.2) InstalLextEnsionSusingTheCommandLine, NotingSomeMayloadSusingHextensions

VS 코드와 비주얼 스튜디오의 차이점은 무엇입니까?VS 코드와 비주얼 스튜디오의 차이점은 무엇입니까?Apr 05, 2025 am 12:07 AM

VSCODE는 여러 언어 및 확장에 적합한 가벼운 코드 편집기입니다. VisualStudio는 주로 .NET 개발에 주로 사용되는 강력한 IDE입니다. 1.VScode는 전자를 기반으로하고 크로스 플랫폼을 지원하며 Monaco 편집기를 사용합니다. 2. VisualStudio는 Microsoft의 독립 기술 스택을 사용하여 디버깅 및 컴파일러를 통합합니다. 3.VScode는 간단한 작업에 적합하며 VisualStudio는 대규모 프로젝트에 적합합니다.

See all articles

핫 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尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

SecList

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

맨티스BT

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.