在线运行器只需写body内代码，head内容填对应面板或设置项，资源须用公网url，调试先查console报错。
直接用在线运行器跑 HTML，不需要装软件、不改本地环境，但必须注意：它只渲染你写的那一小段代码，不模拟真实文件系统或跨域限制——比如 fetch() 请求本地 JSON 文件会失败，img 标签的 src 必须是公网可访问地址。
CodePen / JSFiddle 这类平台怎么填对位置
很多人把完整 HTML 代码（含 、<code>）全塞进 HTML 面板，结果预览区多出两个 标签，样式错乱。它们默认已包裹一层基础结构，你只需写 里的内容。
- 想测试带
的 CSS 或<script></script>？去对应 CSS/JS 面板填，别硬塞进 HTML 区 - 要验证
<meta>或<title></title>？用 CodePen 的 “Settings → HTML → Stuff for ” 填，JSFiddle 则在 “Resources” 下方找 “Add stuff to ” - 粘贴整页代码后预览空白？先删掉开头的
...，只留<h1>Hello</h1>这类内嵌内容
本地文件双击打不开？试试在线运行器绕过 file:// 协议限制
浏览器直接打开本地 .html 文件走的是 file:// 协议，此时 XMLHttpRequest、import、localStorage 在部分浏览器会被禁用。在线运行器自动走 HTTP，能跑通这些功能。
- 调试 AJAX？把请求 URL 换成公开测试接口，例如
https://jsonplaceholder.typicode.com/posts/1 - 用
import加载模块？在线环境不支持原生 ES Module 本地路径，得换成 CDN 地址，如https://cdn.skypack.dev/lodash@4.17.21 - 图片加载失败？检查
<img src="xxx.jpg">中的路径——在线运行器里不能写相对路径，必须是完整 URL 或 base64
预览没反应？先看控制台有没有报错
在线运行器右下角通常有“Console”标签页，点开它，不是所有错误都会弹红框。常见静默失败包括：
-
Uncaught ReferenceError: $ is not defined—— 你写了 jQuery 代码，但没在 “Add Resource” 里引入 jQuery CDN -
Access to fetch at 'xxx' from origin 'https://codepen.io' has been blocked by CORS policy—— 后端没配 CORS，换用支持跨域的 mock 接口 - 页面空白但控制台无报错？检查是否忘了闭合
<div>，或误把 <code><script></script>放在了外面（在线编辑器会把它丢进 head，可能执行过早）真正卡住的地方往往不是语法，而是在线环境和本地浏览器的协议差异、资源加载路径、以及编辑器自动封装带来的 DOM 结构变化——每次改完代码，别急着截图，先点开 Console 看一眼。
