移动端调试
移动端调试可以查看页面效果是否符合预期,不符合进行修改。
浏览器调试
以CSDN首页为例;
进入控制台
首先按Ctrl + Shift + I(或点击鼠标右键选择检查菜单项)进入控制台:
![在这里插入图片描述](https://img-blog.csdnimg.cn/79b8377bc99d424bad61ad0120fd1447.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA56iL5bqP5ZGY5LqM54uX,size_20,color_FFFFFF,t_70,g_se,x_16)
进入浏览器模拟器
按Ctrl + Shift + M(或点击图中标记的图标)进入移动端调试;
![在这里插入图片描述](https://img-blog.csdnimg.cn/6a259e8a2a7b4a5d8125a5e7c97a870f.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA56iL5bqP5ZGY5LqM54uX,size_17,color_FFFFFF,t_70,g_se,x_16)
切换测试机型
点击图中标记的图标,显示测试机型列表,可以切换测试机型;
![在这里插入图片描述](https://img-blog.csdnimg.cn/a6bf939b52ab49f882ef70177ec4ce8e.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA56iL5bqP5ZGY5LqM54uX,size_20,color_FFFFFF,t_70,g_se,x_16)
添加测试机型
点击列表最后一项Edit,可添加测试机型;
![在这里插入图片描述](https://img-blog.csdnimg.cn/4d6ffea72b65403aac59d1b46b105c9e.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA56iL5bqP5ZGY5LqM54uX,size_19,color_FFFFFF,t_70,g_se,x_16)
改变屏幕尺寸,改变DPR
点击列表第一项Responsive,可拖动改变屏幕尺寸,点击DPR,可改变DPR;
![在这里插入图片描述](https://img-blog.csdnimg.cn/495c1c8418e844c9a3b6aaf22093f788.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA56iL5bqP5ZGY5LqM54uX,size_20,color_FFFFFF,t_70,g_se,x_16)
改变网络情况
![在这里插入图片描述](https://img-blog.csdnimg.cn/2984ce4d23b2497a9f25cd1305b5b004.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA56iL5bqP5ZGY5LqM54uX,size_20,color_FFFFFF,t_70,g_se,x_16)
改变屏幕显示大小
![在这里插入图片描述](https://img-blog.csdnimg.cn/8123d999cede4acc9ad7421f8e3f7684.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA56iL5bqP5ZGY5LqM54uX,size_17,color_FFFFFF,t_70,g_se,x_16)
横/竖屏切换
![在这里插入图片描述](https://img-blog.csdnimg.cn/61ebc506dc8042d0a05e70796558614d.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA56iL5bqP5ZGY5LqM54uX,size_20,color_FFFFFF,t_70,g_se,x_16)
真机测试
将手机和电脑置于同一局域网下,手机使用浏览器访问编译器返回的地址。
也可以使用其他工具(phpstudy等)搭建服务器,或者远程服务器的地址。
![在这里插入图片描述](https://img-blog.csdnimg.cn/58cf87ede53049c7a0b429fc6854f710.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA56iL5bqP5ZGY5LqM54uX,size_17,color_FFFFFF,t_70,g_se,x_16)
浏览器模拟器测试和真机测试之间有一定差异,将不符合预期的功能进一步进行调整。
扩展
远程调试工具 – vorlon.js
Vorlon.JS是为JavaScript所设计的远程调试测试工具(需要node环境)。它可以在移动设备上加载调试JavaScript代码。
使用时Vorlon.JS客户端仅需添加一个script标签。
![在这里插入图片描述](https://img-blog.csdnimg.cn/5c028ca4e45349d5aac4a1619f69ed3c.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA56iL5bqP5ZGY5LqM54uX,size_20,color_FFFFFF,t_70,g_se,x_16)
多终端调试工具 – browsersync
Browsersync省时的浏览器同步测试工具(需要node环境),能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面。
![在这里插入图片描述](https://img-blog.csdnimg.cn/9798796eea2441d1bbd1e1e12dc1e849.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA56iL5bqP5ZGY5LqM54uX,size_20,color_FFFFFF,t_70,g_se,x_16)