1. 基础查看方式
- 右键点击网页→选择“查看网页源代码”→直接显示HTML代码→滚动查看标签结构（如div嵌套关系）。
- 按`Ctrl+U`快捷键→快速打开源代码页面→用文本搜索功能（`Ctrl+F`）查找关键词（如“header”定位页头部分）。
- 手机端操作：点击页面下方三个点→选择“工具箱”→点击“查看源代码”→支持双指缩放调整代码显示比例。
2. 开发者工具深度分析
- 按`F12`或`Ctrl+Shift+I`打开开发者工具→切换到“Elements”面板→实时查看DOM结构→点击标签可定位网页内容（如点击h1直接选中标题）。
- 在“Elements”面板右键点击标签→选择“Copy”→复制XPath或CSS路径→用于自动化测试或抓取数据（如复制按钮的`//body/div[2]/button`路径）。
- 使用“Toggle Device Toolbar”（Ctrl+Shift+M）→模拟手机屏幕尺寸→观察响应式布局的HTML变化（如导航栏折叠为汉堡菜单）。
3. 动态内容与网络请求
- 切换到“Network”面板→刷新页面→查看所有资源加载记录→点击任意请求→查看“Response”中的返回数据（如JSON接口返回的字段）。
- 右键点击动态加载的内容→选择“Inspect”→自动跳转到生成该内容的JS代码位置→分析脚本如何插入或修改DOM（如无限滚动加载的图片）。
- 在“Sources”面板查找JS文件→设置断点→调试交互逻辑（如点击按钮时触发的事件函数）。
4. 样式与布局关联分析
- 在“Elements”面板选择标签→查看右侧“Styles”窗口→展开CSS规则→修改属性值（如将`color: black`改为`red`）→立即查看效果。
- 按`Alt`键点击样式规则→在页面中高亮显示对应元素→快速识别布局层级（如点击`margin-top: 20px`直接显示受影响的区域）。
- 在“Computed”面板查看最终渲染样式→对比不同浏览器差异（如检查`flex`布局在Chrome和Firefox的表现）。
5. 站点性能与结构优化
- 在“Lighthouse”面板生成报告→查看“HTML结构有效性”评分→优化冗余标签（如移除空的div）。
- 使用“Audits”工具→检测是否存在未闭合标签或过时的HTML语法→自动提示修复建议（如将font标签替换为CSS）。
- 在“Performance”面板分析加载顺序→调整关键资源优先级（如将主JS文件设置为`async`提升首屏速度）。
6. 保存与分享分析结果
- 右键点击“Elements”面板→选择“Edit as HTML”→修改代码后点击“Save”→生成可下载的HTML文件（用于本地调试）。
- 在“Sources”面板左上角点击“Pretty-print”→格式化混乱的代码→方便复制到文档中进行分析（如整理第三方网站的CSS规则）。
- 使用扩展程序“Code Collaborator”→生成分享链接→团队协作标注代码问题（如标记需要优化的冗余嵌套结构）。