在 Chrome 中建立和執行 JavaScript 檔案

若要在 Chrome 中執行 JavaScript，可以使用 DevTools Snippet，快速在目前頁面中測試；也可以將程式碼存成 .js 檔，再由本機網頁載入。Node.js 會在瀏覽器外執行 JavaScript；Express 則可提供載入該檔案的網頁，再由 Chrome 執行其中的瀏覽器端程式碼。

使用 Chrome DevTools 建立並執行 JavaScript 檔案

在 Chrome 中開啟網頁，按 F12 開啟 DevTools，或在頁面上按右鍵並選擇 Inspect。選取 Sources 面板，再選擇 Snippets。面板標籤或所在位置可能因 Chrome 版本或介面語言而異；如果找不到 Snippets，請查看面板的更多選項選單。選擇 New snippet，為 Snippet 命名並輸入 JavaScript。

這個 Snippet 會操作目前頁面的文件：新增標題，並在 DevTools 主控台輸出訊息：

if (typeof document !== 'undefined') {
  const heading = document.createElement('h1');
  heading.textContent = "This is the current webpage";
  document.body.prepend(heading);
}
console.log('Snippet finished');

下方保留的執行輸出會顯示「Snippet finished」。這是範例中的英文標籤；由於輸出區塊必須維持原樣，因此不會翻譯。

Snippet finished

在 Windows 或 Linux 上按 Ctrl+Enter，或在 macOS 上按 Command+Enter，即可執行 Snippet。標題會出現在目前開啟頁面的頂端，訊息則會顯示在主控台。Snippet 適合用來測試目前頁面中的程式碼，但它不是可整理並獨立執行的專案檔案。Chrome 可能會在不同工作階段之間保留 Snippet，因此關閉瀏覽器不代表 Snippet 一定會被刪除；若要長期保存專案程式碼，請另外保留原始碼檔案。

使用 Node.js 和 Express 在 Chrome 中執行 JavaScript 檔案

Node.js 會在 Node 環境中執行程式碼，不會在 Chrome 內執行瀏覽器端程式碼。若要在 Chrome 中查看已儲存的瀏覽器指令碼，請提供一個會載入該指令碼的網頁。請從 Node.js 官方網站 安裝 Node.js，建立專案資料夾並在其中開啟終端機，接著依序執行 npm init -y 和 npm install express。

建立 public 子資料夾。將下方內容存成 public/index.html；這個檔案會從同一個資料夾載入瀏覽器指令碼：

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Local JavaScript example</title></head>
<body>
  <script src="/app.js"></script>
</body>
</html>

將上方的 JavaScript 範例存成 public/app.js。在專案資料夾中建立 server.js，並加入以下 Express 設定：const express = require('express'); const path = require('path'); const app = express(); app.use(express.static(path.join(__dirname, 'public'))); app.listen(4000);。提供的執行證據未執行這段 Express 設定。請在專案資料夾中執行 node server.js 啟動伺服器，再於 Chrome 開啟 http://localhost:4000/。瀏覽器會載入 app.js，新增標題並輸出訊息；若要查看訊息，請開啟 DevTools，並選取該頁面的主控台。終端機執行的是 server.js，而不是將 app.js 當作瀏覽器端程式碼執行。連接埠 4000 只是範例；如果已被占用，請在 app.listen(...) 和網址中一致地改用可用的連接埠。