如何在WebStorm中配置支持DOM操作的JavaScript解释器

核心原因 #

document 属于浏览器提供的DOM API，不属于JavaScript原生语法。你当前用的Node.js是服务端JavaScript运行环境，天生没有内置浏览器相关的宿主API，所以无法执行document.write()这类前端代码，属于正常情况。

方案1：直接通过HTML+浏览器运行（最适合初学者） #

这是成本最低的方案，操作步骤如下：

• 在你的项目下新建一个HTML文件（例如命名为index.html），通过<script>标签引入你要运行的JS代码，示例结构如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>测试前端JS</title>
</head>
<body>
  <!-- 直接写JS代码 -->
  <script>
    document.write('测试内容')
  </script>
  <!-- 也可以引入外部JS文件，假设你的JS文件名为main.js -->
  <!-- <script src="./main.js"></script> -->
</body>
</html>

• 右键点击该HTML文件，选择「在浏览器中打开」，任选你安装的Chrome、Edge等主流浏览器即可，打开后就能正常运行带DOM API的JS代码。

方案2：在WebStorm内配置调试运行 #

如果你需要在WebStorm内打断点调试前端代码，可以配置JavaScript调试任务，操作步骤如下：

• 点击WebStorm右上角运行配置的下拉按钮，选择「编辑配置」，也就是你截图里的界面：
  
• 点击左上角的「+」号，选择「JavaScript Debug」
• 在URL输入框填写WebStorm内置静态服务对应的HTML文件地址，格式一般为http://localhost:63342/你的项目名/index.html，也可以直接选择本地HTML文件路径，浏览器选项选择你常用的浏览器
• 保存配置后点击运行按钮，WebStorm会自动唤起浏览器加载页面，你可以直接在WebStorm的JS代码里打断点调试，不需要手动切换到浏览器控制台。

可选方案：单JS文件无浏览器运行 #

如果你不想打开浏览器，也不想写HTML文件，可以安装jsdom库模拟浏览器DOM环境，操作如下：

• 项目根目录执行npm init -y初始化npm配置
• 执行npm install jsdom安装依赖
• 在你的JS文件开头加入以下代码模拟document对象：

const { JSDOM } = require('jsdom');
const dom = new JSDOM('<!DOCTYPE html>');
global.document = dom.window.document;
// 之后就可以正常写document相关代码了
document.write('测试内容')

• 此时就可以直接用Node.js解释器运行该JS文件了。

内容的提问来源于stack exchange，提问作者user16458189