调试HTML商品详情页需聚焦结构错位、交互失灵、加载异常三类问题，核心在于确保DOM就绪、资源依赖合理、无障碍属性完备。
调试 HTML 商品详情页，本质是排查「结构错位、交互失灵、加载异常」三类问题。多数情况不是代码写错，而是 DOM 加载时机、资源依赖顺序或无障碍属性缺失导致的隐性失效。
图片缩放/滑动不生效，PhotoSwipe 初始化失败
常见现象是点击主图没反应，或缩放后位置偏移、拖拽卡顿。根本原因常在初始化前 DOM 未就绪，或 HTML 结构不符合要求。
-
PhotoSwipe必须等所有<img alt="HTML商品详情页代码调试实用技巧" >标签已插入 DOM 后再调用pswp.init()；若图片由 JS 动态插入，得在插入完成后手动触发初始化 - 主图容器必须是
<div class="pswp">，且该元素需在 <code>内直接子级——嵌套过深（如包在<section></section>或 React 组件里）会导致事件捕获失败 - 每张图的
data-pswp-width和data-pswp-height必须填真实像素值（如"750"），不能留空或填"auto"，否则缩放中心计算错误 - 移动端要加
style="touch-action: manipulation"到<img alt="HTML商品详情页代码调试实用技巧" >的父容器上，否则系统手势（如双指缩放）会被浏览器默认滚动拦截 - 后端返回的规格数组必须保持顺序一致，比如始终是
["颜色", "容量"]；若有的接口返回["容量", "颜色"]，specs.join('|')生成的 key 就不匹配 - 价格数字必须单独包裹，如
<span id="price-value">¥1999</span>；别直接写在<p>¥1999</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>里，否则 JS 更新时容易把整个段落内容覆盖掉（比如误删了单位符号或促销标签） - 禁用按钮时，除了
disabled，还得同步设aria-disabled="true"；否则屏幕阅读器仍会读出“可点击”，但实际无法操作，测试时容易漏掉 - 如果 SKU 数据来自异步请求，记得在更新前清空旧的
Map实例，避免残留旧 key 导致查表命中错误项 - 正确做法是给表格外层包一层
<div class="param-table-wrap">，设 <code>overflow-x: auto和-webkit-overflow-scrolling: touch；表格本身加role="presentation"，明确告诉辅助技术“这不是语义化数据表” - 不要用
white-space: nowrap强制不换行——它会让长文本撑爆容器；改用word-break: break-word或对长值加text-overflow: ellipsis+max-width - 更优解是放弃
<table>，改用 <code><dl> <dt>品牌</dt> <dd>Apple</dd> </dl>配合 CSS Grid，天然支持响应式两栏，且语义清晰、无需 hack标签页切换后内容空白或重复加载
点“买家评价”标签，内容区一片空白，或者连点两次后评价数据出现两遍——这是状态管理没跟上 DOM 变化节奏的典型表现。
- 每个标签按钮必须是
<button type="button"></button>，带tabindex="0"和aria-controls="tab-reviews"；对应内容区要有id="tab-reviews"、role="tabpanel"、aria-labelledby="btn-reviews" - 切换前必须调用
abortController.abort()中止上一个未完成的请求，否则快速切换时多个请求并发，成功回调可能覆盖彼此 - 内容插入前先清空目标容器：
el.innerHTML = ''，而不是追加+=；否则历史 DOM 节点残留，可能引发内存泄漏或事件监听器重复绑定 - 错误状态必须提供显式重试入口，比如显示
<button onclick="loadReviews()">重试</button>，而不是只写“加载失败”四个字
最常被忽略的是：所有动态插入的内容（图片、价格、SKU 按钮、标签页内容）都必须在首次渲染时就具备完整语义和可访问状态，不能等 JS 执行完才补。否则首屏对屏幕阅读器用户就是空白，SEO 也抓不到关键信息。
- 每个标签按钮必须是
SKU 选择后价格/库存不更新
这不是 JS 逻辑写错，而是数据映射和 DOM 更新方式出了偏差。用户点“黑色+256GB”，价格还是显示“¥1999”，大概率是 key 匹配失败或更新目标选错了。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
参数表格在手机上横向溢出，滚动条不可键盘访问
加了 overflow-x: auto 却发现键盘 Tab 无法滚动、读屏器念不出内容，说明用了错误的隐藏方式——display: none 或 visibility: hidden 会让内容彻底脱离可访问树。
