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.rhkb.cn/news/126203.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++动态内存管理+模板

💓博主个人主页:不是笨小孩👀 ⏩专栏分类:数据结构与算法👀 C👀 刷题专栏👀 C语言👀 🚚代码仓库:笨小孩的代码库👀 ⏩社区:不是笨小孩👀 🌹欢迎大…

Web3.0:重新定义互联网的未来

💗wei_shuo的个人主页 💫wei_shuo的学习社区 🌐Hello World ! Web3.0:重新定义互联网的未来 Web3.0是指下一代互联网,也称为“分布式互联网”。相比于Web1.0和Web2.0,Web3.0具有更强的去中心化、…

常见的图像格式介绍:RAW、RGB、YUV

常见的图像格式有RAW、RGB、YUV这三大类 1. RAW raw图像指的是sensor输出的原始数据,常见的有8位、10位、12位之分,分别表示一个像素点所占的字节数为8bit、10bit、12bit。 raw数据常见的有四种Bayer模式:GRBG、RGGB、BGGR(下图…

【力扣每日一题】2023.9.9 课程表

目录 题目: 示例: 分析: 代码: 题目: 示例: 分析: 题目给我们一些课程的先修关系,也就是有些课我们需要先去学其他的课程才能学习,问我们是否可以学习完所有的课程。…

浅谈能源汽车下乡充电桩建设优化建议及解决方案

1.趋势分析 新能源汽车下乡已经成为提振汽车市场表现、推动汽车行业发展的重要措施。国家发改委日前也提出,汽车消费是支撑消费的“大头”,将加快推进充电桩和城市停车设施建设,大力推动新能源汽车下乡,鼓励汽车企业开发更适宜县…

算法与设计分析--实验一

蛮力算法的设计与分析&#xff08;暴力&#xff09; 这次是某不知名学院开学课程的第一次实验&#xff0c;一共5道题&#xff0c;来自力扣 第一题.216组合总和*力扣题目链接 第一道题是经典的树型回溯 class Solution { public:vector<vector<int>> combinatio…

Vagrant + VirtualBox + CentOS7 + WindTerm 5分钟搭建本地linux开发环境

1、准备阶段 将环境搭建所需要的工具和文件下载好&#xff08;页面找不到可参考Tips部分&#xff09; Vagrant 版本&#xff1a;vagrant_2.2.18_x86_64.msi 链接&#xff1a;https://developer.hashicorp.com/vagrant/downloads VirtualBox 版本&#xff1a;VirtualBox-6.1.46…

k8s集群中ETCD备份和恢复

文章目录 [toc]一、etcd 概述二、安装etcdctl工具三、kubeadm部署方式部署1&#xff09;备份2&#xff09;恢复四、定时备份 五、二进制部署备份1&#xff09;备份2&#xff09;恢复1、停止apiserver和etcd2、etcd_1恢复3、etcd_2恢复4、etcd_3恢复5、启动etcd和apiserver6、检…

[docker]笔记-存储管理

1、docker数据存储分为非永久性存储和永久性存储。 非永久性存储&#xff1a;容器创建会默认创建非永久性存储&#xff0c;该存储从属于容器&#xff0c;生命周期与容器相同&#xff0c;会随着容器的关闭而消失&#xff08;可理解为内存中数据&#xff0c;会随关机而消失&…

手写Spring:第18章-数据类型转换工厂设计实现

文章目录 一、目标&#xff1a;数据类型转换工厂二、设计&#xff1a;数据类型转换工厂三、实现&#xff1a;数据类型转换工厂3.1 工程结构3.2 数据类型转换工厂类图3.3 定义类型转换接口3.3.1 类型转换处理接口3.3.2 类型转换工厂3.3.3 通用类型转换接口3.3.4 类型转换注册接口…

『Bug挖掘机 - 赠书02期』|〖Effective软件测试〗

大家好&#xff0c;我是洋子&#xff0c;前段时间给大家推荐了《测试设计思想》&#xff0c;今天再给大家推荐一本软件测试领域的新书 这本书就比较接地气了&#xff0c;是一本软件测试的入门书籍&#xff0c;但同样适用于1-3年软件测试经验的读者阅读 这本书第一章就用Java代…

LinuxUbuntu安装OpenWAF

Linux&Ubuntu安装OpenWAF 官方GitHub地址 介绍 OpenWAF&#xff08;Web Application Firewall&#xff09;是一个开源的Web应用防火墙&#xff0c;用于保护Web应用程序免受各种网络攻击。它通过与Web服务器集成&#xff0c;监控和过滤对Web应用程序的流量&#xff0c;识…

优化VUE Element UI的上传插件

默认ElmentUI的文件列表只有一个删除按钮&#xff0c;我需要加预览、下载、编辑等&#xff0c;就需要优化显示结果。 优化后没用上传进度条&#xff0c;又加了一个进度条效果 代码 <template><div><el-uploadclass"upload-demo"action"/"…

09_瑞萨GUI(LVGL)移植实战教程之拓展练习

本系列教程配套出有视频教程&#xff0c;观看地址&#xff1a;https://www.bilibili.com/video/BV1gV4y1e7Sg 9. 拓展练习 本节安排三个实验检验学习成果&#xff0c;实验示例源码在资料包的这个位置&#xff1a; DShanMCU-RA6M5配套学习资料\2_配套源码\02_瑞萨电子MCU GUI(…

《Tree of Thoughts: Deliberate Problem Solving with Large Language Models》中文翻译

《Tree of Thoughts: Deliberate Problem Solving with Large Language Models》- 思维树&#xff1a;用大型语言模型有意识地解决问题 论文信息摘要1. 介绍2. 背景3. 思想树&#xff1a;用 LM 有意识地解决问题4. 实验4.1 24 人游戏4.2 创意写作4.3 迷你填字游戏 5. 相关工作6…

基于大规模测量和多任务深度学习的电子鼻系统目标识别、浓度预测和状态判断

Target discrimination, concentration prediction, and status judgment of electronic nose system based on large-scale measurement and multi-task deep learning 摘要 为了实现响应特征的自动提取&#xff0c;简化模型的训练和应用过程&#xff0c;设计了一种双块知识…

【数据结构--二叉树】平衡二叉树

题目描述&#xff1a; 代码实现&#xff1a; /*** Definition for a binary tree node.* struct TreeNode {* int val;* struct TreeNode *left;* struct TreeNode *right;* };*/ int TreeHeight(struct TreeNode* root) {if(rootNULL)return 0;//左右子树中大的…

Linux 中的 chpasswd 命令及示例

chpasswd命令用于更改密码,尽管passwd命令也可以执行相同的操作。但它一次更改一个用户的密码,因此对于多个用户,使用chpasswd 。下图显示了passwd命令的使用。使用passwd我们正在更改来宾用户的密码。首先,您必须输入当前签名用户的密码,然后更改任何其他用户的密码。必须…

Java认识异常(超级详细)

目录 异常的概念和体系结构 异常的概念 异常的体系结构 异常的分类 1.编译时异常 2.运行时异常 异常的处理 防御式编程 LBYL EAFP 异常的抛出 异常的捕获 异常声明throws try-catch捕获并处理 finally 异常的处理流程 异常的概念和体系结构 异常的概念 在Java中…

RabbtiMQ的安装与在Springboot中的使用!!!

一、安装Erlang与Rabbitmq 安装教程本教程是在centos8下试验的&#xff0c;其实linux系统的都差不多RabbitMQ官方&#xff1a;Messaging that just works — RabbitMQRabbitMQ是开源AMQP实现&#xff0c;服务器端用Erlang语言编写&#xff0c;Python、Ruby、 NET、Java、JMS、c…