需掌握查看原始源代码和审查元素两项能力：前者通过Ctrl+U、右键或view-source:指令获取未渲染的静态HTML，用于SEO和埋点验证；后者用F12、Ctrl+Shift+C或右键检查获取动态DOM，支持实时编辑HTML与CSS。
你想快速验证网页是否包含某段meta标签、检查统计代码是否部署成功，或定位某个按钮的HTML结构并实时修改CSS样式，就得同时掌握查看原始源代码和审查元素这两项基础能力。
直接查看网页原始HTML源代码
这一步不执行JavaScript、不渲染DOM，只显示服务器返回的最原始文本，适合核对SEO配置、验证埋点代码是否写入HTML模板。
方法一：快捷键直达
在任意已打开的网页中，直接按下Ctrl + U（Windows/Linux）或Cmd + U（macOS），页面立即跳转为纯文本格式的源码视图。
方法二：右键菜单调用
在网页空白处单击鼠标右键 → 在弹出菜单中选择【查看网页源代码】。注意：若右键菜单中没有该选项，说明当前页面可能被禁用了上下文菜单（常见于某些H5活动页或iframe嵌套页）。
方法三：地址栏指令强制访问
点击地址栏，将光标移到URL最前方 → 输入view-source:（注意冒号不能漏）→ 按回车。例如原网址是 https://www.baidu.com，则输入 view-source:https://www.baidu.com 后回车。此方式绕过所有前端拦截，100%返回原始响应体。
用开发者工具审查网页元素
审查元素看到的是浏览器当前渲染完成的DOM树，包括所有JavaScript动态插入、修改后的内容——它不是静态HTML，而是活的页面结构。
第一步：打开开发者工具
确保光标在网页内容区（不在地址栏、标签页或弹窗内）→ 按下F12键。若笔记本无独立F12键，尝试Fn + F12。
第二步：精准选中目标元素
按Ctrl + Shift + C（Windows/Linux）或Cmd + Shift + C（macOS），鼠标自动变成十字形，移到页面上悬停时高亮DOM节点，点击即跳转到Elements面板对应HTML行。
第三步：右键“检查”快速锚定
在目标元素上（如搜索框、导航链接、商品图片）右键 → 选择【检查】→ Elements面板自动展开并高亮该节点。这个操作比F12后手动找快得多，尤其适合调试视觉上已存在的元素。
注意：如果目标元素是点击后才出现的（比如下拉菜单、弹窗、悬浮提示），必须先触发交互（点开它），再按 Ctrl+Shift+C 或右键检查，否则DOM树里根本找不到。
在Elements面板中实时编辑HTML与CSS
左侧是实时渲染后的HTML树形结构，右侧默认显示Styles区域，列出当前选中元素的所有CSS规则，包括继承值、计算值和被覆盖的声明。
勾选/取消勾选某条CSS属性（如display: none）可即时验证效果，无需刷新页面。
右键某个HTML节点 → 选择【Edit as HTML】→ 可直接修改标签名、属性或文本内容，回车即生效。例如把改成，密码就立刻明文显示。
