VsCode工具debug代码调试

最新推荐文章于 2024-08-02 10:16:01 发布
最新推荐文章于 2024-08-02 10:16:01 发布
阅读量3.2k 收藏 4
点赞数 2
分类专栏： # 开发工具【VSCode】
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_38039437/article/details/113816678
版权

VsCode工具debug代码调试

1.概述

这篇文章介绍VsCode工具通过插件调试代码。
当我们写完一个功能运行的时候，界面中没有显示出我们想要的内容。这个时候通过盲目的翻看代码找出问题的位置比较耗时间，效率低下。我们通过debug插件可以快速的定位到问题的原因，提升定位问题的效率。

2.安装debug插件

2.1.搜索debugger for Chrome插件安装

在这里插入图片描述

2.2.创建两个文件测试debug

在项目的任意位置创建debug文件夹，在文件夹下新建index.html和index.js文件。

  • 我这在src目录下新建debug文件夹，和index.html、index.js

在这里插入图片描述

  • index.html文件内容
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>debug调试</title>
    <script type="text/javascript" src="./index.js"></script>
  </head>
  <body>
    <h1>debug调试</h1>
  </body>
</html>
  • index.js文件内容
const array = ['A', 'B', 'C', 'D', 'E']
for (let index = 0; index < array.length; index++) {
  const element = array[index]
  console.log(element)
}

2.3.配置debug插件launch.json

安装的debug for Chrome插件可以通过配置文件修改他的内容改变他的用法。

  • 点击debug图标选择chrome
    在这里插入图片描述
    在这里插入图片描述
  • 配置launch.json文件内容如下
{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [

    {
      "type": "chrome",

      "request": "launch",

      "name": "Launch index.html",

      "sourceMaps": true,
    
      // 新建index.html文件的位置
      "file": "${workspaceRoot}/src/debug/index.html"
    }
  ]
}

2.4.运行debug查看调试日志

在debug界面切换到Launch index.json，点击前面的运行按钮

在这里插入图片描述

  • 查看控制台打印出调试日志

在这里插入图片描述

3.debug调试应用到项目

前面我们通过一个debug文件测试了调试功能，下面我们将debug应用到项目的调试中。

3.1.配置launch.json文件内容如下

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8868",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

3.2.启动Vue项目

这里使用的是Vue3.x版本脚手架项目，启动命令和Vue2不同。如果是Vue2的使用Vue2启动项目命令即可

# 进入项目根路径
cd vue-manage-system

# 启动项目
npm run serve

3.3.调试vue项目

在Debug模式下点击启动vuejs:chrome按钮，使用debug模式启动项目。启动后在DEBUG CONSOLE控制台可以看到输出日志。

在这里插入图片描述

