如何在 VS 代码中 运行 html & javascript
How to run html & javascript in VS Code
我有以下代码。我如何使用调试器在 VS Code 中 运行 这个。我安装并尝试了实时服务器,但可能没有正确执行。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>Test</button>
<script src="index.js"></script>
</body>
</html>
index.js
var button = document.querySelector('button');
var fn = () => console.log(this)
function fn() {
console.log(this);
}
button.addEventListener('click', fn)
您可以安装以下扩展程序。
- 实时服务器。
- Chrome调试器。
安装这两个扩展后,使用实时服务器打开页面 index.html
,然后按 F12
打开 chrome 的开发人员工具。
然后你可以像这样在调试器上粘贴一行代码。
document.querySelector('button').addEventListener('click',()=>{
console.log("Event Raised");
};
你可以这样做
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>Test</button>
<script>
const button = documnet.querySelector("button")
if(button) {
button.addEventListener("click", () => {
console.log("This Works")
})
}
</script>
</body>
</html>
您可以 运行 在线服务器 但我建议您使用 lite-server 库。
运行 在项目文件夹内的终端中使用此命令初始化项目 npm init -y
使用 npm install lite-server --save-dev
将 lite-server 添加到您的 devDependencies
将start
命令添加到运行服务器到package.json
“脚本”:{
“开始”:“精简版服务器”
},
To start server use npm start
我有以下代码。我如何使用调试器在 VS Code 中 运行 这个。我安装并尝试了实时服务器,但可能没有正确执行。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>Test</button>
<script src="index.js"></script>
</body>
</html>
index.js
var button = document.querySelector('button');
var fn = () => console.log(this)
function fn() {
console.log(this);
}
button.addEventListener('click', fn)
您可以安装以下扩展程序。
- 实时服务器。
- Chrome调试器。
安装这两个扩展后,使用实时服务器打开页面 index.html
,然后按 F12
打开 chrome 的开发人员工具。
然后你可以像这样在调试器上粘贴一行代码。
document.querySelector('button').addEventListener('click',()=>{
console.log("Event Raised");
};
你可以这样做
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>Test</button>
<script>
const button = documnet.querySelector("button")
if(button) {
button.addEventListener("click", () => {
console.log("This Works")
})
}
</script>
</body>
</html>
您可以 运行 在线服务器 但我建议您使用 lite-server 库。
运行 在项目文件夹内的终端中使用此命令初始化项目
npm init -y
使用
将 lite-server 添加到您的 devDependenciesnpm install lite-server --save-dev
将
start
命令添加到运行服务器到package.json“脚本”:{ “开始”:“精简版服务器” },
To start server use
npm start