首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在VSCode中调试NPM库包?

在VSCode中调试NPM库包可以通过以下步骤实现:

  1. 确保已经在项目中安装了所需的NPM库包,并且在项目的根目录下有一个package.json文件。
  2. 打开VSCode,并在侧边栏中选择项目文件夹。
  3. 在VSCode的顶部菜单中选择“View” -> “Debug”(或使用快捷键Ctrl+Shift+D)打开调试视图。
  4. 在调试视图的顶部工具栏中点击“创建一个启动配置文件”(一个带有齿轮图标的按钮)。
  5. 在弹出的菜单中选择“Node.js”作为调试环境。
  6. VSCode会自动在项目根目录下创建一个.vscode文件夹,并在其中生成一个launch.json文件,用于配置调试。
  7. 打开launch.json文件,并在configurations数组中添加一个新的调试配置。配置示例如下:
代码语言:txt
复制
{
  "type": "node",
  "request": "launch",
  "name": "Debug NPM Package",
  "program": "${workspaceFolder}/node_modules/.bin/<package-name>",
  "args": ["<arguments>"],
  "cwd": "${workspaceFolder}",
  "console": "integratedTerminal"
}

其中,<package-name>是要调试的NPM包的名称,<arguments>是传递给该包的参数。

  1. 保存launch.json文件。
  2. 在VSCode的调试视图中选择刚刚创建的调试配置。
  3. 点击调试视图顶部工具栏中的绿色播放按钮,开始调试。
  4. VSCode会打开一个集成终端,并在其中运行NPM包。你可以在终端中查看输出,并使用VSCode的调试工具进行断点调试、变量查看等操作。

需要注意的是,以上步骤假设你已经在项目中安装了VSCode的Node.js调试插件。如果没有安装,可以在VSCode的扩展市场中搜索并安装"Node.js Debug"插件。

此外,关于VSCode的调试功能和NPM包的具体调试方法,还可以参考腾讯云的云开发文档中的相关内容:VSCode 调试云函数

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何在Vscode中安装Python库

如何在vscode中安装python库 1.已经在vscode中装了python并配置好python运行环境。...image.png 检查是否正确配置好运行环境,按Windows+R组合键在运行窗口输入cmd,打开命令提示符窗口输入python确定即可 image.png 2.找到vscode中python的路径...如果你所显示的内容与我不同,可在setting.json中查找并将路径复制下来(在vscode中配置过python环境的应该都可以找到) 3.正式开始 在vscode中打开终端,点击View,在出现的选择栏中点击...\pip install 需要安装库名"确定等待安装成功即可(若失败可以多安装几次,也许会成功)。...我以安装numpy为例: image.png 当然若在输入“cd+格式+刚才复制的路径+\Scripts\”之后,并未跳出Scripts的路径,而是和我一样只有vscode的路径(如下图所示) image.png

7K40

如何在Vscode中安装Python库

