JavaScript 实验环境搭建,自动加载JavaScript代码,避免手动刷新
安装vscode
从下面的地址下载和安装vscode,编写html和JavaScript
安装 vscode 插件 live server
主要用于JavaScript的热加载,即当我们在js文件中编写代码,保存时,自动加载js文件。
创建测试工程文件夹和文件
- 创建文件夹JavaScript-demo,拖文件夹到编辑区域
- 创建文件index.html
通过
!
+tab
快速创建html模板
<script src="./index.js"></script>
引入index.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>aaa</p>
<script src="./index.js"></script> // 引入index.js
</body>
</html>
- 创建index.js
启动 live server
view->command Palette
输入 reload server
右下角多出go live
,点击go live
,自动打开浏览器
这是就可以通过chrome
的开发者工具,打开consosle
,可以查看js的输出
另一个插件 Quokka.js
- 搜索插件安装
- ctrl +shift + p 创建
效果
总结
通过以上的配置,当我们在index.js中编写测试案例,console.log输出日志,保存时,能实时在console中看到输出的内容