用Visual Studio Code创建JavaScript运行环境【2024版】

用Visual Studio Code创建JavaScript运行环境

JavaScript 的历史

JavaScript 最初被称为 LiveScript,由 Netscape(Netscape Communications Corporation,网景通信公司)公司的布兰登·艾奇(Brendan Eich)在 1995 年开发。在 Netscape 与 Sun(一家互联网公司,全称为“Sun Microsystems”,现已被甲骨文公司收购)合作之后将其更名为了 JavaScript。
在这里插入图片描述

下载软件

1.可以从官网直接下载vscode,软件很小,我现在使用的是最新的1.80.1版本
2.咱们调试js需要用到浏览器,配置的插件是用Chrome浏览器,所以没有的话装一个。
3.从官网下完之后一直下一步就安装完成了

安装必要的扩展插件

1.VSCode界面很简洁安装完之后所有的功能都一目了然,我们需要安装插件可以点击如图的工具和语言:

在这里插入图片描述

2.安装以下两个插件如图:

在这里插入图片描述
在这里插入图片描述

3.我们要调试一个js,需要创建一个html文档里面添加js方法,简单创建个文件,可以直接拖到编译器上,内容如下:

<!DOCTYPE html>
<html><head><title>JavaScript</title>
</head><body><div id="demo"></div><script>// 在 id 属性为 demo 的标签中添加指定内容document.getElementById("demo").innerHTML = "Hello World";</script>
</body></html>

4. 文件放到编译器之后,我们按下F5会有一个弹出框提示我们使用什么环境,因为我们还没创建所以选择more按钮添加插件能让我们进行调试:

在这里插入图片描述

5.进入扩展商店列表我们可以选择JavaScript Debugger插件进行安装,安装完后我们需要重启环境才会生效,或者点击重新加载:

在这里插入图片描述

6.安装完之后再次按下F5时就可以看到Chrome了,选择之后编译器会在当前html文件同目录下创建一个.vscod文件夹里面有一个launch.json的配置文件,同时在编译器显示出来:

在这里插入图片描述

7.做好这些以后按下F5我们会发现已经可以正常运行啦,可以安心学习我们的js基础知识了

如果调试有问题欢迎留言讨论,希望大家顺利开启JavaScript之旅

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

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

相关文章

[C++开发 03_2/2 _ STL(185)]

知识点1&#xff1a;STL初始 概述&#xff1a; STL是标准模板库的意思&#xff0c;STL从广义上来讲分为&#xff1a;容器&#xff0c;算法&#xff0c;迭代器。 容器算法之间通过迭代器进行无缝连接。 知识点2&#xff1a;STL初始 2.1 STL诞生 C中面向对象的三大特性&#xff1…

YARN介绍

1 概念 YARN 是一个资源管理、任务调度的框架&#xff0c;主要包含三大模块&#xff1a;ResourceManager&#xff08;RM&#xff09;、 NodeManager&#xff08;NM&#xff09;、ApplicationMaster&#xff08;AM&#xff09;。其中&#xff0c;ResourceManager 负责所有资 源…

LVS 概念介绍

1、集群简介 集群概述 集群称呼来自于英文单词 cluster&#xff0c;表示一群、一串的意思&#xff0c;用在服务器领域则表示大量服务器的集合体&#xff0c;协同起来向用户提供系统资源&#xff0c;系统服务。通过网络连接组合成一个计算机组&#xff0c;来共同完一个任务。 …

Spring5系列学习文章分享---第五篇(事务概念+特性+案例+注解声明式事务管理+参数详解 )

目录 事务事务概念什么是事务事务四个特性&#xff08;ACID&#xff09; 搭建事务操作环境Spring 事务管理介绍注解声明式事务管理声明式事务管理参数配置XML 声明式事务管理事务操作&#xff08;完全注解声明式事务管理&#xff09;感谢阅读 开篇: 欢迎再次来到 Spring 5 学习…

记一个信息泄露到RCE

打点 开局一个登录框 信息收集 发现了一处接口泄露了部分信息 不过只有支付宝密钥的信息无法扩大危害&#xff0c;此时尝试寻找了一下其他同类型系统同样的接口&#xff0c;查看一下是否泄露的信息相同 因为如果相同就说明是静态的&#xff0c;没有价值横向收集 此时访问其他…

关于我写过那些MySQL专栏

写在文章开头 这是截至今日写过的文章汇总&#xff0c;对于关注笔者公众号有一段时间的读者都知道&#xff0c;笔者会每周对自己写过的文章整理至相关专栏&#xff0c;以便读者可以按需进行检索阅读。 你好&#xff0c;我叫sharkchili&#xff0c;目前还是在一线奋斗的Java开…

无需手动部署3分钟自动化搞定幻兽帕鲁游戏联机服务器搭建与好友一起玩

生存类游戏《幻兽帕鲁》异常火爆&#xff0c;大量玩家遭遇了卡顿、闪退、延迟高的糟糕体验&#xff0c;其实我们玩家也可以选择《幻兽帕鲁》的专用服务器模式&#xff0c;自行搭建服务器和好友畅玩&#xff0c;无需手动部署&#xff0c;3分钟自动化搞定游戏联机服务器搭建。 1…

代码随想录算法训练营第32天(贪心算法02● 122.买卖股票的最佳时机II ● 55. 跳跃游戏 ● 45.跳跃游戏II

贪心算法 part02 122.买卖股票的最佳时机II解题思路 55. 跳跃游戏解题思路 45.跳跃游戏II &#xff08;来不及了 明天刷解题思路 122.买卖股票的最佳时机II 动态规划章节会重点讲买卖股票问题 本题解法很巧妙&#xff0c;大家可以看题思考一下&#xff0c;在看题解。 题目链接&…

Cybellum—信息安全测试工具

产品概述 由于软件和数据在汽车上的使用越来越多&#xff0c;汽车越来越“智能化”&#xff0c;汽车行业面临着重大的信息安全挑战。2021年8月&#xff0c;ISO/SAE 21434正式发布&#xff0c;标准中对汽车的信息安全提出了规范化的要求&#xff0c;汽车信息安全不容忽视。 Cyb…

HTML 曲线图表特效

下面是代码 <!doctype html> <html> <head> <meta charset"utf-8"> <title>基于 ApexCharts 的 HTML5 曲线图表DEMO演示</title><style> body {background: #000524; }#wrapper {padding-top: 20px;background: #000524;b…

Huggingface上传自己的模型

5.8更新几个比较坑的点 首先如果你的模型太大&#xff08;>5GB&#xff09;&#xff0c;那么需要使用下面的命令声明一下&#xff0c;否则无法push $ huggingface-cli lfs-enable-largefiles ./path/to/your/repo假如使用VScode提交&#xff0c;那么需要注意&#xff0c;在…

博弈论(牛客练习赛)

思路&#xff1a;我们考虑小念赢 1、如果n>1并且p0&#xff0c;小念可以连续取两次&#xff0c;相当于小念有挂&#xff0c;可以从必败态转为必胜态&#xff0c;必赢。 2、如果n>1并且m>n-1&#xff0c;小念第一次取n-1个&#xff0c;小念必赢。 代码&#xff1a; …