VSCode下载、安装及配置、调试的一些过程理解

第一步先下载了vscode,官方地址为:https://code.visualstudio.com/Download

第二步安装vscode,安装环境是win10,安装基本上就是一步步默认即可。

第三步汉化vscode,这一步就是去扩展插件里面下载一个中文插件即可,基本操作为,在左侧的extension中输入chinese simp就出来了,然后点右侧的install就行了,安装完了重启就显示中文界面了。

第四步,因为听说vscode支持js运行调试,就想着怎么调试,先写了一个js文件,然后看有个运行和调试按钮,去选择nodejs运行,发现报错,没用node运行时runtime环境,看网上说的下去下载nodejs,下载地址:下载 | Node.jsNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.icon-default.png?t=N7T8https://nodejs.org/zh-cn/download

下载windows环境下的msi,直接安装就行,安装完了默认变量都添加好了,不用太多操作。

第五步,点击“运行和调试”最右侧的按钮,添加一个配置,vscode是默认支持nodejs的,因此安装完了node后,点击配置按钮会自动生成一个launch.json文件。

如果我们默认通过vscode 来调试代码,会生成一个launch.json 配置文件, 详细细节可以查看官方文档Debugging in Visual Studio CodeOne of the great things in Visual Studio Code is debugging support. Set breakpoints, step-in, inspect variables and more.icon-default.png?t=N7T8https://code.visualstudio.com/docs/editor/debugging关于配置,我们这里只说说我们一般会常用的地方。

launch.json 配置项
必选字段
type:调试器类型。这里是 node(内置的调试器),如果装了 Go 和 PHP 的扩展后对应的 type 分别为 go 和 php
request:请求的类型,目前只支持 launch 和 attach。launch 就是以 debug 模式启动调试,attach 就是附加到已经启动的进程开启 debug 模式并调试,跟上一篇提到的用 node -e "process._debugProcess(PID)" 作用一样
name:下拉菜单显示的名字

可选字段
program:可执行文件或者调试器要运行的文件 (launch)
args:要传递给调试程序的参数 (launch)
env:环境变量 (launch)
cwd:当前执行目录 (launch)
address:ip 地址 (launch & attach)
port:端口号 (launch & attach)
skipFiles:想要忽略的文件,数组类型 (launch & attach)
processId:进程 PID (attach)
同时目录变量有
${workspaceRoot}:当前打开工程的路径
${file}:当前打开文件的路径
${fileBasename}:当前打开文件的名字,包含后缀名
${fileDirname}:当前打开文件所在的文件夹的路径
${fileExtname}:当前打开文件的后缀名
${cwd}:当前执行目录
通常一个默认的launch.json 默认配置如下
{
    "version": "0.2.1",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "启动程序",
            "program": "${workspaceFolder}/index.js"
        }
    ]
}

这个配置会直接运行index.js 我们项目目录下的index.js 文件。我们可以根据上面的配置信息 自动的定义我们启动运行的文件。

关于调试js代码,如果用vscode自带的调试,就是左上角的“运行和调试”按钮,快捷键就是F5,这个是vscode软件本身的,不是任何插件的,如果安装了node.js exec,可以通过f8运行js文件,这个是node.js exec的快捷键运行,不是vscode的,vscode这个通用的运行调试按钮,对所有文件能用。

直接运行F5,按照配置launch.json文件中的参数,然后通过shell去执行一个node xxx.js文件,上图中的调试控制台的黄色字母部分,这个可以vscode的终端窗口去执行试试。

我看网上有人安装了nodejs后直接用终端这么调试,为啥不去F5呢。

安装了node.js exec后,可以在js文件中运行F8,此时输出窗口如下:

此时右侧的运行环境为nodejs,如果换成quokka,我的理解是该插件包了一层壳,运行代码不再是node xxx.js,而是quokka xxx.js,壳子外面自己加了显示信息:

后来看网上说也能调试java,就装了extension pack for java插件,装了之后,在java文件里面就可以直接运行 run java了。

当我想在浏览器显示我的html的时候,装了live server的静态服务插件,可以用来启动浏览器并显示html的内容。

如果想浏览器实时反馈文件修改,选择【Open with Live Server】

浏览器界面:查看html标签和布局

浏览器【开发者工具】-【Console】:查看 console.log() 输出

浏览器弹窗:查看 window.alert() 输出

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/99170.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

企业内部wiki的应用场景与岗位有哪些?有价值吗?

企业内部Wiki是一种基于Web的协作知识管理平台,它允许员工在一个统一的平台上创建、编辑和共享知识。它可以用于许多不同的场景和岗位,为企业提供了许多价值。下面将介绍企业内部Wiki的应用场景和岗位,并探讨其价值。 应用场景: …

解决uniapp下拉框 内容被覆盖的问题

1. 下拉框 内容被覆盖的问题 场景: 现在是下拉框被表格覆盖了 解决办法: 在表格上添加css 样式来解决这个问题 .add-table{display: static;overflow: visible; } display: static: 将元素会按照默认的布局方式进行显示,不会分为块状或行内元素。 overflow: vi…

设计模式-装饰模式

文章目录 一、简介二、基本概念三、装饰模式的结构和实现类图解析:装饰器的实现方式继承实现:组合实现:继承和组合对比 四、装饰模式的应用场景五、与其他模式的关系六、总结 一、简介 装饰模式是一种结构型设计模式,它允许动态地…

python节假日库holidays——查询国家节假日

