1. 基础元素检查与样式修改
按 `F12` 打开控制台 → 点击“Elements”面板 → 鼠标悬停页面元素。此操作直接显示DOM结构（如按钮的div标签），支持双击修改CSS（如将文字颜色改为红色），但复杂框架可能嵌套过深（需多次展开查看）。
2. 网络请求监控与过滤
在控制台切换到“Network”面板 → 刷新页面 → 按资源类型筛选（如图片、JS脚本）。此功能观察加载顺序（识别卡顿原因），屏蔽广告资源（右键点击“Block request domain”），但数据流较快时可能遗漏细节（需手动慢速操作）。
3. 断点调试与单步执行
在“Sources”面板打开JS文件 → 点击行号设置断点 → 使用“Step over”逐行执行。此方法定位错误代码（如未定义变量报错），观察变量变化（右侧Watch窗格实时更新），但需理解基础编程逻辑（否则难以分析问题）。
4. 移动端模拟与响应式测试
控制台左上角点击“Toggle device toolbar” → 选择手机型号 → 调整窗口尺寸。此工具检测适配问题（如导航栏遮挡内容），测试触屏交互（模拟点击延迟），但无法完全还原真机环境（部分CSS媒体查询可能失效）。
5. 性能分析与优化建议
在控制台左侧选择“Performance” → 录制页面加载过程 → 查看“Main”线程耗时。此功能识别渲染瓶颈（如未压缩图片导致加载慢），提供改进方向（如启用懒加载），但专业术语较多（如“Long Task”需进一步学习）。
6. Console面板即时反馈与日志查看
按 `F12` 后切换到“Console” → 输入 `document.title` 查看标题 → 输入 `alert("test")` 弹出提示。此方式验证页面信息（如获取隐藏字段值），测试小段代码（如计算表单总价），但错误提示需基础解读能力（如“Uncaught ReferenceError”需排查变量声明）。