搜索
首页开发工具VSCode聊聊在VSCode中怎么配置JS基于Node.js的调试环境

VSCode中怎么配置调试环境?下面本篇文章给大家介绍一下VSCode配置JavaScript基于Node.js调试环境的方法,希望对大家有所帮助!

聊聊在VSCode中怎么配置JS基于Node.js的调试环境

一、安装VSCode和Node.js

       前言:做科研之后确实很少会总结积累,可能是科研中出现的问题的解决方法比较多样灵活,别说了其实就是偷懒哈哈哈哈哈。这不又要做前端才又开始写博客记录环境配置了。行了不说废话了赶紧开始正文。

       再啰嗦一句,本文配置的环境主要针对单独JS文件的断点调试,主要是为了调试LeetCode里面的代码。

本人环境:

  • Visual Studio Code 1.66.0
  • Node.js 16.14.2
  • Windows10 64位

         VScode的下载就不多说了,主要记录一下Node的安装(其实以前安装过好多遍)。【推荐学习:vscode教程编程教学

  1. 首先去官网下载对应的版本:https://nodejs.org/en/
    在这里插入图片描述
  2. 开始安装,可以自定义选择安装路径。
    在这里插入图片描述
  3. 这里选择Add Path,系统变量会自动设置,但是用户变量并没有自动设置,需要的话可以自己手动加一下。
    在这里插入图片描述
  4. 测试是否安装成功,在命令行输入node -vnpm -v,如果能显示出版本号说明安装成功,且已经有了正确的环境变量。
    在这里插入图片描述
           用户变量嘛最好也手动自己添加一个比较稳妥,因为我之前没有加,有时候在VSCode中会出现node.js找不到路径的情况,虽然重启会解决问题,但是弹了两次我总觉得还有些不对劲,所以就还是加了一下,大家在安装的时候最好提前加一下。
    在这里插入图片描述
  5. 到这里,Node.js安装完成

二、VSCode配置

  1. 先在VSCode里面安装两个插件,一个是负责运行的Code Runner,一个是JS的语法提示JavaScript(ES6) code snippets
    在这里插入图片描述
  2. 创建配置文件,打开你的代码文件夹,先随便创建一个test.js,随便写几句测试代码。然后点击左边侧边栏的调试工具,选择创建launch.json文件。
    在这里插入图片描述
  3. 选择node.js调试环境,测试代码也可以用图里面的。
    在这里插入图片描述
  4. 此时配置文件会自动生成,注意重点要修改一个地方,这里不要写死。将program属性改成${file},这样可以识别当前调试的文件,不需要每次都在这里更换文件名,调试哪个文件直接F5就OK。
    在这里插入图片描述
  5. 到这里,其实就配置好了,此时的文件结构是这样的,可以直接在test.js文件打上断点,按F5进行调试
    在这里插入图片描述
    在这里插入图片描述

三、可能出现的问题

        如果配置完成之后启动调试VSCode报错:无法在Path上找到可运行的Node时,重启VSCode再进行调试就没问题了。

        一点小感慨:为了今年的秋招工作,前端的学习之路又开始了。工欲善其事,必先利其器,所以又要开始写配置环境的博客,不出所料的话下一篇要在VSCode里面配置Vue。以前在实习的时候写了一篇banlakeji的也不太好,现在又重新走了一遍搞个完整的。既然选择做技术了就得踏踏实实的做下去,不能爱一行干一行就得干一行尽量爱一行,冲!

更多关于VSCode的相关知识,请访问:vscode基础教程

以上是聊聊在VSCode中怎么配置JS基于Node.js的调试环境的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文转载于:csdn。如有侵权,请联系admin@php.cn删除
Visual Studio与VS代码:哪个对您的项目更好?Visual Studio与VS代码:哪个对您的项目更好?Apr 14, 2025 am 12:03 AM

VisualStudio适合大型项目和需要强大调试功能的开发场景,而VSCode则适合需要灵活性和跨平台开发的场景。 VisualStudio提供全面的开发环境,支持.NET开发,集成了调试工具和项目管理功能;VSCode以轻量和扩展性着称,支持多种编程语言,通过插件系统增强功能,适用于现代开发流程。

Visual Studio:探索定价和许可选项Visual Studio:探索定价和许可选项Apr 13, 2025 am 12:03 AM

VisualStudio提供三种版本:Community免费版适用于个人和小型团队,Professional付费版适合专业开发者和中小型团队,Enterprise旗舰版面向大型企业和复杂项目。

Visual Studio的价值:权衡成本与其收益Visual Studio的价值:权衡成本与其收益Apr 12, 2025 am 12:06 AM

VisualStudio在.NET开发中价值高,因其功能强大且全面。尽管成本和资源消耗较高,但其带来的效率提升和开发体验改善显着。对于个人开发者和小型团队,Community版是理想选择;大型企业则适合Professional或Enterprise版。

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

在Windows8上安装VisualStudio的步骤如下:1.从微软官方网站下载VisualStudioCommunity2019安装包。2.运行安装程序并选择所需组件。3.完成安装后即可使用。注意选择与Windows8兼容的组件,并确保有足够的磁盘空间和管理员权限。

我的计算机可以运行与代码吗?我的计算机可以运行与代码吗?Apr 08, 2025 am 12:16 AM

VSCode可以在大多数现代电脑上运行,只要满足基本系统要求:1.操作系统:Windows7及以上,macOS10.9及以上,Linux;2.处理器:1.6GHz或更快;3.内存:至少2GBRAM(推荐4GB或更高);4.存储空间:至少200MB可用空间。通过优化设置和减少扩展使用,可以在低配置电脑上获得流畅的使用体验。

如何使程序与Windows 8兼容?如何使程序与Windows 8兼容?Apr 07, 2025 am 12:09 AM

要让程序在Windows8上顺畅运行,需采取以下步骤:1.使用兼容性模式,通过代码检测并启用该模式。2.调整API调用,根据Windows版本选择适当的API。3.进行性能优化,尽量避免使用兼容性模式,优化API调用并使用通用控件。

VS代码在Windows 8上有效吗?VS代码在Windows 8上有效吗?Apr 06, 2025 am 12:13 AM

是的,vscodeiscompatiblewithwindows8.1)下载theinstallerfromtherfromthevscodewebsiteandensuretheletheLatest.netframeworksinstalled.2)installextensionsionsthecommandline,installextensions inthecommandline,notsomemememandline,NoteMemeMemAlandlower.3)noteSmomeMayMayload

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器