首先安装HTML Preview或Live Server插件，然后配置External Tools调用外部浏览器打开HTML文件，或使用插件启动本地服务器实现实时预览，最后可通过Run Configuration设置JavaScript Debug配置以调试页面。
如果您在使用 IntelliJ IDEA 编辑 HTML 文件时，希望直接预览页面效果或通过浏览器查看运行结果，但发现没有配置好运行环境，则可能是缺少必要的运行配置。以下是帮助您在 IDEA 中正确配置并运行 HTML 文件的详细步骤：
一、安装支持 HTML 预览的插件
IntelliJ IDEA 默认不内置 HTML 浏览器预览功能，需要借助插件来实现浏览器打开和实时预览。
1、进入 IDEA 的设置界面，选择 Plugins 选项。
2、在搜索框中输入 "Live Server" 或 "HTML Preview" 进行查找。
立即学习“前端免费学习笔记（深入）”；
3、找到由 JetBrains 官方或社区广泛使用的插件，例如 "HTML Preview" 插件后点击安装。
4、安装完成后重启 IDEA，使插件生效。
二、配置外部浏览器运行 HTML
通过配置外部工具，可以让 IDEA 调用系统默认浏览器打开当前 HTML 文件进行查看。
1、打开设置界面，导航至 Tools → External Tools。
2、点击加号 + 添加新工具。
3、填写名称为 Open in Browser，可选图标路径。
4、在“Program”栏中输入浏览器的安装路径，例如 Chrome 的路径：C:\Program Files\Google\Chrome\Application\chrome.exe（Windows）或使用命令 open（macOS）。
5、在“Arguments”栏中输入 $FileDir$/$FileName$，表示传递当前文件路径给浏览器。
6、在“Working directory”中输入 $ProjectFileDir$。
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
7、点击确定保存配置。
8、返回编辑器，右键点击 HTML 文件，选择 External Tools → Open in Browser 即可在浏览器中打开。
三、使用内置 HTTP 服务器预览（推荐方式）
对于包含 AJAX、JavaScript 模块或相对路径资源加载的 HTML 页面，必须通过本地服务器访问才能正常运行。
1、确保已安装 "Live Server" 或类似插件。
2、右键点击项目根目录或 HTML 文件，在上下文菜单中寻找 "Start Live Server" 选项并点击。
3、插件会自动启动一个轻量级本地服务器，默认监听 http://localhost:5500。
4、浏览器将自动打开并加载该页面，且代码修改后页面可自动刷新。
四、配置运行/调试配置（Run Configuration）
通过自定义 Run Configuration 可快速启动 HTML 文件的预览任务。
1、点击 IDEA 右上角的运行配置下拉菜单，选择 Edit Configurations...。
2、点击左上角加号，选择 JavaScript Debug 类型。
3、命名配置，如 Debug HTML Page。
4、在 URL 字段中输入 http://localhost:5500/your-page.html，请根据实际路径调整。
5、应用更改并关闭窗口。
6、选中该配置，点击运行按钮即可在浏览器中调试 HTML 和 JavaScript。
