右键点开任何一个网页，网页选“检查”或“审查元素”，审查你会看到一堆密密麻麻的元素用HTML代码跳出来。别关掉。网页那不是审查给程序员看的装饰品，是元素用你直接跟网页对话的入口。我改过无数个页面的网页文字、删过广告、审查调过颜色，元素用全靠在那个面板里敲几下键盘。网页它不神秘，审查只是元素用大多数人没点开过。

先搞清楚你看到的网页区域叫什么。打开审查元素后，审查通常分两栏或三栏。元素用左边是DOM树，也就是网页的结构骨架。每个<div>、<p>、<img>标签都对应页面上的一个块。鼠标在代码上滑过，页面上对应的区域会高亮。反过来，点面板左上角的箭头图标，再去点页面上的某个按钮或图片，代码会自动定位到那一行。这个“选择元素”功能，比翻代码快十倍。

想临时改文字？双击标签之间的文本，直接输入新内容，回车。页面立刻变。比如把“登录”改成“点我”。这改动只在你浏览器里生效，刷新就没了。但用来截图做演示、测试文案长度，非常顺手。改样式更简单。右边有个styles面板，列出当前元素的所有CSS规则。你可以勾掉某个属性看效果，也可以双击数值直接改。把color: #333改成red，标题马上变红。我经常用这招检查按钮的hover状态，或者临时把某个碍眼的浮层display: none掉。

有个细节很多人忽略：审查元素看到的是浏览器解析后的最终DOM，不是服务器返回的原始HTML。JavaScript动态插入的内容、框架渲染的组件，全都在这里。所以如果你在源代码里找不到某个元素，但在审查面板里能看到，说明它是脚本生成的。反过来，想抓某个动态加载的数据接口，切到Network面板，刷新页面，看XHR请求。点进去看Response，往往能直接拿到JSON。我靠这个找过不少网站的后台API。

别拿它干坏事。改自己看到的页面没问题，但别试图用审查元素绕过前端验证去提交数据。前端校验只是第一道门，后端不认你改过的DOM。有人把价格改成0.01元然后截图，那只是自娱自乐。真正有用的场景是调试和逆向学习。看到一个漂亮的动画效果，打开审查元素看它的transition和keyframes，抄下来。看到一个布局奇怪的bug，用审查元素一层层删元素，定位是哪个容器的overflow或z-index在捣乱。

移动端也能用。Chrome开发者工具左上角有个手机图标，点一下切换设备模拟。你可以选iPhone或Pixel，页面会按移动端视口重新渲染。这时候再审查元素，看到的是移动端的DOM和样式。调试响应式布局时，比真机连电脑方便。不过模拟的触摸事件和真实设备有差异，最终还得上真机测。

最后提醒一句：审查元素里的所有修改都是临时的。想永久生效，得改服务器上的代码或者写浏览器扩展。但作为日常工具，它足够让你看清一个网页到底怎么搭起来的。下次遇到弹窗关不掉、文字选不中、布局错位，别急着重装浏览器。右键，检查，找到那行代码，删掉或改掉。几秒钟的事。