节假日—计算某天是否为节假日 参考学习: ​ Python holidays模块 ​ Python实现节假日查询 ​ Python怎么获取节假日信息 pip install holidaysimport holidayscn_holidays holidays.CountryHoliday(CN) print(cn_holidays)from datetime import dateif date(…

【LeetCode】剑指 Offer <二刷>(3)

目录 题目:剑指 Offer 06. 从尾到头打印链表 - 力扣(LeetCode) 题目的接口: 解题思路: 代码: 过啦!!! 题目:剑指 Offer 07. 重建二叉树 - 力扣&#xf…

2023.8.28日论文阅读

文章目录 NestFuse: An Infrared and Visible Image Fusion Architecture based on Nest Connection and Spatial/Channel Attention Models(2020的论文)本文方法 LRRNet: A Novel Representation Learning Guided Fusion Network for Infrared and Visible Images本文方法学习…

.netcore grpc截止时间和取消详解

一、截止时间概述 截止时间功能让 gRPC 客户端可以指定等待调用完成的时间。 超过截止时间时,将取消调用。 设定一个截止时间非常重要,因为它将提供调用可运行的最长时间。它能阻止异常运行的服务持续运行并耗尽服务器资源。截止时间对于构建可靠应用非…

【分享】PDF如何拆分成2个或多个文件呢?

当我们需要把一个多页的PDF文件拆分成2个或多个独立的PDF文件,可以怎么操作呢?这种情况需要使用相关工具,下面小编就来分享两个常用的工具。 1. PDF编辑器 PDF编辑器不仅可以用来编辑PDF文件,还具备多种功能,拆分PDF文…

Markdown Preview Plus Chrome插件使用

Markdown Preview Plus Chrome插件使用 1.插件说明2.插件下载3.插件配置4.文档样式4.1 网页显示4.2 导出PDF 系统:Win10 Chrome:113.0.5672.127 Markdown Preview Plus:0.7.3 1.插件说明 一般 markdown 工具自带的预览功能比较简单&#xff…

如何使用CRM系统进行精细化管理客户?

客户是企业的生命线,对客户进行精细化管理,是提高企业收益的关键。那么,如何进行客户管理?CRM系统可以实现精细化管理客户,提升客户的价值。下面我们就来详细说一说。 1、获取客户信息 Zoho CRM系统可以通过web表单、…

TS 入门

TS 入门 interface 约束作用数组的声明方式函数的定义联合类型、交叉类型、断言类型类的方面 interface 约束作用 数组的声明方式 函数的定义 联合类型、交叉类型、断言类型 类的方面 这是代码的地址: 代码的地址

Ansible学习笔记7

user模块: user模块用于管理用户账户和用户属性。 如果是windows要换一个win_user模块。 创建用户:present: [rootlocalhost ~]# ansible group1 -m user -a "nameaaa statepresent" 192.168.17.106 | CHANGED > {"ansi…

在VScode中执行npm、yarn命令报错解

在VScode中执行npm、yarn命令报错解 我使用的是vnm安装好npm,在WindowsR 界面是可以运行查看出版本的;但是在VScode中报错。 查了很多资料,我这种情况的原因是在VScode中默认使用的终端是Powershell,然后我切换到系统的cmd则可以…

11.添加侧边栏,并导入数据

修改CommonAside的代码&#xff1a; <template><div><el-menu default-active"1-4-1" class"el-menu-vertical-demo" open"handleOpen" close"handleClose":collapse"isCollapse"><!--<el-menu-it…

时序预测 | MATLAB实现基于PSO-LSTM、LSTM时间序列预测对比

时序预测 | MATLAB实现基于PSO-LSTM、LSTM时间序列预测对比 目录 时序预测 | MATLAB实现基于PSO-LSTM、LSTM时间序列预测对比效果一览基本描述程序设计参考资料 效果一览 基本描述 MATLAB实现基于PSO-LSTM、LSTM时间序列预测。 1.Matlab实现PSO-LSTM和LSTM神经网络时间序列预测…

UDS 29 认证服务

UDS协议定义了一套标准的诊断服务&#xff0c;包括会话控制、诊断请求、诊断响应和ECU编程等功能。通过UDS协议&#xff0c;诊断工具可以向ECU发送特定的请求&#xff0c;获取ECU的状态信息和故障码&#xff0c;诊断和解决故障问题。UDS是ISO 14229标准定义的一种通信协议&…

QT可执行程序打包成安装程序

目录 1.将QT程序先放到一个文件中 2.下载QtInstallerFramework-win-x86.exe 3.将setup.exe单独拷贝出来&#xff0c;进行安装测试 4.测试安装后的程序是否可执行 1.将QT程序先放到一个文件中 &#xff08;1&#xff09;QT切换到release模式&#xff0c;编译后在构建目录生…

JWT 技术的使用

应用场景&#xff1a;访问某些页面&#xff0c;需要用户进行登录&#xff0c;那我们如何知道用户有没有登录呢&#xff0c;这时我们就可以使用jwt技术。用户输入的账号和密码正确的情况下&#xff0c;后端根据用户的唯一id生成一个独一无二的token&#xff0c;并返回给前端&…

初阶数据结构(五) 栈的介绍与实现

&#x1f493;博主csdn个人主页&#xff1a;小小unicorn&#x1f493; ⏩专栏分类&#xff1a;C &#x1f69a;代码仓库&#xff1a;小小unicorn的学习足迹&#x1f69a; &#x1f339;&#x1f339;&#x1f339;关注我带你学习编程知识 栈 栈的介绍栈的概念栈的结构 栈的实现…

正中优配:红筹股是啥意思?

随着我国经济的高速开展&#xff0c;越来越多的人开始参加到股票出资中。其中&#xff0c;红筹股作为一种特别类型的股票&#xff0c;备受一些出资者的关注&#xff0c;但对于一般出资者来说&#xff0c;红筹股详细含义还不是特别清楚。本文将从多个角度探讨红筹股的含义、特征…
最新文章