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

2.3K10

何在Vscode安装Python

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

6.2K40

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.4K20

精读《如何在 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类似。

9.9K20

【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.4K10

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 语言说到底还是动态语言

8.3K32

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.3K20

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.5K10

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中进行调试呢?

3K20

【实验手册】使用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.2K90

【实验手册】使用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.1K102

教你动手写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.7K20

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.6K30

【腾讯云 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.8K30

全网最优雅的 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.5K20

最全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

尤雨溪写的100多行的“玩具 vite”,十分有助于理解 vite 原理

学会使用 VSCode 调试源码 3. 学会如何编译 Vue 单文件组件 4. 学会如何使用 recast 生成 ast 转换文件 5. 如何加载文件 6....对于提供在浏览器工作的 ES 模块构建的,只需直接从 CDN 导入它们。 导入到 .js 文件npm (仅名称)会即时重写以指向本地安装的文件。 目前,仅支持 vue 作为特例。...接着我们来调试这个中间件。 鉴于估计很多小伙伴没有用过VSCode调试,这里详细叙述下如何调试源码。学会调试源码后,源码并没有想象的那么难。...调试 VSCode 调试 Node.js 说明 点击进入函数(F11)按钮可以进入 vueMiddleware 函数。如果发现断点走到不是本项目的文件,不想看,看不懂的情况,可以退出或者重新来过。...非常建议读者朋友按照文中方法使用VSCode调试 vue-dev-server 源码。源码还有很多细节文中由于篇幅有限,未全面展开讲述。

78420
领券