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.mzph.cn/news/63860.shtml

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

相关文章

ArcGIS地块面积分割调整工具插件

地块分割调整工具可以实现将选定的图斑按照面积比例或者指定的面积,分割成多个图斑。 各个图斑的面积用逗号分隔,比例分割设置时,用整数表示。 面积分割时,最后一个图斑的面积可以不写,插件可以自动计算图斑的面积&a…

ARM DIY(四)WiFi 调试

文章目录 焊接打开内核编译选项重新编译内核烧录 && 运行 && 测试完善脚本测速手搓天线正式天线 焊接 换个粗点的风枪嘴,让热风覆盖 RTL8823BS 整体模块,最终实现自动归位 焊接 SDIO 接口的上拉电阻以及复位引脚上拉电阻 硬件部分就这…

【C++】map和set

map和set 文章目录 map和set关联式容器setset介绍set的函数测试代码 multiset注意事项测试代码 mapmap介绍map的函数测试代码 关联式容器 前面了解过的vector,list,string等容器都是序列式容器,存储的都是元素本身,底层都是线性的…

七、Kafka-Kraft 模式

目录 7.1 Kafka-Kraft 架构7.2 Kafka-Kraft 集群部署 7.1 Kafka-Kraft 架构 左图为 Kafka 现有架构,元数据在 zookeeper 中,运行时动态选举 controller,由controller 进行 Kafka 集群管理 右图为 kraft 模式架构(实验性&#xff…

pdf加密如何解除?这样解除加密很简单

pdf加密如何解除?有时,我们可能会收到一些加密的PDF文件,它们不允许我们对其进行编辑或打印。这时,我们需要使用PDF解密工具,以便能够轻松地解除PDF加密并对其进行编辑。那么接下来就给大家介绍一下pdf加密解除的方法。…

SPI3+DMA外设驱动-TFTLCD初始化

前言 (1)本系列是基于STM32的项目笔记,内容涵盖了STM32各种外设的使用,由浅入深。 (2)小编使用的单片机是STM32F105RCT6,项目笔记基于小编的实际项目,但是博客中的内容适用于各种单片…

内网隧道代理技术(二十)之 CS使用HTTP代理上线不出网机器

CS使用HTTP代理上线不出网机器 CS工具自带上线不出网机器 如图A区域存在一台中转机器,这台机器可以出网,这种是最常见的情况。我们在渗透测试的过程中经常是拿下一台边缘机器,其有多块网卡,边缘机器可以访问内网机器,内网机器都不出网。这种情况下拿这个边缘机器做中转,…

VsCode搭建Java开发环境 vscode搭建java开发环境 vscode springboot 搭建springboot

VsCode搭建Java开发环境 vscode搭建java开发环境 vscode springboot 搭建springboot VsCode java开发截图1、安装Java 环境相关插件2、安装 Spring 插件3、安装 Mybatis 插件第一个 vsc-mybatis第二个 mybatisX 4、安装Maven环境4.1、安装Maven环境4.2、VsCode配置Maven环境 5、…

视频汇聚/视频监控管理平台EasyCVR接入海康SDK协议后无法播放该如何解决?

开源EasyDarwin视频监控/安防监控/视频汇聚EasyCVR能在复杂的网络环境中,将分散的各类视频资源进行统一汇聚、整合、集中管理,在视频监控播放上,视频安防监控汇聚平台可支持1、4、9、16个画面窗口播放,可同时播放多路视频流&#…

Java异常处理

Java内置了一套异常处理机制,总是使用异常来表示错误。一个健壮的程序必须处理各种各样的错误。所谓错误,就是程序调用某个函数的时候,如果失败了,就表示出错 异常是一种class,因此它本身带有类型信息。异常可以在任何…

Flutter Web 项目网络请求报 XMLHttpRequest error 解决方案

使用http库进行简单的网络请求时,运行在Chrome浏览器上,网络请求一直报错 XMLHttpRequest error,而在iOS 模拟器上运行则正常,后面在postman上发送请求,也是正常的。这就是很尴尬了!!&#xff0…

【计算机基础】Git从安装到使用,详细每一步!扩展Github\Gitlab

📢:如果你也对机器人、人工智能感兴趣,看来我们志同道合✨ 📢:不妨浏览一下我的博客主页【https://blog.csdn.net/weixin_51244852】 📢:文章若有幸对你有帮助,可点赞 👍…

np.numpy, np.reshape, np.cumsum方法速查

1 np.numpy() 创建一个数组 state[[1,2,3,4,5],[6,7,8,9,10],[11,12,13,14,15]] state2np.array(state) print(state) print(state2)[[1, 2, 3, 4, 5], [6, 7, 8, 9, 10], [11, 12, 13, 14, 15]] [[ 1 2 3 4 5] [ 6 7 8 9 10] [11 12 13 14 15]] 2 np.reshape() 常用于矩阵规…

《Go 语言第一课》课程学习笔记(十三)

方法 认识 Go 方法 Go 语言从设计伊始,就不支持经典的面向对象语法元素,比如类、对象、继承,等等,但 Go 语言仍保留了名为“方法(method)”的语法元素。当然,Go 语言中的方法和面向对象中的方…

【CSS 画个梯形】

使用clip-path: polygon画梯形 clip-path: polygon使用方式如下: 效果实现 clip-path: polygon 是CSS的属性之一,用于裁剪元素的形状。它可以通过定义一个具有多边形顶点坐标的值来创建一个多边形的裁剪区域,从而实现元素的非矩形裁剪效果。…

C++ - 继承

继承的概念 继承机制是面向对象程序设计当中,非常重要且好用的手段,这种手段可以允许程序员在原有的类的特性基础之上,进行拓展从而产生新的类,这些新产生的类,我们成为派生类。在以前,我们实现的复用是函数…

从零开发JavaWeb入门项目--十天掌握

原文网址:从零开发JavaWeb入门项目--十天掌握_IT利刃出鞘的博客-CSDN博客 简介 这是一个靠谱的JavaWeb入门项目实战,名字叫蚂蚁爱购。从零开发项目,视频加文档,十天就能学会开发JavaWeb项目,教程路线是:搭…

Docker私有镜像仓库(Harbor)安装

Docker私有镜像仓库(Harbor)安装 1、什么是Harbor Harbor是类似与DockerHub 一样的镜像仓库。Harbor是由VMware公司开源的企业级的Docker Registry管理项目,它包括权限管理(RBAC)、LDAP、日志审核、管理界面、自我注册、镜像复制和中文支持等功能。Docker容器应用的…

transformer源码

1.传统RNN网络 每一层都需要上一层执行完才能执行 1.1 自注意力 在一句话中找到it_指代的是什么,它的上下文语境是什么? self-attetion计算 1.2 multi-header机制 1.3 堆叠多层self-attention,相当于再一次卷积 1.4 位置信息编码 1.5 残…

K8S容器OOM killed排查

背景 数据服务平台南海容器k8s设置的内存上限2GB,多次容器被OOM killed。 启动命令 java -XX:MaxRAMPercentage70.0 -XX:HeapDumpOnOutOfMemoryError -XX:HeapDumpPath/apps/logs/ ***.jar排查过程 1 当收到实例内存超过95%告警时,把jvm进程堆dump下…