前言

本文主要记录了移动端调试，包含浏览器调试以及远程调试工具和多终端调试工具的介绍。

移动端调试

移动端调试可以查看页面效果是否符合预期，不符合进行修改。

浏览器调试

以CSDN首页为例；

进入控制台

首先按Ctrl + Shift + I（或点击鼠标右键选择检查菜单项）进入控制台：

在这里插入图片描述

进入浏览器模拟器

按Ctrl + Shift + M（或点击图中标记的图标）进入移动端调试； 在这里插入图片描述

切换测试机型

点击图中标记的图标，显示测试机型列表，可以切换测试机型； 在这里插入图片描述

添加测试机型

点击列表最后一项Edit，可添加测试机型； 在这里插入图片描述

改变屏幕尺寸，改变DPR

点击列表第一项Responsive，可拖动改变屏幕尺寸，点击DPR，可改变DPR； 在这里插入图片描述

改变网络情况

在这里插入图片描述

改变屏幕显示大小

在这里插入图片描述

横/竖屏切换

在这里插入图片描述

真机测试

将手机和电脑置于同一局域网下，手机使用浏览器访问编译器返回的地址。

也可以使用其他工具（phpstudy等）搭建服务器，或者远程服务器的地址。

在这里插入图片描述 浏览器模拟器测试和真机测试之间有一定差异，将不符合预期的功能进一步进行调整。

扩展

远程调试工具 -- vorlon.js

Vorlon.JS是为JavaScript所设计的远程调试测试工具（需要node环境）。它可以在移动设备上加载调试JavaScript代码。

使用时Vorlon.JS客户端仅需添加一个script标签。

在这里插入图片描述

多终端调试工具 -- browsersync

Browsersync省时的浏览器同步测试工具（需要node环境），能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。

在这里插入图片描述

本文到此结束

如果大家还有什么其他想法，欢迎在评论区交流！