07移动调试和终端检测

Posted mingliangge

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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("这不是移动端"
}

 

以上是关于07移动调试和终端检测的主要内容,如果未能解决你的问题,请参考以下文章

VSCode - 使用集成终端而不是调试控制台进行调试/启动

VSCode自定义代码片段——cli的终端命令大全

VSCode自定义代码片段4——cli的终端命令大全

检测终端类型

apache与nginx在移动终端访问是的rewrite配置

如何使用模块化代码片段中的LeakCanary检测内存泄漏?