直接上手就能跑通第一个网页，无需先学一堆概念；新建empty project、用!+tab生成html5模板、右键open in browser打开，三步完成起步。
直接上手就能跑通第一个网页，不需要先学一堆概念。WebStorm 对新手其实很友好，关键在于别被界面吓住，跳过“配置全功能环境”这种陷阱，从最简路径开始。
新建项目时选“Empty Project”而不是模板
很多新手看到欢迎页里一堆“React”“Vue”“Node.js”模板就点进去，结果生成一堆自己看不懂的配置文件和依赖，连 index.html 都找不到在哪改。实际起步只需要一个空壳：
- 启动 WebStorm 后，在欢迎页点击 New Project
- 类型选
Empty Project（不是 HTML5、不是 Static Web，就是 Empty） - 指定一个干净的文件夹路径，比如
D:\my-first-web，别嵌套在其他项目里 - 完成后左侧项目树里应该只有一层空目录，没有
node_modules、没有package.json
这样你才真正掌控起点：所有文件都是你亲手加的，出问题能立刻定位到哪一行。
用 ! + Tab 快速生成 HTML5 模板
右键项目根目录 → New → HTML File，起名 index.html，回车后别急着写代码——在编辑区第一行输入 !，然后按 Tab 键。
WebStorm 会自动展开成完整 HTML5 结构，包括 、<code>、 和带 的骨架。这是 Emmet 缩写，不是插件，开箱即用。
常见误区：
- 手动敲
—— 效率低，还容易漏闭合标签 - 输完
!按Enter或鼠标点别的地方 —— 必须按Tab才触发 - 在已有内容中间输
!—— 要在空行开头输才生效
右键“Open in Browser”比配本地服务器更直接
写完 <h1>Hello WebStorm!</h1> 并保存后，不要去研究怎么起 http-server 或配置内置服务器。直接右键 index.html 文件 → Open in Browser → 选 Chrome / Edge / Firefox。
它会用 file:// 协议打开，对纯 HTML+CSS+基础 JS 完全够用。只有当你需要调用 fetch、读取本地 JSON、或用模块化 import 时，才需要后续引入本地服务。
注意两个坑：
- 如果浏览器报错 “Cross origin requests are only supported for protocol schemes”，说明你写了
fetch('./data.json')这类请求 —— 此时再回头配 Vite 或 Live Server 插件，别一开始就被卡住 - 修改 HTML 后刷新页面没变化？检查是否开了浏览器缓存，临时按
Ctrl+F5强刷，或在 DevTools 的 Network 标签里勾选 Disable cache
调试 JS 时断点设在运行逻辑里，别设在声明上
想看 console.log 或变量值？别一上来就在 let count = 0; 这行设断点 —— 它根本不会停。断点必须落在实际执行的语句上，比如函数调用、事件回调或循环体内。
实操建议：
- 写个简单按钮：
<button onclick="sayHi()">点我</button> - 在
<script></script>里写：function sayHi() { console.log('hi'); let x = 1 + 2; } - 把断点打在
console.log('hi');这一行（行号左边单击），不是函数声明那行 - 右键文件 → Debug 'index.html'，点按钮，IDE 才会暂停并显示变量面板
WebStorm 的调试器默认绑定 Chrome，首次使用会自动下载对应版本的 ChromeDriver。如果卡在“Waiting for connection”，大概率是 Chrome 已在运行 —— 关掉所有 Chrome 窗口再试一次就行。
