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 - 使用集成终端而不是调试控制台进行调试/启动