如何在 VS 代码中运行 html & javascript
[英]How to run html & javascript in VS Code
问题描述
I have the following code.
我有以下代码。 How do I run this in VS Code with the debugger.如何使用调试器在 VS Code 中运行它。 I installed and tried live-server but maybe not doing it correctly.我安装并尝试了实时服务器，但可能没有正确执行。
index.html索引.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 index.js
var button = document.querySelector('button');
var fn = () => console.log(this)
function fn() {
console.log(this);
}
button.addEventListener('click', fn)
3 个解决方案
解决方案1
3 已采纳 2020-12-28 01:54:48
You can install the following extensions.您可以安装以下扩展。
- Live Server.实时服务器。
- Chrome Debugger.铬调试器。
Once you have these two extensions installed, open the page index.html using the live server and then press F12 to open the developer tools for chrome.安装这两个扩展后，使用实时服务器打开页面index.html ，然后按F12打开 chrome 的开发人员工具。
And then you can paste a single line of code on the debugger like this.然后你可以像这样在调试器上粘贴一行代码。
document.querySelector('button').addEventListener('click',()=>{
console.log("Event Raised");
};
解决方案2
1 2020-12-28 02:04:49
You can do like this你可以这样做
<!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>
解决方案3
1 2020-12-28 02:27:51
You can run live server but I suggest you to use lite-server library.您可以运行实时服务器，但我建议您使用lite-server库。
Run this command in terminal inside project folder to initialize project with
npm init -y在项目文件夹内的终端中运行此命令以使用npm init -y初始化项目Add lite-server to your devDependencies with
npm install lite-server --save-dev使用 npm 将 lite-server 添加到您的npm install lite-server --save-devAdd
startcommand to run server to package.json添加start命令以运行服务器到package.json"scripts": { "start": "lite-server" },
“脚本”：{“开始”：“精简服务器”}，
To start server use
npm startnpm start
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.