教程详情
按F12键或右键点击网页元素选择“检查”，即可打开开发者工具。界面分为“元素”“控制台”“网络”等多个面板，顶部图标可切换设备模式（如手机、平板）。若工具未自动贴边，可点击左上角图钉图标固定位置。
查看和修改页面元素
在“元素”面板中，展开HTML标签结构，点击具体节点（如div）后，右侧“样式”区域会显示相关CSS规则。双击属性值（如`color: red;`）可直接修改颜色、字体等样式。勾选“禁用”按钮可临时关闭某条CSS规则，观察页面变化。
使用控制台输出日志和执行代码
在“控制台”面板输入`console.log('测试')`，按回车键可在控制台查看输出信息。选中页面元素后，右键选择“在控制台中检查元素”，可快速获取该元素的位置信息。输入`document.querySelector('h1').innerText = '新标题'`可实时修改页面文字内容。
监测网络请求和加载时间
切换到“网络”面板，刷新页面后可以看到所有资源文件（如JS、图片、CSS）的加载状态。点击具体文件可查看响应头、请求时间、文件大小。若某资源显示红色感叹号，表示加载失败，可右键复制链接地址单独测试。
调试JavaScript代码
在“源代码”面板中展开脚本文件（如`app.js`），点击行号设置断点。当代码执行到此处时会自动暂停，此时可查看变量当前值（鼠标悬停变量名）或逐行执行（按步进按钮）。在右侧“监视”区域添加表达式（如`user.name`）可实时监控数据变化。
模拟移动端设备和网络环境
点击工具栏的“切换设备模式”图标，选择iPhone、Pixel等预设机型，可查看网页在手机屏幕中的显示效果。在“网络条件”下拉菜单中选择“Fast 3G”或自定义网速（如50kb/s），测试弱网环境下的页面加载性能。
