IntelliJ IDEA需启用JavaScript/TypeScript、Node.js、HTML/CSS Tools、Emmet插件，配置Node路径，创建Static Web项目并添加HTML支持，开启Live Edit实现热更新，通过Debug模式断点调试JS，配置npm运行脚本并绑定快捷键，结合Chrome DevTools或HTTP Client插件检查网络请求。
用IntelliJ IDEA做Web开发，既要写HTML/CSS/JS，又要实时看到效果、断点调试逻辑、检查网络请求，光靠浏览器F5刷新远远不够——你得把IDE变成真正的前端工作台。
启用前端核心插件与Node.js支持
打开 Settings（Ctrl+Alt+S）→ Plugins，搜索并启用：JavaScript and TypeScript、Node.js、HTML Tools、CSS Tools、Emmet。这五项是前端编码的底层支撑，缺一不可。
若未安装Node.js，先去 nodejs.org 下载LTS版；装好后回到 Settings → Languages & Frameworks → Node.js and NPM，手动指定 Node interpreter 路径——【不指定则所有npm脚本、ESLint、Prettier均无法运行】。
社区版用户注意：Vue/React/Angular语言服务默认不可用，必须额外安装对应插件（如 Vue.js），否则.vue文件里无语法高亮、无组件跳转、无props提示。
立即学习“前端免费学习笔记（深入）”；
创建静态Web项目并配置Live Edit
File → New → Project → 左侧选 Static Web → 点击 Next → 输入项目名、选择路径 → Finish。
项目建好后，右键根目录 → Add Framework Support → 勾选 HTML → OK。这一步会自动添加 .idea/misc.xml 中的 web facet，否则后续无法识别 index.html 为入口页。
开启热更新：Settings → Tools → Live Edit → 勾选 Enable Live Edit for HTML/CSS/JavaScript → 在 Browser 下拉框中选 Chrome（需已安装JetBrains IDE Support扩展）。改完保存，页面自动刷新，【无需手动F5，但首次启动需手动在Chrome中打开 http://localhost:63342/your-project/index.html】。
调试JavaScript：断点 + 控制台 + 源码映射
第一步：在 index.html 的 <script> 标签内或外部JS文件中，点击行号左侧灰色区域设断点（出现红点）。</script>
第二步：右键 index.html → Debug 'index.html' → IDEA 自动启动内置服务器（端口63342）并唤起Chrome，加载页面后执行到断点暂停。
第三步：此时可查看 Variables 面板读取当前作用域变量、用 Watches 添加表达式监听、在 Console 面板执行任意JS命令——注意，Console 默认运行在当前页面上下文，不是Node环境。
若调试的是打包后的代码（如 webpack 构建产物），必须确保构建时生成 source map（devtool: 'source-map'），并在 Chrome DevTools 的 Sources 面板中勾选 “Enable JavaScript source maps”，否则断点会落在 bundle.js 上而非原始 .ts/.jsx 文件。
运行npm脚本并关联到IDEA快捷键
方法一：直接使用Terminal面板
在IDE底部打开 Terminal，输入 npm run dev（或 npm start），回车运行。适合快速验证，但无法打断点、无进程管理。
方法二：配置npm运行配置（推荐）
① 点击右上角 Add Configuration → + → npm
② Script 填 dev，Package 填项目根目录下的 package.json 路径
③ Working directory 设为项目根路径
④ 勾选 Run npm install automatically before running
⑤ 点击 OK 保存
配置完成后，右上角运行下拉框即可一键启动脚本，且支持 Stop 按钮终止进程——【若不配置Working directory，npm会报错“Cannot find module”】。
方法三：绑定快捷键
Settings → Keymap → 搜索 “npm run dev” → 右键 → Add Keyboard Shortcut → 按 Ctrl+Shift+D（自定义）→ Apply。以后按组合键即触发脚本，省去鼠标操作。
检查HTTP请求与响应头
IDEA本身不提供Network面板，但可通过两种方式补足：
• 在 Chrome DevTools 的 Network 标签页中观察请求，配合IDEA断点定位发起位置；
• 安装插件：Settings → Plugins → 搜索 “HTTP Client”，启用后可在 .http 文件中手写请求（GET /api/user）、发送并查看响应体、状态码、Headers。
写 .http 文件时，第一行必须是 GET/POST 等方法，第二行空，第三行起写 Headers（如 Content-Type: application/json），第四行空，第五行起写 Body（JSON格式需缩进）。发送后结果直接显示在IDE底部Tool Window中，比浏览器更贴近开发流。