如何在vscode中安装python库 1.已经在vscode中装了python并配置好python运行环境。...检查是否正确配置好运行环境,按Windows+R组合键在运行窗口输入cmd,打开命令提示符窗口输入python确定即可 2.找到vscode中python的路径 随便运行一个代码,例如print(“hehe...如果你所显示的内容与我不同,可在setting.json中查找并将路径复制下来(在vscode中配置过python环境的应该都可以找到) 3.正式开始 在vscode中打开终端,点击View,在出现的选择栏中点击...\pip install 需要安装库名"确定等待安装成功即可(若失败可以多安装几次,也许会成功)。...我以安装numpy为例: 当然若在输入“cd+格式+刚才复制的路径+\Scripts\”之后,并未跳出Scripts的路径,而是和我一样只有vscode的路径(如下图所示) 直接点击打开链接地址,可以选择新建窗口

2.5K10
  • Vscode笔记-24款插件

    : []String 传递给程序的参数,可在process.argv拿到 cwd :指定程序启动调试的目录 ,当vscode启动目录不是项目根目录,并且调试npm script时非常有用 runtimeExecutable...: 设置运行时可执行文件路径,默认是node 可以是其他的执行程序,如npm、nodemon runtimeArgs: 传递给运行时可执行文件的参数,例如: runtimeVersion: 设置运行时可执行程序的版本...Bash Debug 一个基于超赞bashdb脚本的bash调试器GUI前端(bashdb现在包含在软件包中)。 Better Comments 更好的注释扩展,将帮助您在代码中创建更人性化的注释。...只需注意左侧的灯泡,然后按一下它即可了解如何在光标下转换代码。 json2ts 可将JSON转换为TypeScript接口。您可以从VS Code中浏览和安装扩展。...Browser Preview,在vscode中实现预览调试 Settings Sync 上传和拉取 vscode 可以快速完成配置,自动安装相关扩展 搜索扩展并安装Settings Sync 拉取公共配置文件和扩展

    10.8K21

    精读《如何在 nodejs 使用环境变量》

    1 引言 本期精读的文章是:如何在 nodejs 使用环境变量。 介绍了开发与生产环境如何管理环境变量。 这里环境变量指的是数据库密码等重要数据,而不是指普通变量传参。...ssl=true&replicaSet=globaldb" SECRET_KEY="b6264fca-8adf-457f-a94f-5a4b0d1ca2b9" 通过 dotenv 这个 npm 包可以读取...这么做将配置保留在 VSCode 中,而不是代码中,不用再担心不小心上传了配置文件啦!...那么首先在 VSCode launch.json 中配置 Npm 模式: 记住,需要给 Node 脚本添加 --inspect 参数,才能触发 VSCode debugger 的钩子: 这样一来,通过...本地通过 VSCode 调试环境变量既方便又安全。 生产环境通过云服务商提供的环境变量配置服务拿到环境变量。

    3K20

    在Linux下搭建Swift开发调试环境

    在Linux下搭建Swift开发调试环境 文本介绍如何在Linux下配置一个的Swift开发环境(可用于生产),文中所记录的各个配置环节不仅适用于Linux,也同样适用于在macOS下配置Visual.../Editors/vscode/ $ npm install $ npm run dev-package image-20210214151421778 编译成功的插件被放置在 ~/sourcekit-lsp...它构建为一组可重用的组件,这些组件广泛使用LLVM中的现有库,例如Clang表达式解析器和LLVM反汇编程序。通过LLDB,让vscode拥有了对Swift代码进行调试的能力。....vscode目录中针对每个项目分别创建调试配置文件launch.json和tasks.json。...launch.json是vscode用于调试的配置文件,比如指定调试语言环境,指定调试类型等等。其作用和XCode中的target类似。

    10.1K20

    【webpack 插件开发】如何在vscode调试webpack源码

    也该整理出来了 ❞ 暂定会更新以下知识点 如何实现一个webpack loader 如何实现一个webpack plugin 谈谈Tapable 实现一个简易的webpack debug webpack源码 如何在...vscode调试源码 ❝先学会调试源码,在后面开发loader或者plugin会显得更得心应手,以下是我调试less-loader的分享 ❞ 使用 vscode + npm 插件 ❝在 vscode 中安装插件...egamma/npm 插件。...安装完成之后,在 Explorer 界面中会出现 NPM SCRIPTS 的面板,其中就会解析 package.json 中定义的脚本命令,这样只需要点击即可,不用每次手输命令行,还带有 debug 功能...例如想要看一下,less-loader 在打包时候的运行过程, 我们可以手动clone less-loader项目,然后手动引入, 文件中对应位置打上断点,然后再 NPM SCRIPTS 面板对应命令上点击

    1.5K10

    Node.js 项目 TypeScript 改造指南

    "commonjs", /* 编译目标模块系统*/ // "lib": [], /* 编译过程中需要引入的库文件列表...packaeg.json中添加scripts 前面我们将 typescript 包安装到项目依赖后,避免每次执行编译时都需要输入node ....方法一、调试生成后的dist文件 VSCode 参考配置(/path/to/project/.vscode/launch.json)如下: { "configurations": [{ "type...VSCode调试js 方法二、直接调试ts文件 使用 ts-node进 行调试,VSCode 参考配置如下,详见ts-node[2] { "configurations": [{ "type...VSCode调试ts 步骤七、类型加强、消除any 接下来要做的就是补充 Interface、Type,逐步将代码中的被业界喷得体无完肤的 any 干掉,但不要妄想去掉所有 any ,js 语言说到底还是动态语言

    8.4K32

    Node.js项目TypeScript改造指南

    "commonjs", /* 编译目标模块系统*/ // "lib": [], /* 编译过程中需要引入的库文件列表...packaeg.json中添加scripts 前面我们将 typescript 包安装到项目依赖后,避免每次执行编译时都需要输入node ....方法一、调试生成后的dist文件 VSCode 参考配置(/path/to/project/.vscode/launch.json)如下: { "configurations": [{ "type...VSCode调试js 方法二、直接调试ts文件 使用 ts-node进 行调试,VSCode 参考配置如下,详见ts-node[2] { "configurations": [{ "type...VSCode调试ts 步骤七、类型加强、消除any 接下来要做的就是补充 Interface、Type,逐步将代码中的被业界喷得体无完肤的 any 干掉,但不要妄想去掉所有 any ,js 语言说到底还是动态语言

    4.6K10

    react native基本使用

    https://npm.taobao.org/dist 编译 react-native start运行 添加VScode调试配置后(配置使用react native调试) yarn 安装包(npm...,可以检查任务管理器,关闭所有执行中的node.exe程序,node端口占用可能导致调试连接失败,也可以关闭react native包生成工具,node程序大概是用作生成包的 adb连接 adb...devices显示正常 react-devtools调试ui 访问地址(先启动调试,否则vscode提示已经建立调试连接错误),浏览器devtool可以查看变量: http://localhost...调试打包错误,手动点击vscode下面的停止包生成工具按钮,重新启动打包 原理 Gradle构建项目、依赖android sdk或者ios autolink功能 修改下面三个文件 settings.gradle...中看到错误,app中没有call stack显示) 另一个调试工具占用,vscode调试退出 先启动vscode调试,再打开http://localhost:8081/debugger-ui/(占用调试资源

    2.5K20

    Node.js项目TypeScript改造指南

    "commonjs", /* 编译目标模块系统*/ // "lib": [], /* 编译过程中需要引入的库文件列表...packaeg.json中添加scripts 前面我们将 typescript 包安装到项目依赖后,避免每次执行编译时都需要输入node ....方法一、调试生成后的dist文件 VSCode 参考配置(/path/to/project/.vscode/launch.json)如下: { "configurations": [{ "type...VSCode调试js 方法二、直接调试ts文件 使用 ts-node进 行调试,VSCode 参考配置如下,详见ts-node[2] { "configurations": [{ "type...VSCode调试ts 步骤七、类型加强、消除any 接下来要做的就是补充 Interface、Type,逐步将代码中的被业界喷得体无完肤的 any 干掉,但不要妄想去掉所有 any ,js 语言说到底还是动态语言

    4.4K20

    js-基础知识-01-VsCode环境设置

    系统:Windows 7 VsCode:1.48.2 Node.js:12.8.1 这个系列讲讲javascript的一些基础知识 今天讲讲如何单独运行js文件,以及如何在VsCode中进行调试...Part 1:背景介绍 一个网站简单可以由以下三个部分构成 前端,简单来说用户可以直接看到界面 后端,运行在服务器端,目前我这边使用是Python的Django框架 数据库,常用的有MySQL,SQL...Part 2: VsCode配置 VsCode支持多种语言,对于js的支持,我们需要进行单独配置 扩展包安装,因为我也使用VsCode做其它事情,需要扩展包安装的比较多,下列扩展建议安装 Code...Runner是否安装成功 扩展包 ?...Part 3:VsCode代码调试功能设置 写代码一个很重要的步骤是进行代码调试,那么如何在VsCode中进行调试呢?

    3.1K20

    【实验手册】使用Visual Studio Code 开发.NET Core应用程序

    本实验将介绍如何开发.NET Core跨平台应用程序,以及如何在 Linux、OS X 和 Windows 上的 Visual Studio Code (code.visualstudio.com) 中编写代码...Node.JS和NPM,以及 bower, gulp 和 grunt 等前端工具, Node.js是一个javascript的运行引擎,提供服务端的javascript运行能力,同时也包含了npm这个包管理器...练习3:使用 Visual Studio Code和 Omnisharp 调试 c# 代码 上面的练习我们已经看到项目下有个.vscode 文件夹。...任务1:从VS code启动调试器 对于控制台和Web项目是非常简单的,只需在代码中设置断点,导航到调试窗口(ctrl + shift + d)并点击调试按钮 - “.Net Core Launch”选项应该默认选择...任务2:附加到进程/网站 使用VsCode将调试器附加到正在运行的进程也非常简单,设置断点,从调试菜单中选择“.Net Core Attach”选项,然后进行调试。

    3.4K90

    【实验手册】使用Visual Studio Code 开发.NET Core应用程序

    本实验将介绍如何开发.NET Core跨平台应用程序,以及如何在 Linux、OS X 和 Windows 上的 Visual Studio Code (code.visualstudio.com) 中编写代码...Node.JS和NPM,以及 bower, gulp 和 grunt 等前端工具, Node.js是一个javascript的运行引擎,提供服务端的javascript运行能力,同时也包含了npm这个包管理器...练习3:使用 Visual Studio Code和 Omnisharp 调试 c# 代码 上面的练习我们已经看到项目下有个.vscode 文件夹。...任务1:从VS code启动调试器 对于控制台和Web项目是非常简单的,只需在代码中设置断点,导航到调试窗口(ctrl + shift + d)并点击调试按钮 - “.Net Core Launch”选项应该默认选择...任务2:附加到进程/网站 使用VsCode将调试器附加到正在运行的进程也非常简单,设置断点,从调试菜单中选择“.Net Core Attach”选项,然后进行调试。

    5.2K102

    教你动手写VScode插件 - 初探

    今天我又来解锁一种开发工具的神器--VScode插件。 其实vscode现在已经很多大厂先后开发出他们各自的插件,如:华为LiteOS Studio,RT-Thread Studio等。...如下图: 运行测试:可以直接按F5按钮或者点击VS Code菜单栏:运行->启动调试。会弹出一个新的vscode工作区。...vscode支持打包和发布。打包和发送:如同我们QT开发编译生成的exe文件就是打包过程,然后将这个包发布到网上,就是发布过程。 打包插件需要一个工具:vsce。...vsce publish 打包流程:打包的最终结果是一个.vsix的插件包,可以通过vscode手动添加插件安装,也可以通过marketplace分享自己的插件。...手动添加插件 选择打包好后的插件包:rice-vsca-0.0.1.vsix 安装完之后会显示在插件已安装的目录中: 运行测试插件包

    1.8K20

    VSCode插件大全|VSCode高级玩家之第二篇

    增强Git功能 插件名:GitLens 增强VSCode中内置的Git功能—通过Git blame注释和代码透镜,一眼就能看到代码作者的身份,无缝导航和探索Git存储库,通过强大的比较命令获得有价值的见解...NPM支持 插件名:npm 这个扩展支持运行包中定义的npm脚本。并根据包中定义的依赖项验证已安装的模块。最喜欢这个插件的功能就是可以自动检测依赖是否安装,还可以提示依赖的版本和具体项目地址。...使用npm的童鞋必备插件之一。 NPM智能提示 插件名:npm Intellisense 加入此插件可以让我们在编写JavaScript的时候有npm依赖包的提示。特别是引用的过程中会有丰富的提示。...提供了一种安全的方法在VSCode中呈现web内容,并支持一些有趣的特性,如编辑器内调试等! 再也不用在浏览器和编辑器中来回切换而觉得麻烦了!...Java依赖查看器 查看Java项目、引用库、资源文件、包、类和类成员 Visual Studio IntelliCode 开发辅助 完整的代码填充 其他语言支持 使用VSCode开发其他语言也是完全可以的

    4.7K30

    【腾讯云 Cloud Studio 实战训练营】- Cloud Studio 提高前后端工程化效率

    图片7.2 新建主作空间:大家在前端开发的过程中,经常会搭建自己的npm私有仓库,比如UI组件库、工具库等,本章就来在自己的服务器上实践一下,我们前端工程化的本系是否满足需求。...图片公司是使用verdaccio搭建一个轻型的npm私有源服务,为内部、合作方提供需要共享的私有包,以前是每个设备上使用之前都需要安装一下,现在使用公共的服务器,只需要装一次即可,大家在不同的目录中开发...npm i -g verdaccio图片安装完成后,使用pm2启动一个verdaccio服务器,用于大件npm私有库。...图片登录到npm verdaccio私服仓库,再将脚手架包发布publish到npm verdaccio私服仓库。图片发布成功后,可以在npm verdaccio私服仓库网址上查看刚刚发布的包。...Redis,并且并不需要过多的额外设置3vscode-mysql-client2使用vscode的调试功能可以让开发人员更加轻松快捷地调试MySQL数据库4vscode-postgresql-client

    13.9K30

    全网最优雅的 React 源码调试方式

    这时候浏览器访问就可以用 Chrome Devtools 调试了: 但我们的目标是在 VSCode 里调试,所以要添加一个 VSCode 的 debugger 配置: 在根目录下建一个 .vscode...然后点击 debug 启动: 这时候就可以在 VSCode 里直接打断点调试了: 用 VSCode 调试肯定会比 Chrome Devtools 方便一些。...sourcemap 的作用就是映射目标代码中的位置和源码中的位置。 比如源码中的第 3 行第 5 列的代码对应着编译后的第 1 行第 10 列的代码。...sourcemap 来映射调试的代码位置到源代码中的位置。...包 用 npm 下载的 react 包是这样的: 而我们需要的是带有 sourcemap 的代码,也就是这样的: 这就要下载 react 源码自己 build 了: git clone https

    1.8K20

    最全Vue开发环境搭建

    vue的安装 1.vue的安装依赖npm 从node.js官网下载并安装node,为什么要安装node,因为node中自带npm;有空还可以学一下node.js,毕竟node.js也可以开发后端。...2.安装cnpm 在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org 建议都用-g。...全局安装 然后等待,安装完成后可进入cmd编辑器,输入命令 cnpm -v进行查看,如已成功安装会出现对应版本 大部分npm包是国外的,用淘宝镜像的cnpm来代替npm的安装,速度会快很多。...,进入到项目文件(如果项目已经被npm install过=安装依赖包)执行命令 npm run dev(之后chrome浏览器F12后) 如图所示: ?...编辑器我推荐用vscode。。 安装vscode  别的不敢说,微软出的工具我觉得没啥可说的,我觉得好用、放心。。安装肯定简单,下载后一直下一步即可,不在多说。

    2.3K20
    领券