在线运行器只需写body内代码，head内容填对应面板或设置项，资源须用公网URL，调试先查Console报错。
直接用在线运行器跑 HTML，不需要装软件、不改本地环境，但必须注意：它只渲染你写的那一小段代码，不模拟真实文件系统或跨域限制——比如 fetch() 请求本地 JSON 文件会失败，img 标签的 src 必须是公网可访问地址。
CodePen / JSFiddle 这类平台怎么填对位置
很多人把完整 HTML 代码（含 <!DOCTYPE html>、<html>）全塞进 HTML 面板，结果预览区多出两个 <html> 标签，样式错乱。它们默认已包裹一层基础结构，你只需写 <body> 里的内容。
- 想测试带
<head>的 CSS 或<script>？去对应 CSS/JS 面板填，别硬塞进 HTML 区 - 要验证
<meta>或<title>？用 CodePen 的 “Settings → HTML → Stuff for <head>” 填，JSFiddle 则在 “Resources” 下方找 “Add stuff to <head>” - 粘贴整页代码后预览空白？先删掉开头的
<!DOCTYPE html><html><head>...</head><body>，只留<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>，或误把<script>放在了<body>外面（在线编辑器会把它丢进 head，可能执行过早）
真正卡住的地方往往不是语法，而是在线环境和本地浏览器的协议差异、资源加载路径、以及编辑器自动封装带来的 DOM 结构变化——每次改完代码，别急着截图，先点开 Console 看一眼。
