如何在 VS Code 中运行 html 和 javascript答案

【问题标题】：How to run html & javascript in VS Code如何在 VS Code 中运行 html 和 javascript
【发布时间】：2020-12-28 01:45:41
【问题描述】：

我有以下代码。如何使用调试器在 VS Code 中运行它。我安装并尝试了 live-server，但可能没有正确执行。

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)

【问题讨论】：

标签： javascript html vscode-debugger

【解决方案1】：

您可以安装以下扩展。

实时服务器。
Chrome 调试器。

安装这两个扩展程序后，使用实时服务器打开页面index.html，然后按F12 打开chrome 的开发者工具。

然后你可以像这样在调试器上粘贴一行代码。

document.querySelector('button').addEventListener('click',()=>{
     console.log("Event Raised");
};

【讨论】：

【解决方案2】：

你可以这样做

<!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】：

你可以运行live server，但我建议你使用lite-server library。

在项目文件夹内的终端中运行此命令以使用npm init -y初始化项目
使用 npm install lite-server --save-dev 将 lite-server 添加到您的 devDependencies 中
添加start命令运行服务器到package.json

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

要启动服务器，请使用npm start

【讨论】：