让 Claude 写一个 React 组件或者一页 HTML，右侧 artifact 面板打开了，但里面什么都没有——没有报错、没有 spinner，就是白。Preview 标签空白，但 Code 标签里源码是齐的。这种情况几乎都是 sandbox iframe 内部抛了 JS 异常但 Claude 主界面没接住，或者浏览器还缓存着旧的 artifact frame。修法是打开 DevTools 去看 iframe 自己的 console，把真实报错原话发回去让 Claude 改。
常见原因
按命中率从高到低。
1. Sandbox iframe 内未捕获的 JS 异常
Artifact 预览跑在一个独立 JS 上下文的 sandbox <iframe> 里。顶层一个 ReferenceError、SyntaxError 或 TypeError 会让 React 树直接挂不上去，但外层 Claude UI 看不到这个错。
怎么判断：打开 DevTools，在空白面板上右键选「检查 frame」，或者在 Console 顶部下拉里挑那个 iframe。里面那条红字就是元凶。
2. CDN URL 404 或返回了 HTML
Artifact 会从 esm.sh / unpkg / cdn.jsdelivr.net 拉 React、Tailwind、lucide-react 这些。如果 pin 的版本号不存在，或者 CDN 把请求重定向到了一个 HTML 页，import 看似解析成功但实际没执行。
怎么判断：DevTools Network 切到 artifact iframe，看 JS 资源行里有没有 404 / 503 / Content-Type: text/html。
3. 浏览器缓存里还压着上一份空 frame
你重新生成了 artifact，但 iframe 还指着上一个 blob URL，那个 URL 此刻已经被 revoke 了。后续渲染拉到的是 about:blank。
怎么判断：硬刷新一下（Cmd-Shift-R / Ctrl-Shift-F5）。刷完出来了，就是缓存 / blob revoke 问题。
4. 用了 Tailwind class 但没引 Tailwind 脚本
Claude 有时候会写 className="bg-blue-500 p-4" 但 head 里没塞 Tailwind CDN script。布局塌成 0 高度容器，看起来就是空白——其实 React 树挂上去了。
怎么判断：DevTools → Elements 看 iframe，<div> 在但 width: 0 或 height: 0。或者 <head> 里压根没 <script src="...tailwindcss...">。
5. 组件 default export 出去的函数命中了 return null
Claude 常见的小坑：默认导出的组件里有 if (!data) return null; 但没给初始数据，预览正好命中 null 分支。
怎么判断：Code 标签搜 return null。有的话让 Claude 加 loading 态或者初始 state。
开始前
- 看看是只这次对话的 artifact 空白，还是每次都空——只这次的话问题在 artifact 代码本身。
- 用无痕窗口和另一个浏览器再试一遍，隔离扩展和缓存的影响。
- 当前对话别关，等下要用 artifact ID 和那条 Claude 回复来要求重写。
需要收集的信息
- iframe console 里的报错原文（红字一字不差贴出来，别概括）。
- Code 标签也空白，还是只有 Preview 空白。
- 浏览器 + 版本、OS、有没有装拦截类扩展（uBlock、Brave Shields、MDM 配置）。
- Artifact 类型：React、HTML、SVG、Mermaid，还是纯代码。
- 同一对话里别的 artifact 渲染是否正常。
一步一步修复
Step 1：先硬刷新一次
Mac 上 Cmd-Shift-R，Windows 上 Ctrl-Shift-F5。大概三成的空白面板就是被 revoke 的 blob 残留，刷一下就好。出来了就完事。
Step 2：打开 iframe 的 console
DevTools 里 Console 顶部下拉（默认写「top」），切到路径像 claude.site 或 artifacts.anthropic.com 的那个 iframe，重跑 artifact，第一条红字就是真正的失败原因。
Uncaught ReferenceError: useEffect is not defined
at Component (index.js:14)Step 3：把报错原话发回 Claude
iframe 里那行错误原样复制粘贴回去：
artifact 预览空白。iframe console 里是：
Uncaught ReferenceError: useEffect is not defined at index.js:14
请修一下、重新出一份 artifact。只要给到真实报错，Claude 基本一次就能改对。
Step 4：console 干净但还是空白，去看 CDN import
iframe console 没报错但面板仍然空白，去 iframe 自己的 Network 标签，filter js。任何一行 404 就是凶手。常见情况：
| URL 形态 | 症状 | 修法 |
|---|---|---|
esm.sh/react@18 | minor 版本 404 | 让 Claude 只 pin major：esm.sh/react@18 |
unpkg.com/...?module | 重定向到 HTML | 换 esm.sh |
cdn.tailwindcss.com | 被 CSP 拦了 | 让 Claude 改成内联 style |
Step 5：确认 Tailwind / CSS 真的被引入
React 树挂上去了但页面视觉上是空的，去看 iframe 的 HTML 源码。下面这两样至少要有一项：
<script src="https://cdn.tailwindcss.com"></script>或者内联的 <style> 规则。都没有就回复 Claude：
请把 Tailwind CDN script tag 加到 artifact head 里，
不然 utility class 没法生效。Step 6：让 Claude 加一个 error boundary
针对 React artifact，要求：
把根组件包一层 React error boundary，
把错误消息直接渲染出来。
这样以后空白渲染就变成可见的报错了。下次再空白就能自己暴露原因，不用 DevTools。
Step 7：实在不行就让它从头重写
artifact 已经被编辑过 5 次以上、改得很乱，就让 Claude「一次性从头重写这个 artifact、不在原基础上改」。干净重生比堆 diff 靠谱。
怎么验证修好了
- 在新标签页重新打开这个对话，不开 DevTools 也能看到 artifact 正常出来。
- 换一个浏览器打开（Chrome 上看就换 Safari），渲染结果应该一致。
- 在 Code 和 Preview 标签之间来回切，面板不应该又变白。
- 如果是交互型 artifact，点一下按钮或填一下输入框，iframe console 应保持干净。
长期预防
- 稍微复杂点的 artifact，开头就让 Claude「根组件包 error boundary，挂载时打一条 log」。
- CDN import 只 pin major version，别 pin 到 patch——补丁版可能被 yank 掉。
- 在 artifact 上反复迭代时让 DevTools 一直开着，iframe 报错当场抓，别拖到三轮之后。
- artifact 长起来就拆：一份做数据层、一份做 UI，越小越不容易空白。
- 收藏一下
status.anthropic.com，开搞之前先看一眼，有时是 artifact 服务自己降级了。
容易踩的坑
- 看了外层页面的 console，没去看 iframe 的——什么都看不到。
- 默认认为「Preview 空白 = Claude 坏了」，几乎都是少了一个 import。
- 为修一个 typo 在原 artifact 上编辑 10 次，不如让它整篇重写一次。
- 忘了 Tailwind 不引 script 就完全无效——Claude 自己也常常忘。
- 一个个禁用扩展去排查，其实开个无痕窗口 5 秒就能判断。
常见问答
- 为什么 Claude 自己界面里看不到 iframe 报错？ Artifact sandbox 是有意隔离的，外层界面按设计就读不到 iframe 内部。
- 空白面板会不会是账号被限流？ 不会——限流会显示 rate-limit 横幅，不会表现成空 artifact。
- 要不要给 Anthropic 提反馈？ 只有当同一 session 里多个不同 artifact 都空白且 iframe 没报错时再提，那才像服务端问题。
- 能把坏掉的 artifact 下回本地跑吗？ 可以，Code 标签是好的。把源码存下来、装依赖、用 vite 跑就行。
相关
- Claude Artifact 下载失败
- Claude 文件生成吃配额
- Claude Chrome connector 问题
- Claude 新手入门
- Claude prompt 最佳实践
- Claude 手机 App 同步异常：3 个原因 + 修复路径
- Claude Team 账单与席位数对不上
- Claude Artifact 编辑后被回滚到旧版本
标签: #Claude #排查 #artifacts