双击文本内容可编辑，误双击标签名会重命名导致DOM异常；Edit as HTML需先在Sources面板授权并精确映射本地文件才生效；修改CSS优先查Computed面板确认最终值，加outline比全局border更安全。
Elements面板里双击改文本，别点错标签名
直接双击 欢迎来到首页 或
p 错改成 div 或其他非法名，导致 DOM 结构异常。这种误操作不会报错，但刷新后内容错乱或样式丢失——因为浏览器按错误标签重新解析了结构。Edit as HTML 能改结构，但保存前得确认映射成功
右键元素选 Edit as HTML 后，可以增删属性、加 class="highlight"、嵌套新 ，甚至重写整块结构。但能否真正落盘，取决于是否完成工作区映射：
- 必须先在
Sources面板右键 →Add folder to workspace，并点Allow授权（不点授权=白忙） - 再右键目标 HTML 文件 →
Map to file system resource…，路径和大小写必须和本地文件完全一致 - 映射成功后，文件名旁会出现蓝色图标，右侧显示
Filesystem字样——没这个，按Ctrl+Enter也只改内存
内联样式调试最常用，但别漏看 Computed 面板
在 Elements 面板右侧的 Styles 区域，可以直接双击现有 CSS 值（如 margin: 10px）修改，也能点击空白处新增属性。但容易忽略的是：Computed 面板会列出该元素最终生效的所有样式，包括被覆盖的、继承的、浏览器默认的。比如你写了 color: red 却没生效，Computed 里可能显示 color: blue 来自某个 !important 规则，或来自父级 font-color 继承。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
临时加 outline 查布局，别用 * { border: 1px solid }
调试浮动、溢出、对齐问题时，给元素加边框最直观。但用 * { border: 1px solid red } 会污染所有伪元素（如 ::before）、替换元素（如 box-sizing 计算。更稳妥的做法是：
- 在
Styles面板顶部的过滤框输入outline，然后手动加outline: 1px solid #00f - 或者在 Console 执行：
document.querySelectorAll('div, section, header, main, footer').forEach(el => el.style.outline = '1px solid #00f') -
outline不占布局空间，不影响原有尺寸，适合快速定位盒模型问题
真正卡住人的往往不是不会改，而是改完没生效却以为是代码问题——其实只是没映射、没授权、或者被更高优先级的 CSS 覆盖了。动手前先看一眼右上角有没有蓝色小图标，再扫一眼 Computed 里的最终值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
