先看控制台前两行错误类型、提示文字、文件行号；无报错则问题在逻辑或通信链路；Network无请求说明前端触发失败；有请求则查status与响应体；渲染异常需检查DOM存在性、样式及布局一致性。
控制台有没有报错，先看这三行
打开 DevTools → Console，重点盯住前两行：错误类型（比如 SyntaxError 或 TypeError）、提示文字（如 “fetch is not defined”）、报错文件与行号。没报错但没提示？说明问题不在 JS 语法，而在逻辑或通信链路里。
常见干扰项：
-
ReferenceError: AbortController is not defined—— 老版 Safari 不支持，得加 polyfill 或降级用setTimeout清除请求 -
Failed to execute 'fetch' on 'Window': Illegal invocation—— 把fetch赋值给变量后直接调用，丢失了this上下文 - 空白控制台 + 没任何输出？检查是否忘了在输入框上绑定
input事件，或者监听了change而不是input
Network 面板里搜不到请求，说明根本没发出去
在 Network → Filter 输入 search 或接口路径（比如 /api/search），敲字后没新请求条目，就卡在前端触发环节。
排查要点：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 确认
input元素有id="search-input"，且 JS 里用document.getElementById('search-input')拿到了它——拿不到就是null，后续所有事件绑定都白搭 - 检查是否写了
event.preventDefault()在错误的地方（比如误绑在按钮的click上却没阻止表单默认提交） - 防抖函数里用了
setTimeout却没存返回值，导致clearTimeout无效，请求被连续取消又没重发 - 输入框加了
disabled或readonly属性，input事件压根不触发
请求发出去了但没结果，重点查 status 和 response
看到请求出现在 Network 里，点开看 Headers → Response，再切到 Preview 或 Response 标签页。哪怕状态码是 200，也可能返回空数组或结构错乱。
关键判断点：
- 响应体是
{"code":0,"data":[]}？前端得检查res.data.length === 0后显式渲染空状态容器，不能只靠 CSSdisplay: none切换 - 响应是
400 Bad Request？去 Payload 看请求体，对比后端文档：字段名是不是写成keyword而不是q，字符串有没有多包一层引号 - 响应是
502 Bad Gateway？问题不在前端，是 Nginx 或网关没把请求转发给搜索服务，不用改 JS - 响应头缺
Content-Type: application/json？fetch 会当作 opaque 处理，res.json()报错，得先用res.text()看原始内容
结果渲染出来但“没提示”，其实是 DOM 或样式问题
Network 看到正确 JSON，Console 也没报错，但页面就是不显示提示列表——大概率是渲染逻辑绕过了真实 DOM 插入，或样式把它藏了。
动手验证方式：
- 在 Elements 面板里 Ctrl+F 搜
search-result或你设的容器 ID，看对应节点是否存在；不存在说明replaceChildren()没执行，或执行时传了空 DocumentFragment - 存在但看不见？右键该元素 → “Break on” → “Attribute modifications”，然后输几个字，看是不是 JS 瞬间又把
style.display = 'none'加回去了 - 用
getComputedStyle(el).display在 Console 查计算后样式，确认不是flex容器里子项被设了flex: 0 0 auto导致高度塌陷 - 移动端软键盘顶起页面后，结果容器被挤出视口？加
scrollIntoView({ block: 'nearest' })主动定位
最常被忽略的一点：空状态容器必须和真实结果区共用同一套布局类名（比如同属 search-results-container），否则 flex/gird 的列宽、对齐、断点行为全会突变——这不是“没提示”，是布局被悄悄重置了。
