如何在 VS 代碼中運行 html & javascript

Question

我有以下代碼。 如何使用調試器在 VS Code 中運行它。 我安裝並嘗試了實時服務器，但可能沒有正確執行。

索引.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)

Answer 1

您可以安裝以下擴展。

實時服務器。
鉻調試器。

安裝這兩個擴展后，使用實時服務器打開頁面index.html ，然后按F12打開 chrome 的開發人員工具。

然后你可以像這樣在調試器上粘貼一行代碼。

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

Answer 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>

Answer 3

您可以運行實時服務器，但我建議您使用lite-server庫。

在項目文件夾內的終端中運行此命令以使用npm init -y初始化項目
使用 npm 將 lite-server 添加到您的npm install lite-server --save-dev
添加start命令以運行服務器到package.json
“腳本”：{“開始”：“精簡服務器”}，

啟動服務器使用npm start

如何在 VS 代碼中運行 html & javascript

問題描述

3 個解決方案

解決方案1
3 已采納 2020-12-28 01:54:48

解決方案2
1 2020-12-28 02:04:49

解決方案3
1 2020-12-28 02:27:51

如何在 VS 代碼中運行 html &amp; javascript

問題描述

3 個解決方案

解決方案1 3 已采納 2020-12-28 01:54:48

解決方案2 1 2020-12-28 02:04:49

解決方案3 1 2020-12-28 02:27:51

如何在 VS 代碼中運行 html & javascript

解決方案1
3 已采納 2020-12-28 01:54:48

解決方案2
1 2020-12-28 02:04:49

解決方案3
1 2020-12-28 02:27:51