如何在 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)

您可以安装以下扩展程序。

  1. 实时服务器。
  2. 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 库。


  1. 运行 在项目文件夹内的终端中使用此命令初始化项目 npm init -y

  2. 使用 npm install lite-server --save-dev

    将 lite-server 添加到您的 devDependencies
  3. start命令添加到运行服务器到package.json

    “脚本”:{ “开始”:“精简版服务器” },

To start server use npm start