07、移动调试和终端检测

浏览器调试

一般通过chrome浏览器的控制台

真机调试

1、需要电脑安装集成环境的软件，如phpstudy、xampp等等

phpstudy地址：https://www.xp.cn/

2、运行环境，将移动端网站放到www文件夹里

3、获取电脑ip，在手机端输入ip及对应的文件夹访问

远程调试工具Vorlon.js

//作用：让移动端拥有控制台

安装运行

1、用node.js安装：

cnpm install -g vorlon

2、完成后直接运行vorlon，

vorlon

3、当看到这两行代码，说明成功了

2020-3-18 11:1:26 - info:    Vorlon.js PROXY listening at 0.0.0.0:5050
2020-3-18 11:1:26 - info:    Vorlon.js SERVER listening at 0.0.0.0:1337

使用

1、电脑打开vorlon控制台。需要用到上面的最后一个端口，浏览器地址栏输入

localhost:1337
//或
127.0.0.1:1337
//或
本机ip:1337
//访问到vorlon

2、在需要调试的网站页面里加入script，如

<script type="text/javascript" src="http://192.168.0.104:1337/vorlon.js"></script>
//  http:// 本机ip:vorlon端口 / vorlon.js

3、打开phpstudy等工具，将网站塞到www里面。手机连接到电脑同一个局域网。

4、手机通过phpstudy环境打开页面，即

http://192.168.0.104/vorlontest/
// http://电脑ip/网站文件夹

5、只要手机打开网页，电脑vorlon页就会出现控制台

多终端调试工具Browsersync

//监听某些文件，只要文件修改就自动刷新，且所有连接到的设备都同步操作

//不需要phpstudy等集成环境就能通过ip访问项目

官网：https://www.browsersync.io/

安装运行

1、node.js安装

cnpm install -g browser-sync

2、装完后在项目文件夹打开cmd，运行

browser-sync start --server --files="*"
//表示监听该文件夹下所有的文件
browser-sync start --server --files="css/*.css,js/*.js"
//表示监听css目录下的所有css文件，js目录下的所有文件

使用

1、运行成功后会自动打开目录下的网站

2、用户可通过  电脑ip:3000  访问该项目。如

http://192.168.0.104:3000/
//端口默认是3000

3、通过以上地址访问到的网站所有操作同步

4、端口3000是网站，端口3001是browser-sync的设置工具

终端检测

//检测出移动端就跳转移动端，pc端就跳转pc端。若不跳转还可以进行按需加载

//在BOM基础讲过

navigator对象>userAgent属性

var mobile = navigator.userAgent.match(/andriod|iphone|ipad|ipod/i);
//如果navigator.userAgent里面含有android的一些字符串，那就是移动端

if(mobile){
    console.log("这是移动端");
}else{
    console.log("这不是移动端"
}