Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >VS Code 调试完全攻略(4):launch.json 和调试控制台

VS Code 调试完全攻略(4):launch.json 和调试控制台

作者头像
疯狂的技术宅
发布于 2020-06-04 07:25:42
发布于 2020-06-04 07:25:42
21.2K0
举报
文章被收录于专栏:京程一灯京程一灯

翻译:疯狂的技术宅

作者:Charles Szilagyi

来源:charlesagile

正文共:1595 字

预计阅读时间:5 分钟

一些更强大的调试功能仅在专用的配置文件中可用。这次我们要创建一个 launch.json 和内置的 VSCode 调试控制台。本文将会解决我们在调试复杂的程序之前的最后一个难题。

VS Code 调试完全攻略系列目录

  1. 基础知识(点击直达)
  2. 步进逐行调试(点击直达)
  3. 编辑变量并重新执行函数(点击直达)
  4. launch.json 和调试控制台(?本文)
  5. 基于浏览器的 React 应用
  6. 调试用 TypeScript 开发并打包的 React ?

调试可能会是一件复杂的事,我们需要保存自己定的制配置,比如:端口、路径、参数等。 VSCode 使用 launch.json 进行细粒度的控制,有了它就可以启动我们的程序或将其附加到复杂的调试场景中。没有 launch.json 只能搞一些小把戏,我们需要继续向前迈进。下面让我们来创建一个!

在VSCode中打开我们的示例代码文件夹:

打开文件夹

launch.json

VSCode 有着方便的用户界面,可以生成配置框架。切换到调试侧边栏,单击 “create a launch.json file” 并选择 Node.js:

VSCode 会在工作区的 .vscode 文件夹下生成一个新的 launch.json 文件:

launch.json

在后面,当我们面对不同的实际情况下根据需要调整配置时,将会更深入地研究文件格式和配置中的值。

可以观察到配置文件启用了调试侧栏中的启动菜单,现在可以用该菜单来快速启动我们的玩具服务器 ? :

开始调试

如果你现在想了解有关此主题的更多信息,可以参考 VS Code 官网的创建配置和可用的配置值。

顺便说一句,我建议将 launch.json 保存到你的代码存储库中。在团队中共享可使所有成员得到方便的调试环境。

调试控制台

请注意调试控制台是怎样被自动打开的:

调试控制台已打开

通过调试控制台,可以在调试器中运行的程序上下文中去评估表达式。这是一个非常了不起的便捷工具!你可以检查作用域内的任何变量,类似于 debug sidebar。你也可以在范围内运行任何函数,或者从字面上运行任何你想要的代码,甚至可以在运行的应用程序中去 require 模块?

来看一个例子。先在第 24 行添加断点并触发请求:

使用调试控制台

如图所示,你可以输入局部变量(或函数)名,甚至有自动完成功能。

但是你并不会被局限在程序本身的代码中,还可以导入任何可用的模块:

require console

请继续探索调试控制台,祝你玩得开心!?

原文链接

