老师,browsersync的手机端调试是如何实现的呢?
来源:2-4 多终端同步工具Browsersync
多盐少糖
2021-09-03 13:43:46
问题描述:
是配合vorlon实现移动端调试呢还是,browsersync自己就可以完成移动端调试,在移动端触发的时电脑端同步从而实现控制台打印呢,试了一下,使用browsersync在移动端触摸的时候在电脑端页面没有打印出东西来
相关代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
padding-top: 50px;
padding-left: 50px;
}
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="box"></div>
<!-- <script src="./js/hummer.js"></script> -->
<!-- <script src="http://192.168.101.5:1337/vorlon.js"></script> -->
<!-- <script src="http://192.168.101.5:1337/vorlon.js"></script> -->
<script>
const box = document.getElementById('box');
// const hammertime = new Hammer(box);
// hammertime.on('')
box.addEventListener('touchstart',function(ev) {
console.log(ev.touches.length)
console.log(ev.targetTouches.length)
},false)
box.addEventListener('touchmove',function(ev) {
console.log(ev.changedTouches.length)
},false)
</script>
</body>
</html>
1回答
同学你好,解答如下:
1、browsersync不需要配合别的插件使用,它自己就能实现多端同步。
2、browsersync是多端同步工具,它的作用是自动刷新多个平台上的页面。比如我们在电脑和手机上访问了同一个页面,当修改代码后,它可以让手机和电脑上的页面同时自动更新(不需要手动更新)。它不能映射操作,即手指操作手机上的页面时,移动端控制台的结果不能映射到pc端电脑上。
vorlon可以做到一定程度的映射,但也不是所有操作都能映射,同学可以回顾一下上一节课。
祝学习愉快!
相似问题