如何在谷歌浏览器中利用开发者工具屏蔽烦人的弹出广告元素？

你有没有遇到过这种情况：打开一个网站，右下角突然弹出一个红包倒计时浮层，或者页面中央盖着一个遮罩层，想关又找不到关闭按钮，广告拦截插件也拿它没辙？其实不用装任何扩展，Chrome 自带的开发者工具就能让你精准定位这个“顽固分子”，一秒把它藏起来。操作很简单，而且不修改网站源码、没有任何安全风险，纯粹是本地临时隐藏。

打开开发者工具并定位弹窗广告DOM节点

按

或 （Windows/Linux）/ （macOS）打开开发者工具，切换到“元素”（Elements）标签页。

点击左上角的蓝色箭头图标（也可以直接按

/ ），鼠标会变成十字光标。把光标悬停在弹窗广告上，网页中会实时高亮显示对应的HTML结构——注意，这一步要等**松开鼠标**才算选准，否则可能选中的是外层容器而不是弹窗本体。如果高亮范围太大，可以逐级展开左侧DOM树，找到 class 名称里带 popup、modal、ad、banner、layer、float 等关键词的最内层 div 或 iframe。

用控制台执行代码临时隐藏该元素

切换到“控制台”（Console）标签页，粘贴下面这行代码并回车：

document.querySelector("你的CSS选择器").style.display = "none";

其中“你的CSS选择器”需要替换成你刚才选中的那个节点的完整选择器——右键节点 → 选择“复制” → “复制选择器”，会得到一串类似 #ad-layer > .popup-wrapper:nth-child(2) .close-btn + .content 的字符串，直接粘贴进引号里就行。回车之后弹窗立刻消失，但刷新页面会恢复。放心，这个操作只影响当前标签页，

。

保存为书签实现一键隐藏（永久可用）

觉得每次打开控制台太麻烦？可以把这个操作做成书签，以后点一下就能一键隐藏。

第一步：在地址栏右侧空白处右键，选择“添加网页”。

第二步：名称填“隐藏弹窗”，网址栏粘贴以下内容（注意全部在一行，并且把里面的选择器换成你实际复制的那一个）：

ja vascript:document.querySelector("你的CSS选择器").style.display="none";void(0);

第三步：点击“完成”。之后每次访问那个网页，点一下这个书签，弹窗就消失了。

这个书签本质是一个 Ja vaScript 伪协议，只在当前页面运行，

，对付那些只在特定页面出现、广告拦截规则库尚未覆盖的“顽固弹窗”特别管用。