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

VS Code在调试时使用我的gatsby-node.ts的内联源映射需要什么?

在调试时使用VS Code的内联源映射(inline source maps)需要以下几个步骤:

  1. 首先,确保你已经安装了VS Code编辑器,并且已经将你的项目打开在VS Code中。
  2. 在你的项目中,找到并打开gatsby-node.ts文件。
  3. 确保你已经为该文件启用了调试模式。可以通过在文件顶部添加断点或者在行号处点击来设置断点。
  4. 在VS Code中,打开调试面板。可以通过点击菜单栏上的调试图标或使用快捷键F5来打开。
  5. 在调试面板中,点击“添加配置”按钮,选择“Node.js”作为调试类型。这将会在项目根目录下生成一个.vscode/launch.json配置文件。
  6. 在生成的launch.json文件中,找到configurations字段,添加以下配置:
代码语言:txt
复制
{
  "name": "Debug gatsby-node.ts",
  "type": "node",
  "request": "launch",
  "program": "${workspaceFolder}/gatsby-node.ts",
  "outFiles": [
    "${workspaceFolder}/dist/**/*.js"
  ],
  "sourceMaps": true
}

其中,name字段可以自定义调试配置的名称,program字段指定了要调试的文件路径,outFiles字段指定了编译后的JavaScript文件的输出路径,sourceMaps字段启用了源映射。

  1. 保存launch.json文件,并返回到调试面板。
  2. 确保你已经编译了你的gatsby-node.ts文件,生成了对应的JavaScript文件。这通常可以通过运行构建命令或者在VS Code的终端中运行相关脚本来完成。
  3. 在调试面板中,选择刚刚创建的调试配置(例如,"Debug gatsby-node.ts")。
  4. 点击调试面板中的“启动调试”按钮,开始调试gatsby-node.ts文件。

通过以上步骤,你就可以在使用VS Code进行调试时,使用内联源映射来调试你的gatsby-node.ts文件了。

注意:为了使上述配置生效,确保你的项目中已经正确安装了相关的调试插件和依赖,并且项目的文件结构和路径配置与上述步骤保持一致。

参考链接:VS Code 官方文档 - 调试

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

相关·内容

VS Code 调试完全攻略(6):调试由 TypeScript 开发 React

本文将向你展示如何在 VS Code 中创建匹配调试器。 ? VS Code 调试完全攻略系列目录 ?...像往常一样,这个文件夹中代码保持尽可能简单,以便使我们把注意力集中调试器上。在用于生产应用程序中,我们将会使用人性化文件夹结构。...程序启动获取文章列表,然后单击标题从服务器获取所选文章正文。 配置调试器 我们希望调试能够 VS Code 中设置断点、启动调试浏览器、以及逐步调试获取初始列表和后续远程请求。...type 和 request 参数告诉 VS Code Chrome 窗口中开始调试。 第一次运行后,启动器 name 将显示调试工具栏和 IDE 状态栏中: ?...没有这个设置,VS Code 会无法将断点位置映射到运行时代码: ?