Bruce小鬼
关注
专栏目录
skynet debug 部署 vscode环境下的debug 断点调试
03-11
接下来，我们需要安装`Debugger for Lua`插件，这个插件是VSCode中用于Lua语言调试的关键工具，可以在VSCode的市场里找到并安装。 在“skynetDebug”文件夹中，通常包含了Skynet项目的调试配置和相关的脚本文件。此...
如何用VsCode进行Debug
热门推荐
weixin_42962086的博客
03-04 6万+
如何用VsCode进行Debug 本文以Mac系统，C++程序为例，进行Debug操作 安装插件 不同的语言需要安装的debug插件不一样，如下 Debug页面 VsCode的Debug页面如下 配置Debug环境 点击左侧的Debug图标，默认情况下，展示的是配置提示 点击图中的【运行和调试】，选择【GDB/LLDB】环境，之后在下拉列表选择【默认配置】，系统自动创建launch.json文件，用于记录debug的配置信息，其中最主要的是配置调试的程序，program字段，选择要debug运行的
vscode-python的debug 教学(最全)
qq_60498436的博客
02-14 1万+
Visual Studio Code 的主要功能之一是其强大的调试支持。VS Code 的内置调试器有助于加速编辑、编译和调试循环。
VSCode 编译运行和调试 C++
最新发布
qq_42995238的博客
08-02 4860
VSCode编译运行和调试C++
【VSCode】调试器debugger详细使用手册
学无止境
04-01 4万+
Visual Studio Code 的主要功能之一是其出色的调试支持。VS Code 的内置调试器有助于加速您的编辑、编译和调试循环。 调试器扩展 VS Code 具有对Node.js运行时的内置调试支持，并且可以调试 JavaScript、TypeScript 或任何其他转换为 JavaScript 的语言。 开始调试 以下文档基于内置的Node.js调试器，但大部分概念和功能也适用于其他调试器。 在阅读有关调试的信息之前先创建一个示例 Node.js 应用程序会很有帮助。您可以按照Node.js 演
VSCode中的debug调试
m0_60627063的博客
02-04 3019
1. 通过浏览器实现代码调试;2. 通过vscode进行代码调试
如何在vscode中debug python代码，包括如何优雅地传入多个参数
卖糖葫芦大叔的博客
07-14 2万+
Visiul Studio Code, 简称vscode，是一款轻量级代码编辑器，其丰富的扩展程序使得其可以方便地作为任何语言的编辑器。本文将讲述如何在vscode中对python脚本文件进行debug。如难以理解或出现错误欢迎指正。
phpStudy vscode 搭建debug调试的教程详解
10-15
在调试过程中，你可以使用vscode提供的各种调试工具，如设置断点、查看变量值、单步执行等。这将极大地提升你的开发效率，帮助你快速定位和解决问题。 总结一下，本教程详细介绍了如何使用phpStudy和vscode搭建PHP...
VSCode项目工程调试debug 教程 笔记
09-02
Visual Studio Code（VSCode）是一款强大的源代码编辑器，它支持多种编程语言，并且拥有强大的调试功能。在本文中，我们将深入探讨如何在VSCode中进行项目工程的调试，包括配置调试环境、设置断点以及理解和使用调用...
vscode-perl-debug:寻找维护者。 用于Visual Studio代码的Perl调试器扩展
05-28
"vscode-perl-debug" 是一个专门为VSCode设计的Perl语言调试扩展，旨在帮助Perl开发人员更高效地调试他们的代码。然而，根据标题所示，这个项目似乎已经进入了“已淘汰”状态，不再推荐使用，可能是因为缺乏维护或有...
vscode-debug.tar.gz
06-26
【标题】"vscode-debug.tar.gz" 是一个用于调试的工具包，它包含了Visual Studio Code (VSCode) 的扩展，支持GDB/GDBserver进行源代码级别的调试。这个压缩文件是为了帮助开发者在VSCode集成开发环境中高效地进行C/...
使用Vscode进行Vue的debug调试功能，研究了一天终于可以了，同时解决Unbound breakpoint灰点问题
04-21 3万+
实现的结果：在vscode中可以直接debug上一步下一步等，同时在浏览器里面也可以执行这样的操作，这样的debug功能，谁不想要呢？谁还没有呢？是不是你，哈哈哈哈。
Vscode 如何配置debug
liangkang233的博客
06-10 1万+
go语言与C/C++在vscode如何调试
如何在VSCode中带有参数的Debug（name、program、$file、args、pickArgs、指定虚拟环境）
Le0v1n 的博客
02-23 7654
关键字：name、program、$file、args、pickArgs、指定虚拟环境
vscode debug配置及debugpy使用
@bangbang的博客
08-27 3344
我们训练yolov5代码时，一般会配置一些参数，比如模型权重文件--weights, 模型的配置文件--cfg, 以及训练的数据--data。
VsCode 各场景高级调试技巧！
静觅
11-16 5464
这是「进击的Coder」的第 753篇技术分享作者：愣锤来源：https://juejin.cn/post/7071146744339234846“ 阅读本文大概需要 23 分钟。 ”VsCode 自从诞生以来，以其各自优异的特性迅速走红。尤其是对于前端开发小伙伴来说，几乎成为必不可少的开发工具。所以，熟练掌握 VsCode 的各自使用技巧与调试技巧会让你的日常开发工作效率倍增。本文将会以大量图...
vs qt 调试 输出 打印 到 输出窗口 或 控制台窗口
qiushangren的专栏
06-08 2万+
printf只能输出 到控制台窗口。 一、qt 在.pro 文件中添加 Config += console，qt 中将显示控制台窗口，并会将qDebug（）中的信息输入到控制台中 等价于 在 项目配置中 ，qmake 额外参数项中加入 "CONFIG+=console"，或者如下 qt .pro 工程文件中输出日志 使用message 函数message("ArcGIS Runtime...
【vscode】使用vscode debug c++
qq_45110581的博客
06-23 2909
使用 vscode debug c++程序
配置VS Code 使其支持vue项目断点调试
gqk01的博客
07-28 9250
起因每个应用，不论大小，都需要理解程序是如何运行失败的。当我们写的程序没有按照自己写的逻辑走的时候，我们就会逐步一一排查问题。在平常开发过程中我们可能会借助来排查,但是现在我们可以借助VS Code断点来调试项目。在可以从 Chrome 浏览器调试你的 Vue 组件之前，你需要更新 webpack 配置以构建 source map。做了这件事之后，我们的浏览器就有机会将一个被压缩的文件中的代码对应回其源文件相应的位置。
vscode怎么debug调试c语言
03-16
要在VSCode中进行C语言调试，您需要按照以下步骤进行操作： 1. 安装C/C++扩展：在VSCode中搜索并安装C/C++扩展，这将为您提供C语言调试所需的工具和功能。 2. 创建C语言项目：创建一个C语言项目，并将源代码文件添加到项目中。 3. 配置调试器：在VSCode中打开调试器面板，选择“添加配置”并选择“C++（GDB/LLDB）”作为调试器。然后，将以下代码添加到“launch.json”文件中： ``` { "version": ".2.", "configurations": [ { "name": "C++ Launch", "type": "cppdbg", "request": "launch", "program": "${workspaceFolder}/<your_program_name>", "args": [], "stopAtEntry": false, "cwd": "${workspaceFolder}", "environment": [], "externalConsole": true, "MIMode": "gdb", "miDebuggerPath": "/usr/bin/gdb" } ] } ``` 4. 开始调试：在VSCode中打开您的C语言源代码文件，并在需要调试的行上设置断点。然后，按下F5键开始调试。 5. 调试过程：在调试过程中，您可以使用调试器面板中的各种工具来查看变量、堆栈、调用栈等信息。您还可以使用调试器面板中的控制按钮来执行单步调试、继续执行、停止调试等操作。 希望这些步骤能够帮助您在VSCode中成功进行C语言调试。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值