VSCode에서 Node.js 기반의 JS 디버깅 환경을 구성하는 방법에 대해 이야기해보겠습니다.
VSCode에서 디버깅 환경을 구성하는 방법은 무엇입니까? 다음 글에서는 JavaScript 기반 Node.js 디버깅 환경을 구성하기 위해 VSCode를 구성하는 방법을 소개하겠습니다.
1. VSCode 및 Node.js 설치
서문: 과학적 연구를 하고 나면 요약하고 축적하는 일이 사실 드물다. 어쩌면 과학 연구에서 발생하는 문제에 대한 해결책이 더 많을 수도 있다. 다양하고 유연합니다. 게으른 하하하하. 프론트 엔드 작업을 마친 후 환경 구성을 기록하기 위해 더 이상 블로그를 작성할 필요가 없습니다. 자, 헛소리는 그만하고 본문을 시작하겠습니다. 다시 한번 말씀드리지만, 이 글에서 구성한 환경은 주로 LeetCode의 코드를 디버깅하기 위해 중단점 디버깅만을 목표로 합니다.
내 환경 :
Visual Studio Code 1.66.0- Node.js 16.14.2
- Windows10 64-bit
- VScode 다운로드에 대해서는 별로 말하지 않겠습니다. 주로 Node 설치만 기록합니다. (실제로는 이전에 여러 번 설치한 적이 있습니다.) [추천 학습:
https://nodejs.org/en/
-
https://nodejs.org/en/
- 开始安装,可以自定义选择安装路径。
- 这里选择Add Path,系统变量会自动设置,但是用户变量并没有自动设置,需要的话可以自己手动加一下。
- 测试是否安装成功,在命令行输入
node -v
和npm -v
,如果能显示出版本号说明安装成功,且已经有了正确的环境变量。
用户变量嘛最好也手动自己添加一个比较稳妥,因为我之前没有加,有时候在VSCode中会出现node.js找不到路径的情况,虽然重启会解决问题,但是弹了两次我总觉得还有些不对劲,所以就还是加了一下,大家在安装的时候最好提前加一下。 - 到这里,Node.js安装完成

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

자, Node.js js 설치 완료
2. VSCode 구성 🎜🎜 먼저 VSCode에 두 개의 플러그인을 설치하고, 하나는Code Runner
실행을 담당하고, 다른 하나는 JS 구문 팁 JavaScript(ES6) 코드 조각
입니다. 🎜


program
속성을 ${file}
로 변경하면 현재 디버깅된 파일을 식별할 수 있습니다. 매번 F5 키만 누르면 됩니다. 파일을 디버그하십시오. 🎜🎜🎜🎜이때 실제 구성은 이렇게 됩니다. test.js 파일에 직접 중단점을 넣고 F5를 눌러 디버깅하면 됩니다🎜🎜🎜🎜🎜🎜🎜 3. 가능한 문제 🎜🎜🎜 구성이 완료된 후 VSCode 디버깅을 시작하고 오류를 보고하는 경우: 경로에서 실행 가능한 노드를 찾을 수 없는 경우 VSCode를 다시 시작한 다음 디버깅하면 문제가 없습니다. 🎜약간의 감동 : 올해 가을 모집 작업을 위해 공부의 길이 다시 시작되었습니다. 작업을 잘하려면 먼저 도구를 연마해야 하므로 환경 구성에 대한 블로그 작성을 시작해야 합니다. 예상대로 다음 기사는 VSCode에서 Vue 구성에 관한 것입니다. 인턴때 반레이크지 글을 썼는데 별로 좋지 않아서 이제 다시 복습해서 완성해야겠습니다. 기술 분야에서 일하기로 선택한 이상, 한 가지 일을 사랑할 수 없다면 한 가지 일을 하고, 가능한 한 한 가지 일을 사랑해야 합니다. , 그리고 서두르세요! VSCode에 대한 자세한 내용을 보려면 vscode 기본 튜토리얼을 방문하세요!
위 내용은 VSCode에서 Node.js 기반의 JS 디버깅 환경을 구성하는 방법에 대해 이야기해보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

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

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

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

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

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

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

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

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

뜨거운 주제











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

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

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

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

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

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

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

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