https://charlesagile.com/vscode-launch-json-and-the-debug-console

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-05-29,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端先锋 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
VS Code 调试完全攻略(5):基于浏览器的 React 应用
这次我们来研究怎样把调试器连接到用 Create React App 生成的 React 程序。你将看到如何从 VS Code 启动浏览器并检查远程异步 API 调用。它超级强大,同时又很容易,所以在调试 CRA 和 React 程序时没有理由不这样做。
疯狂的技术宅
2020/06/04
2.7K0
VS Code 调试完全攻略(6):调试由 TypeScript 开发的 React
‍‍说到前端,我现在选择的武器是 React、TypeScript 和 Parcel trinity。这是一个简单、可靠而且高效的设置,只需最少的配置。本文将向你展示如何在 VS Code 中创建匹配的调试器。
疯狂的技术宅
2020/06/04
5.1K0
VS Code 调试完全攻略(3):编辑变量并重新执行函数
可以通过在调试器中重新执行代码块,来查看它们在不同情况下的行为。在调用栈中修改变量并重新执行函数可以让你节省大量的时间!
疯狂的技术宅
2020/06/01
4K0
使用vscode调试你的node应用
从一开始使用 webstorm 内置的 debug 功能, 到使用node-inspector库进行调试顺便脱离 webstorm 的笨重, 再后来 nodejs 内置了debugger 模块也可以帮助调试我们的应用.
funkyLover
2019/05/24
2.7K0
VS code 插件配置手册
C/C++ Tools插件---C/C++支持安装库文件的配置GDB本地调试配置GDB远程调试配置Remote VSCode插件---远程编辑文件安装环境配置在本地端的配置在远程端的配置工作流Ftp Sync插件--—远程代码的同步安装环境配置工作流
OpenCV学堂
2019/06/19
3.6K0
VS code 插件配置手册
手工编辑 tasks.json 和 launch.json,让你的 VSCode 具备调试 .NET Core 程序的能力
如果 C# for Visual Studio Code 没有办法自动为你生成正确的 tasks.json 和 launch.json 文件,那么可以考虑阅读本文手工创建他们。
walterlv
2023/10/22
1.7K0
手工编辑 tasks.json 和 launch.json,让你的 VSCode 具备调试 .NET Core 程序的能力
VsCode 各场景高级调试技巧,有用!
VsCode自从诞生以来,以其各自优异的特性迅速走红。尤其是对于前端开发小伙伴来说,几乎成为必不可少的开发工具。所以,熟练掌握VsCode的各自使用技巧与调试技巧会让你的日常开发工作效率倍增。本文将会以大量图文的方式,从下面几个方面详细介绍VsCode的各种技巧:
@超人
2022/04/14
1.4K0
VsCode 各场景高级调试技巧,有用!
整理:Visual Studio Code (vscode) 配置C、C++环境/编写运行C、C++(主要Windows、简要Linux)
2020年2月22日更新,又按照自己的帖子尝试了以下,感觉大的思路是没问题的啊,小改动用紫色的标记标注出来了,另外如评论区所说删去了部分旧版本的内容和图片,不知道为啥评论区的留言我都没收到邮件。。。
全栈程序员站长
2022/07/23
5.3K0
整理:Visual Studio Code (vscode) 配置C、C++环境/编写运行C、C++(主要Windows、简要Linux)
基于Visual Studio Code
下载路径:https://code.visualstudio.com/Download,注意系统类型和版本;
py3study
2020/01/10
1.9K0
VSCode下配置Blazor环境 & 断点调试Blazor项目
Blazor是一种用于构建交互式Web UI的.NET框架,它可以让你使用C#、Razor和HTML进行Web开发,而不需要JavaScript。在这篇文章中,我们将介绍如何在VSCode中配置Blazor环境,并推荐一些有用的插件。
码事漫谈
2024/12/31
3860
VSCode下配置Blazor环境 & 断点调试Blazor项目
VS code搭建 C 和 C++ 环境的完整图文教程!
VS code是一个微软旗下的一个广受欢迎的开源文本编辑器,相较于其他编辑器,VS code有着非常多的优点而让开发者们对其爱不释手。
李肖遥
2022/12/22
3.5K0
VS code搭建 C 和 C++ 环境的完整图文教程!
Visual Studio Code中C++编译与调试配置
在 Visual Studio Code 中,launch.json 和 tasks.json 作为两个重要的配置文件,能够帮助开发者实现调试和任务运行的自动化配置,所以理解这两个配置文件的作用和其内容含义尤为重要。这两个配置文件一般位于项目根目录的 .vscode 文件夹下。
麦克马
2025/05/08
3670
Visual Studio Code中C++编译与调试配置
vscode一键配置C/C++多个C及CPP文件编译与tasks.json和launch.json原理
搜了很多的教程,发现要么教程太老,给的配置信息里面有些参数都不能使用了,要么就是直接扔下自己的配置信息就没了,不知道咋来的,也不能拿过来直接用,让我这种小白无从下手,于是就摸索整理一下,帮助一下像我这样小白刚入手的小伙伴们。
全栈程序员站长
2022/11/01
8.1K1
vscode一键配置C/C++多个C及CPP文件编译与tasks.json和launch.json原理
使用Visual Studio Code开发.NET Core看这篇就够了
在本文中,我将带着大家一步一步的通过图文的形式来演示如何在Visual Studio Code中进行.NET Core程序的开发,测试以及调试。尽管Visual Studio Code的部分功能还达不到Visual Studio的水平,但它实际上已经足够强大来满足我们的日常开发。而且其轻量化,插件化以及跨平台的特性则是VS所不具备的。而且Visual Studio Code还可以通过社区来创建一系列的扩展来增强其功能,且社区已经足够活跃。我们可以期待更多很酷的扩展和功能来增强VS Code,这将使在这个轻量级,跨平台编辑器中的开发.NET Core应用程序更加流畅和有趣。赶紧跟着博主一起开始今天的文章吧!
依乐祝
2018/11/12
6.4K0
鸿蒙Flutter实战:08-如何调试代码
参考文章鸿蒙Flutter实战:01-搭建开发环境搭建好开发环境。IDE 安装好 DevEco 和 VsCode/Android Studio。
少湖说
2024/10/22
3050
鸿蒙Flutter实战:08-如何调试代码
Vs code Look .Net
微软的virtual studio编辑器那是宇宙第一大编辑器,可惜就是太笨重,遇到性能差一些的电脑设备,简直无法快速的编辑项目。
x-Alex
2020/05/03
6870
用于调试和分析的 5 大 Node.js 工具
调试和分析是查找和修复错误、测量和优化性能,同时确保Node.js应用程序的质量和效率的重要过程。
泯泷、
2024/03/16
7070
用于调试和分析的 5 大 Node.js 工具
关于 Node.js 调试,你需要了解的一切
Node.js 是一种颇具人气的 JavaScript 运行时,与谷歌 Chrome 浏览器一样采用同款 V8 引擎。
深度学习与Python
2023/09/08
7040
关于 Node.js 调试,你需要了解的一切
解决VSCode中Debug和运行路径不一致的
在Visual Studio Code(简称VSCode)中进行开发时,经常需要使用到调试(Debug)功能。然而,有时候会发现,当尝试调试程序时,程序的运行路径与预期不符。这通常会导致程序无法正确读取文件或访问资源,从而影响调试过程。为了解决这个问题,可以在launch.json文件中配置CWD参数,以确保Debug和运行路径一致。
木头左
2024/06/10
4890
2022年了,该学会用VSCode debug了
VSCode作为目前使用人数最多的IDE,在前端开发者中也是十分受欢迎的。它免费、开源、还具备许多强大的功能,例如智能提示、插件商店、集成Git等等,但除此之外还有一个被许多开发者忽略的功能——运行和调试(Run and Debug)。
科技新语
2022/05/07
9800
相关推荐
VS Code 调试完全攻略(5):基于浏览器的 React 应用
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档