zoukankan      html  css  js  c++  java
  • 真机上调试移动端的页面

    mac safri ios设备safri

    • 在手机里找到 设置 -> safari -> 高级 -> Web 检查器 ,打开此功能。
    • 用数据线连接到你的 Mac
    • 打开 Mac 下的 safari , 到偏好设置里,高级一栏最下部,勾选在菜单栏中显示“开发”菜单
    • 用手机 safari 访问一个网页,在Mac上的 safari 开发菜单里找到你的手机,二级菜单里找到这个网页

    做完这些,我们就进入了熟悉的 safari developer tools ,调试 css , js 网络请求等。

    调试webview

    iOS APP 里的 webview 同样支持远程调试,不过限制更多一点。这个 APP 必须是自己编译安装进手机的,也就是你必须要有 iOS 开发者账号。对于做 Hybrid APP 开发的来说,这不是什么难事,团队肯定有开发者账号。你需要做的是了解一点 iOS 开发基础,起码能自助把代码编译安装到你的手机。

    拥有授权证书的IOS开发者,然后把ios设备添加到授权文件里面,在连接上他的电脑,就可以给ios设备安装一个可以调试的包啦

     

    环境准备

    1.在pc上安装测试机的驱动,建议使用豌豆荚,安装各种机型驱动,非常方便。

    2.手机开启usb调试模式,由于安卓升级以及各大rom厂商的原因,开启的方式可能会有些不一样,有些被隐藏了,需要特殊操作后才显示出来,如果找不到,可以搜一下开启方法。

    3.usb数据线一根

    UC浏览器开发版

    1.adb tool。

    2.UC浏览器开发版本(apk)。

    3.usb数据线一根

    WIFI的调试方法,保证pc和手机在同一个网段,在PC上打开Chrome或Safari,在地址栏输入:手机IP + :9998,在手机端会弹出确认按钮,点击确认后,就可在pc上看到效果了

    Chrome

    1.翻墙。

    2.PC Chrome最新版

    3.安卓 Chrome最新版

    4.插线后,在chrome浏览器输入 chrome://inspect

    Firefox

    1.PC Firefox 15+

    2.Android Firefox 15+

    3.一根数据线

    4.adb驱动(UC浏览器那步已经安装过了)

    5.adb devices(查看连接的设备)

    6.adb forward tcp:6000 tcp:6000(本地开一个接口做代理接受数据)

    7.手机端Firefox点击菜单栏的”设置”->”开发者工具”,勾选”远程调试”。

    8.PC端Firefox打开about:config,设置devtools.debugger.remote-enabled为True

    9.接下来找到桌面端Firefox-菜单-工具-Web开发者-远程链接。保证端口号和上面开启的端口号一致就好了。

    Opera

    稍微麻烦一点,因为要装一些软件,上面参考链接上有软件的下载地址,以及对应的配置方法,配置完成后可以用pc端模拟器调试也可以用真机调试。

    1.打开pc opera control+shift+i 打开调试,点击右上角远程调试设置端口,在用模拟器输入opera:debug,链接端口,就可以了

    2.这个方法有些过时 打开新版的手机opera浏览器,输入opera:debug,里面讲解了调试方式,工具就是adb和pc chrome浏览器

    Weinre

    这个最厉害了,一次安装,可以调试手机端的所有浏览器

    1.windows安装 npm -g install weinre

    2.

    weinre --httpPort 8081 --boundHost -all-

    用这个打开8081调试端口

    3.浏览器打开 http://localhost:8081,会看到weinre的介绍信息

    4.<script src="http://localhost:8081/target/target-script-min.js#anonymous"></script>需要调试的页面加上这个脚本,需要将上面代码中的localhost替换为电脑ip,手机访问页面也可以

    可以在开发机上安装weinre,然后用nohup命令,让服务一直开启,可以通过一段Js,让那段script标签append到页面上,用手机访问网址,在电脑上打开相应的地址进行调试,

    #anonymous 这个可以换成自己的标识,这样多人调试的时候也不会混乱了。

    详细讲解

    vorlon

    基于 Node.js 和 Socket.IO 开发。

    调试css比较靠谱,其安装方法以及调试方式和Weinre比较类似,但是更容易定位问题,忽略内容,直观的都是dom结构

    1.安装 npm i -g vorlon

    2.运行 vorlon

    3.需要调试的页面上添加 <script src="http://localhost:1337/vorlon.js"></script> 这样一段标签

    4.浏览器访问 http://localhost:1337 就可以调试了

    同理,在开发机上安装vorlon ,使用forever命令,让服务一直在开发机运行,大大方便了touch真机调试

     

     

    参考链接

    http://cnbin.github.io/blog/2015/09/10/2015-zui-xin-ios-kai-fa-chuang-jian-zhen-ji-diao-shi-zheng-shu/

    http://blog.jobbole.com/68606/

  • 相关阅读:
    cache buffers chains latch
    freemarker自定义标签报错(七)
    freemarker自定义标签(三)-nested指令
    freemarker自定义标签(二)
    Buffer Cache 原理
    JavaScript去除日期中的“-”
    JavaScript替换HTML标签
    JavaScript获取地址栏中的参数
    JavaScript中的indexOf
    Java中的字符串拼接
  • 原文地址:https://www.cnblogs.com/lecheng/p/5917120.html
Copyright © 2011-2022 走看看