1. 如何在元素检查器中搜索指定标签与属性的组合？ #

这事儿用CSS选择器语法就能轻松搞定，步骤超简单：

• 打开Chrome DevTools的**元素（Elements）**面板，按 Ctrl+F（Windows/Linux）或 Cmd+F（Mac）调出搜索框；
• 直接输入标签+属性的CSS选择器格式即可，给你几个实用例子：
  • 精确匹配：找所有rel="stylesheet"的link标签，输入 link[rel="stylesheet"]；
  • 属性包含某值：找所有href里带cdn的a标签，输入 a[href*="cdn"]；
  • 属性以某值开头：找所有src以https开头的script标签，输入 script[src^="https"]；
  • 属性以某值结尾：找所有class以-btn结尾的div标签，输入 div[class$="-btn"]；
• 输入后，搜索框会自动高亮匹配元素，还会显示匹配总数，用上下箭头就能切换查看每个匹配项。

2. 搜索结果数量差异&结果突然减少的原因 #

为什么DevTools和页面源码的搜索结果数量不一样？ #

核心原因是页面源码是初始加载的静态HTML，而DevTools元素面板显示的是浏览器渲染后的动态DOM树：

• 现代网站大多会用JavaScript动态生成DOM元素（比如单页应用的组件渲染、懒加载资源、主题切换时注入的样式链接），这些元素在初始源码里根本不存在，但会被实时加到DOM中，所以DevTools里能搜到，源码里搜不到；
• 就你提到的<link rel>例子，大概率是页面加载后，JS动态注入了大量样式表链接（比如按需加载的组件样式、动态切换的主题样式），这些都是源码里没有的，所以DevTools的结果（184条）远多于源码的（58条）。

为什么DevTools里搜索结果会毫无缘由大幅减少？ #

大概率是这几个细节没注意到：

• 搜索范围被限制了：如果你之前点击了某个子元素，搜索框可能默认切换成「仅在当前选中节点的子树中搜索」（搜索框左侧会显示一个小范围图标），结果自然骤减。点击左侧图标切换回「搜索整个文档」就行；
• 搜索模式切换了：DevTools搜索框支持四种模式：CSS选择器、XPath、文本、选择器匹配的文本，如果不小心从CSS选择器模式切到了文本搜索，结果数量会突变。点击搜索框右侧的...，重新选择对应模式即可；
• 页面DOM动态变化了：比如某些元素被JS移除、页面局部刷新，DOM里的元素数量变了，搜索结果自然减少；
• DevTools状态异常：偶尔会遇到DevTools缓存抽风的情况，试试刷新页面（F5）或关闭重开DevTools，基本能解决。

内容的提问来源于stack exchange，提问作者Ooker