1. 打开开发者工具：在Chrome浏览器中，按`Ctrl+Shift+I`（Windows）或`Cmd+Option+I`（Mac）组合键，调出开发者工具。确保页面完全加载后再开始操作。
2. 切换设备视图：点击开发者工具左上角的“切换设备工具栏”图标（一个手机加平板的图形）。此时页面会自动缩放，显示移动设备下的布局效果。
3. 选择预设设备：在设备列表中，找到并点击需要模拟的设备（如“iPhone 14”或“Galaxy S23”）。页面会按照该设备的屏幕尺寸、分辨率（如375x812像素）和用户代理（User-Agent）进行渲染。例如，选择iPad后，页面会显示为平板横屏布局。
4. 自定义设备参数：若预设设备不满足需求，可点击“编辑”按钮，手动输入屏幕宽度（如768像素）、高度（如1024像素）和缩放比例（如100%）。此操作适用于测试特殊设备的显示效果。
5. 旋转屏幕方向：点击“旋转”图标，切换设备方向为横向或纵向。例如，将手机切换为横屏后，可检查导航栏是否遮挡内容，或图片布局是否自适应调整。
6. 模拟触摸操作：在“Elements”面板中，右键点击需要测试的元素（如按钮），选择“编辑属性”。将`cursor: pointer`改为`cursor: touch`，观察鼠标悬停时是否显示为手指图标，确保交互反馈符合移动端习惯。
7. 检查响应式断点：在开发者工具右侧的“样式”面板中，展开媒体查询规则（如`@media (max-width: 768px)`）。修改断点值（如从768px改为500px），实时查看页面样式变化，验证CSS是否覆盖不同设备尺寸。
8. 调试移动端功能：在“Console”面板中，输入`navigator.userAgent`查看当前模拟的用户代理字符串（如“Mozilla/5.0 iPhone”）。运行移动端特有的JS代码（如添加`touchstart`事件监听），检查是否触发正确逻辑。
