移动端调试方法汇总

一：Android手机 + chrome（真机调试）

参考的博客-掘金

一台Android手机，一台电脑，一根Android数据线

操作步骤：

1、在Android手机上安装chrome浏览器
2、打开手机的开发者模式（开发人员选项——“USB调试”打开）

3、将手机与电脑通过USB线连接，弹出对话框“是否允许USB调试”，选择“确定”

遇到的问题：
问题一：连接电脑显示 “无法识别的USB”
解决方法：参考的链接
1. 在控制面板打开设备管理器
2. 展开通用串行总线控制器，右击设备选择卸载， 每个设备重复以上操作，重启计算机系统会自动安装usb控制器
（这里我选择了unknown的卸载了，拔掉USB线，然后重启电脑）
3.重启电脑之后，重新插上USB线，会自动安装驱动

问题二：如果连不了，可以下载360手机助手连接一下手机。

4、打开手机上的chrome浏览器，并进入需要调试的页面（例如：进入百度搜索内容）
5、打开PC端chrome浏览器，在地址栏中输入chrome://inspect/，进入调试页面，此时，我们发现，chrome检测到了我们的手机

6、点击inspect 会弹出chrome调试工具，然后就可以在电脑上调试真机了

注意事项：
在上面第6步的时候，点击inspect后，弹出的面板可能是一片空白，这是因为，首次使用该功能时，需要连接外网（翻墙），初始化后，成功显示了调试工具的面板后，以后就不需要翻墙了。

二：如果想在手机端中，查看console的内容，看有没有报错之类的。可以使用vConsole

在页面中加入以下代码：

<script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.3.3/vconsole.min.js"></script>
<script>
    var vConsole = new VConsole();
</script>

加入之后，在移动端页面就可以看到console.log打印出来的结果了

判断是否为移动端设备

function isMobile(){
  if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    return true;
  }else {
    return false;
  }
}

判断是否为PC端

function IsPC() {
     var userAgentInfo = navigator.userAgent;
     var Agents = ["Android", "iPhone",
                 "SymbianOS", "Windows Phone",
                 "iPad", "iPod"];
     var flag = true;
     for (var v = 0; v < Agents.length; v++) {
         if (userAgentInfo.indexOf(Agents[v]) > 0) {
             flag = false;
             break;
         }
     }
     return flag;
 }

移动端设备旋转设备为横屏时，刷新页面

var mobile = isMobile();
if(mobile) {
    window.addEventListener("orientationchange", function() {
        //横屏，刷新页面
        if(window.orientation == 90) {
            window.top.document.location.reload();
        }
    }, false);
}

注：
如果是刷新当前页面，直接Window.location.reload();就可以。
如果是使用iframe嵌套页面的，要往上一层去刷新，window.top.document.location.reload();

使用window.top.document.location.reload();的原因，是使用iframe嵌套页面的：（蓝色区域为子页面嵌套在里面）

判断是否移动设备是否为横屏

//判断是否移动设备是否横屏状态
function isLandscape() {
	if (window.orientation === 180 || window.orientation === 0) { 
		return false;
	} 
	if (window.orientation === 90 || window.orientation === -90 ){ 
		return true;
	}  
}

获取iframe父子页面之间获取元素

【父找子】
//从父级找到iframe，然后找contents
var inputs = $(".tab-pane.active iframe").contents().find("input");
【子找父】
//从子页面找到parent.document,然后找对应元素
$(window.parent.document).find(".content-wrapper").offset({top:0});

处理移动端页面，软键盘弹起导致页面底部空白

实际上，页面内容是在的，只是被挡住了，所以要将最外层的页面高度设置到跟设备一样高

function setOffset() {
  //是否为移动端
  var mobile = isMobile();
  //是否是横屏状态
  var landscape = isLandscape();

  //移动端横屏状态 监听输入框输入状态
  if(mobile && landscape) {
    var flag = true;
    var inputs = $(".tab-pane.active iframe").contents().find("input");

    inputs.on("compositionstart", function() {
      flag = false;
    });
    inputs.on("compositionend", function() {
      flag = true;
    });
    inputs.on("keyup", function() {
      if(flag) {
        //设置iframe的offsetTop
        $(window.parent.document).find(".content-wrapper").offset({top:0});
        $(document).find(".permiss").offset({top:143});

        【解决问题的主要代码】
        //将最外层的页面高度设置到跟设备一样高

        //获取屏幕高度
        var bodyHeight = $('body')[0].clientHeight;
        $(window.parent.document).find(".content-wrapper").css("height", bodyHeight + "px");
        $(window.parent.document).find(".content-wrapper").css("top", "0px");
      }
    });
  }

}

赏

谢谢你请我吃糖果

支付宝

微信

• 本文作者： LQbank
• 本文链接： http://example.com/2020/07/17/移动端调试方法汇总/
• 版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！