4.7K20
  • 分享 10 多条超有用 VsCode 各场景高级调试技巧

    仅当执行到达与内联断点关联,才会命中内联断点。...uriFormat映射为URI,其中%s使用pattern中第一个捕获组替换。最后使用该URI作为外部程序打开URI。...为了支持调试 Ts 与正在执行 Js 代码相结合,VS Code 依赖于调试source map Ts 源代码和正在运行 Js 之间进行映射,所以需要需要开启sourceMap选项。...image.png Firefox初始启动不会触发调试需要刷新一次 调试Electron项目 Electron很多人都使用过,主要用于开发跨平台系统桌面应用。...主进程相关代码上打上断点,然后启动调试主进程命令就可以调试主进程了 image.png 注意,这里options参数是根据实际情况,自定义添加我们运行项目需要参数,比如我这里因为启动项目的

    1.7K40

    VsCode 各场景高级调试技巧,有用!

    仅当执行到达与内联断点关联,才会命中内联断点。...uriFormat映射为URI,其中%s使用pattern中第一个捕获组替换。最后使用该URI作为外部程序打开URI。...为了支持调试 Ts 与正在执行 Js 代码相结合,VS Code 依赖于调试source map Ts 源代码和正在运行 Js 之间进行映射,所以需要需要开启sourceMap选项。...image.png Firefox初始启动不会触发调试需要刷新一次 调试Electron项目 Electron很多人都使用过,主要用于开发跨平台系统桌面应用。...主进程相关代码上打上断点,然后启动调试主进程命令就可以调试主进程了 image.png 注意,这里options参数是根据实际情况,自定义添加我们运行项目需要参数,比如我这里因为启动项目的

    1.1K20

    ObjectDataSource选择业务对象列表为空探讨

    前天晚上,一个页面上拖了一个ObjectDataSource,配置数据发现选择业务对象列表没有列出当前项目的实体类,甚至连NewLife.CommonEntity中实体类也没有列出来。...搞了大半天,还是没有一丁点头绪,因为.Net类库里面设计时方面大量使用接口,以及GetService之类模式,压根就找不到实现类在哪!...源代码控制就是好,可以记录编码过程中点点滴滴!似乎也没什么用,那天修改几个问题,都是改一下函数内部处理代码而已,vs加载实体类型,不会执行到里面的代码。于是又断线了!    ...vs2010调试vs2010,打开.Net源码调试,很悲剧,vs2010源码是不公开,同时因为没有合适启动项目,压根就没地方下断点!     很不情愿安装了非常不熟悉WinDbg。...7,g吧,vs2010从挂起中恢复了,正常操作,配置数据,不动了……果然WinDbg中断下了,你就不能学学OD,断下时候自动把窗口弹出到前面来吗?     。。。。。。

    1.4K70

    腾讯云AI代码助手 —— 编程新体验,智能编码新纪元

    目前,它支持以下IDE: Visual Studio CodeVS Code):作为轻量级但功能强大代码编辑器,VS Code广受开发者喜爱。...开发环境配置 为了使用腾讯云AI代码助手,开发者需要在自己开发环境中进行简单配置。...通常需要开发者使用腾讯云账号进行登录,并进行相应安全认证。 开始使用:登录认证完成后,即可在VS Code中开始使用腾讯云AI代码助手功能。...错误排查与预防强化:错误管理方面,腾讯云AI代码助手同样展现出了非凡能力。其内置bug检测机制代码编写初期就能敏锐捕捉潜在问题,并提供修复建议,有效降低了后期测试与调试成本。...作为用户, 想要提出一些建议: 使用过程中可以根据用户个性需求来定制一份专属代码助手,可以结合用户代码风格以及拼写习惯来生成更便捷代码。

    10710

    VS Code有哪些奇技淫巧?

    很多人想必对VS Code都有自己独门使用诀窍,让我们一起来看看知友们‍‍‍‍‍‍都有些什么奇技淫巧!...合并参数:将函数多个参数合并为单个对象参数: 二、自定义视图布局 VS Code 布局系统非常灵活,可以工作台上活动栏、面板中移动视图 三、快速调试代码 VS Code调试 JS/TS...这在调试前端或 Node 项目非常有用,这类型项目通常会启动一个本地服务,这时候只需要将本地服务地址填写到 Debug: Open Link 输入框中即可。...集成终端 VS Code中,能够直接打开终端。这使得,无论是调试代码,还是执行终端命令行工具,都无需切换窗口,避免一些时间浪费。 要想使用VS Code终端,需要首先安装它。...下面,就来介绍VS Code一些有用快捷键。你不需要全部都记住,只需记住一些符合自己使用场景即可。

    1.7K10

    这 5 个 VSCode 扩展提高你开发兴趣

    SVG Preview VS Code 具有一个内置图像预览窗口,但是当你单击.svg文件,它仅显示代码。...借助 SVG Preview,我们会获得一个附加侧窗,可以预览图像,甚至可以更改SVG代码进行更新。 地址:https://marketplace.visualstu......image.png 3. i18n Ally 几个月前,开始使用i18n,不得不说它使网络应用本地化为多种语言变得异常容易。唯一困难是,无法实际处理文件中编辑翻译。...Code Spell Checker Code Spell Checker 强烈推荐,对大部分非英语母语又不想写出四不像变量名程序员来说,正确识记拼写各种单词还是有不小挑战,比模棱两可需要去查在线词典不同是...VS Code Icons 当前有超过四百万用户,你可能已经使用此功能,这就是为什么它在此列表中具有很高优势。

    1K40

    10 个你可能还不知道 VS Code 使用技巧

    ref=codebldr#_dynamic-view-icons-and-titles) NO.3 三、快速调试代码 VS Code调试 JS/TS 代码非常简单,只需要使用 Debug: Open...这在调试前端或 Node 项目非常有用,这类型项目通常会启动一个本地服务,这时候只需要将本地服务地址填写到 Debug: Open Link 输入框中即可。 ?...一些开发者会使用 VS Code 小地图,但其实还有更便捷方法:可以使用 ⇧⌘O 快捷键唤起符号导航面板,在当前编辑文件中通过符号快速定位代码。...当对内容特别多文件进行编辑时候,经常需要在上下文中进行切换,这时候可以通过拆分编辑器来使用两个编辑器更新同一个文件:按下快捷键 ⌘\ 将活动编辑器拆分为两个。...例如: 解决冲突:VS Code 会识别合并冲突,冲突差异会被突出显示,并且提供了内联操作来解决冲突。 ? 暂存或撤销选择代码行:在编辑器内可以针对选择行来撤销修改、暂存修改、撤销暂存。 ?

    3.6K30

    webpackdevtool配置简单对比简书_钢铁雄心4toolpack

    不过,什么是source map,官方用提供了许多种source map,其中区别是什么,我们开发中应该怎么选择,都是我们要学习。 1....什么是 source map 现在前端代码会通过babel编译或者各类压缩,debug,只能调试编译或者压缩后代码。...下为 react 项目代码使用source map前后图 编译后代码 使用source map后代码 使用source map后,我们可以相当于是自己写代码里调试了~ 1.1 source...map分类 source map 文件分为2类,内联型和外联型 内联映射,将映射数据之间添加在生成文件中, .map 文件中sourcesContent字段来存放源码 外联映射,将映射数据存储单独映射文件中...这通常意味着每个语句只有一个映射(假设你使用这种方式)。这会妨碍你语句级别上调试执行,也会妨碍你每行一些列上设置断点。

    76510

    代码编辑器横评:为什么 VS Code 能拔得头筹

    2015 年 4 月 29 日 Build 大会上,微软发布了 Visual Studio Code 第一个预览版本。短短四年间里,VS Code 高速成长。...可以说是已经代码编辑器中拔得头筹。 ? Stack Overflow 2018 年开发者调查中,VS Code 成为了最受欢迎开发工具。 ? 那么,VS Code什么能这么成功?...VS Code 也提供了各种键盘映射插件,让你可以 VS Code 中继续使用不同开发工具快捷键,而不用重新学习 VS Code 快捷键。 ?...此外,VS Code 保持其轻量级代码编辑器前提下,还内置了一些 IDE 中会有的重要功能: Terminal:内置 Terminal 使得开发者可以直接在 VS Code 中快速地运行脚本,而不需要在...四款编辑器中,Sublime 是闭VS Code、Vim 和 Atom 都是开源,而 VS Code 可以说是开源做最好VS Code 不仅仅是把代码开源出来。

    1.2K30

    开源代码编辑器横评:为什么 VS Code 能拔得头筹?

    2015 年 4 月 29 日 Build 大会上,微软发布了 Visual Studio Code 第一个预览版本。短短四年间里,VS Code 高速成长。...可以说是已经代码编辑器中拔得头筹。 ? Stack Overflow 2018 年开发者调查中,VS Code 成为了最受欢迎开发工具。 ? 那么,VS Code什么能这么成功?...VS Code 也提供了各种键盘映射插件,让你可以 VS Code 中继续使用不同开发工具快捷键,而不用重新学习 VS Code 快捷键。 ?...此外,VS Code 保持其轻量级代码编辑器前提下,还内置了一些 IDE 中会有的重要功能: Terminal:内置 Terminal 使得开发者可以直接在 VS Code 中快速地运行脚本,而不需要在...四款编辑器中,Sublime 是闭VS Code、Vim 和 Atom 都是开源,而 VS Code 可以说是开源做最好VS Code 不仅仅是把代码开源出来。

    90120

    Vite 4.4实验性地支持Lightning CSS,Lightning CSS更快CSS处理利器

    以下示例将输入CSS进行压缩,并输出编译后代码和映射。...当你只需要编译CSS,而不需要来自更大构建工具(如代码分割和对其他语言支持)更高级功能,可以使用CLI。...这将跳过无效规则和声明,输出中省略它们,并产生警告而不是错误。 source maps Lightning CSS支持在编译、压缩和打包源代码生成映射,以便更容易进行调试。...如果输入CSS来自其他编译器(如Sass或Less),你还可以使用inputSourceMap API选项将输入映射传递给Lightning CSS。这将把编译后位置映射回原始源代码中位置。...最后,projectRoot选项可用于使映射文件路径相对于根目录。这样可以不同机器上保持构建稳定性。

    41220

    熟悉又陌生arm 编译器详解(armccarmclang)

    在这里插入图片描述 –feedback=filename 编译反馈,主要是用来去除没有用到代码 (数据以及code),需要与链接选项一起使用,通常需要编译两次。...编译器只执行可以描述为调试信息优化。删除未使用内联函数和未使用静态函数。关掉严重降低调试视图优化。如果与 –debug 一起使用,此选项会给出总体上令人满意调试视图且具有良好代码密度。...这可能导致变量特定点报告值与期望值不匹配。 编译器自动内联函数 -O3最大优化。启用调试后,此选项通常会提供较差调试视图。ARM 建议较低优化级别进行调试。...因为优化会影响目标代码到源代码映射,所以使用 -Ospace 和 -Otime 选择优化级别通常会影响调试视图。 如果需要简单调试视图,选项 -O0 是最好选择。...同一行如果有多行指令,必须要有封号(;) 如果一个指令超出一行,需要增加反斜杠(\) 多行格式中,允许在内联汇编语言块中任何位置使用C和C++注释。

    2K40

    如何使用 VS Code开发.NET Core应用程序

    •像在Visual Studio中一样,VS Code使用内置运行选项。...如何设置断点和调试 VS Code断点与Visual Studio中断点相同,我们可以代码左侧来设置断点。...•VS Code提供了许多扩展,这些扩展将带给我们原生感觉,就像我们使用Visual Studio一样。我们唯一需要就是开始开发之前确定最佳扩展并进行配置。...局限性 •VS Code仅支持ASP.NET Core•Visual Studio是一个现成工具,用于开发和部署ASP.NET Core项目,使用VS Code,必须花费大量时间来安装和配置扩展。...- 运行测试用例•dotnet publish - 主机环境中发布•dotnet new sln-为所选项目创建解决方案文件 总结 本篇文章中,我们演示了如何在VS Code 中运行和调试.NET

    2.4K20

    用了VS Code、IDEA等十几款编辑器后,总结出优秀编辑器特质

    VS Code主要用于 Rust、TOML 和 Markdown 中。 emacs:很喜欢 Haskell 和 Rust 代码库(以及 YAML/Markdown/TOML)上使用它。...大多数时候,基于 Web 技术编辑器需要花费很多时间,甚至 VS Code 都是如此——日常编辑器是 neovim,它能 23ms 内加载 差不多 50 个已安装软件包(你可以使用:profile...tveskag/nvim-blame-line 代码行右侧内联一个 git blame。很像 VS Code默认 git 插件。...liuchengxu/vim-clap 它有一个现代化、快速用户界面,在其中统一所有可能搜索 / 模糊查找器。不幸是这个插件这里还不够稳定,因此还在继续使用 fzf。...大型社区和今天大多数人都在用它,所以我想如果你遇到什么麻烦,随便问一下应该就能得到答案。 VS Code 缺点 毕竟,它还是用 Web 技术编写

    1.8K10

    知乎分享:vscode从入门到进阶

    地址:知乎 内容大纲 VS Code 优势 VSVS Code 到底有什么关系? 微软从 VS 组里面抽了一拨人做 VS Code,是真的吗? VS 支持 Java ?...菜单栏-配置项 通过File-Preference-Settings可以访问配置项,可以修改所有的配置,包括扩展与否 常用配置项如下: Editor: Format On Save,可以保存格式化文件...“search.exclude”:因为VS Code有内置搜索功能,比如nodejs项目中,node module就不希望搜索到,可以加入到这里面进行设置。...基于浏览器代码编辑器:IntelliSense,代码验证,语法高亮等特性 Language Server Protocol IDE与语言服务器之间协议,可以允许开发人员最喜爱工具中使用各种语言来写程序...,复杂项目要进行调试时候需要对launch.json进行配置,通过修改当前目录下.vscode/launch.json中对应内容,可以实现调试

    1.8K10

    .NET周刊【2月第1期 2024-02-04】

    Uno Platform 5.1:面向 Rider 和 VS Code 用户实时向导、新控件、性能改进等。...内联监控 返回值 智能单步调试 断点选项 拖动执行指针 调试外部反编译代码 异常断点 运行和调试静态方法 编辑并继续 内存视图 线程特定断点 调试器显示属性支持 奖励:预测调试器 代码审查和时间旅行...Aspire 和独特事件框架来创建使用 Cosmos DB 作为数据存储应用程序说明。...- Qiita https://qiita.com/sator_imaging/items/49585b191af978b00ad2 如果您编写代码不移动跨度导致重叠,会发生什么情况,以及 Unity...,欢迎大家为《.NET周刊-国内文章》板块进行贡献,需要推广自己文章或者框架、开源项目可以下方项目地址提交Issue或者微信公众号私信。

    15310

    10 个你可能还不知道 VS Code 使用技巧

    经常帮一些同学 One-on-One 地解决问题,在看部分同学使用 VS Code 时候,有些蹩脚,实际上一些有用技巧能够提高我们日常工作效率。...ref=codebldr#_dynamic-view-icons-and-titles) NO.3 三、快速调试代码 VS Code调试 JS/TS 代码非常简单,只需要使用 Debug: Open...这在调试前端或 Node 项目非常有用,这类型项目通常会启动一个本地服务,这时候只需要将本地服务地址填写到 Debug: Open Link 输入框中即可。 ?...一些开发者会使用 VS Code 小地图,但其实还有更便捷方法:可以使用 ⇧⌘O 快捷键唤起符号导航面板,在当前编辑文件中通过符号快速定位代码。...例如: 解决冲突:VS Code 会识别合并冲突,冲突差异会被突出显示,并且提供了内联操作来解决冲突。 ? 暂存或撤销选择代码行:在编辑器内可以针对选择行来撤销修改、暂存修改、撤销暂存。 ?

    93610

    微软正式发布 Visual Studio 2022

    现在可以使用 LLDB 从 Visual Studio 调试远程系统上运行进程。 将 Visual Studio 附带 CMake 版本升级到 3.21 版。...使用 C++ 工作负载游戏开发现在安装支持 Visual Studio 2022 最新虚幻引擎 在为来自导入模块和 Header 单元类型提供导航和语法突出显示,对 C++ IntelliSense...…… 个性化 为垂直和水平标签添加颜色标签 增加了主题包,并与 VS Code 主题作者合作,推出了自定义主题集合 建立了主题转换器,将 VS Code 主题转换到 Visual Studio 2022...开发人员提供,对于许多 .NET 6 应用程序类型,不需要调试器。...使用 Visual Studio 调试,热重载现在可供 C++ 开发人员使用

    2.6K30
    领券