最常用快捷键是Ctrl+Shift+C（macOS为Cmd+Shift+C）直接选中元素；Elements面板中Ctrl+F可搜索HTML片段；用document.querySelector验证选择器有效性；右键Copy selector仅用于定位，实际脚本应优先使用data-testid等稳定属性。
按快捷键直接打开开发者工具并选中元素
最常用、最快捷的方式就是用快捷键唤起检查模式，不需要先右键再点菜单。Windows/Linux 按 Ctrl+Shift+I 打开 DevTools，再按 Ctrl+Shift+C 进入元素选择；macOS 对应的是 Cmd+Option+I 和 Cmd+Shift+C。鼠标悬停时页面会高亮，点击即定位到 Elements 面板中的对应节点。
注意：有些元素是懒加载或交互后才渲染的（比如下拉菜单、分页内容），刚打开工具时找不到，得先点一下按钮或滚动到底部再按 Ctrl+Shift+C。
在 Elements 面板里用 Ctrl+F 快速搜索 HTML 片段
打开 Elements 面板后，直接按 Ctrl+F（macOS 是 Cmd+F）弹出搜索框，输入任意内容都能匹配——不只是文本，也包括 class="header"、data-testid、id="main" 这类属性值，甚至标签名如 nav 或 svg。
- 搜索结果会高亮所有匹配项，并显示当前匹配位置（如“3 of 12”）
- 如果页面用了 Shadow DOM，默认不展开，搜不到内部结构；得手动点开
#shadow-root节点后再搜 - 搜索时区分大小写？默认不区分，但可以点击搜索框右侧的
Aa图标开启 case-sensitive 模式
用 document.querySelector 在 Console 中验证选择器是否有效
当你写了个 CSS 选择器（比如 .user-card[data-status="active"]），不确定它能不能命中目标，直接切到 Console 面板输一行就能验证：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
document.querySelector('.user-card[data-status="active"]')
返回一个元素对象说明成功；返回 null 就代表没找到——这时候别急着改代码，先确认三件事：
- 目标元素是否已存在于 DOM 中（不是还没渲染，也不是被
v-if或*ngIf移除了） - 有没有 iframe 隔离：如果是 iframe 里的元素，得先拿到 iframe 的 contentDocument：
document.querySelector('iframe').contentDocument.querySelector('button')（跨域会报错） - 是否误用了动态生成的 ID（如
id="item-4567"），这类 ID 每次刷新都变，优先改用data-属性或稳定 class
右键“Copy selector”得到可复用的路径，但别直接当 selector 用
右键元素 → “Copy” → “Copy selector”，浏览器会生成类似 body > div#app > main .list > ul > li:nth-child(3) 这样的路径。它能帮你快速定位源码位置，但实际脚本里不建议直接用。
原因很实在：
-
:nth-child(3)这种序号型选择器极其脆弱——加个提示文案、删个空li，整个选择器就失效 - 路径太长，CSS 计算开销略高，尤其在频繁操作的动画或滚动逻辑中
- 真实项目中更倾向用语义化、稳定的锚点，比如
[data-testid="product-item"]或.product-card
真正该关注的，是那个元素身上有没有不变的 data- 属性、是否包裹在明确的容器里、以及它的 role 或 aria-label 是否可用——这些才是健壮选择器的来源。
