精华内容
下载资源
问答
  • 前端——移动端真机调试利器
    2018-10-31 21:04:31

    vconsole
    使用方法:

    <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
    <script>
      // 初始化
      var vConsole = new VConsole();
      console.log("hello")
    </script>
    

    在手机界面上会出现vconsole标识,点击可以看到打印的信息

    其他:https://juejin.im/post/5b72e1f66fb9a009d018fb94

    更多相关内容
  • 移动端前端开发经常会遇到在模拟器下没问题。一到真机就会各种问题,比如说微信内部调试h5。真机调试没有像PC 端一样方便,需要借助各种工具来实现,下面就列举下,我在项目中常用的一些调试方法。 WIN系统下 安卓 ...


    移动端前端开发经常会遇到在模拟器下没问题。一到真机就会各种问题,比如说微信内部调试h5。真机调试没有像PC 端一样方便,需要借助各种工具来实现,下面就列举下,我在项目中常用的一些调试方法。

    WIN系统下

    安卓

    安卓需要在 开启开发者模式。国内各种定制系统的开启方法不一致。具体的请使用google 或者 baidu 查询。

    以原生android11 系统为例:

    设置  -> 关于手机 -> 版本号  点击5次  输入PIN 密码 即可开启`
    
    设置 ->  系统 -> 高级 -> 开发者选项 -> USB 调试  开启。
    

    数据线连接安卓手机 -> 允许USB 调试

    进行调试前,前完成以上准备。

    浏览器场景

    使用工具chrome inspect, 这是一个调试的神器,能解决大部分场景的调试问题。还可以配合其他工具应对一些特殊的场景。
    常用的浏览器webkit 内核浏览器都可以使用此种方法。

    打开手机浏览器输入网址打开网页

    打开电脑 Chrome 地址栏输入chrome://inspect
    在这里插入图片描述
    点击inspect

    在这里插入图片描述
    控制台可以正常开始调试了(模拟器会屏蔽一些用户操作交互,比如点击事件,需要你操作真机,模拟器会同步的)

    webview 场景(X5内核类)

    当然还有些场景是在APP内部比如说是微信内部的网页调试,或者是hybrid应用开发(X5内核类)。

    需要工具 : TBS Studio. 腾讯出的一款专门调试X5 内核的工具支持网页 和 小程序。安装后按提示进行调试。第二步会检测到其他的APP,要多取消试几次才能找到你要的。
    在这里插入图片描述

    微信打开网页:

    在这里插入图片描述

    在这里插入图片描述
    一样的inspect 的

    在这里插入图片描述

    IOS

    ios 移动端调试原则上建议直接使用mac safari 调试简单易操作。

    第一步安装依赖

    在windows 上调试的话要依赖第三方的工具。具体准备如下:

    1. iTunes(微软商店)
    2. ios-webkit-debug-proxy(需要使用scoop安装)
    3. remotedebug-ios-webkit-adapter(npm安装)
    4. chrome

    第二步 iphone 开启 Web Inspector

    设置位置
    设置 - Safari浏览器 - 高级 - 网页检查器 开启

    第三步 连接iphone

    通过USB连接电脑,启动iTunes可能会提示“信任此计算机”对话框。信任就可以了。

    第四步 启动ios-webkit-debug-proxy

    命令行输入

    remotedebug_ios_webkit_adapter --port=9000
    

    第五步 打开Chrome DevTools

    打开chrome浏览器地址栏输入chrome://inspect/#devices, 在手机safari打开网页,等待片刻就可以在chrome devTools 看到的网页了,点击下方的inspect 即可。

    MAC系统下

    安卓

    IOS

    第一步 开启mac safari 的开发菜单

    在这里插入图片描述

    第二步 连接
    打开mac电脑的safari 浏览器,

    跨平台通通用JS 注入类

    此类都是通过插入dom, 模拟调试工具,使用起来也比较简单,引入js, 初始化就可以了。

    Vconsole

    现在用的最多的应该是腾讯的Vconsole, 小程序内置的也是这个,基本的功能都可有。但是有时候Network查看响应数据滚动会有一下bug。Dom 面板查看dom树不好用

    支持插件
    Vconsole 文档地址

    Eruda

    功能更齐全一点,但是资源会更大一点,DOM Network 的使用体验更好。还有一些开发的功能,显示所有边框,刷新页面(APP 内调试方便),一些H5 新接口的测试等等
    支持插件,扩展更多功能
    Eruda

    weinre

    weinre这个比较早了,最早的微信网页调试工具内置的调试工具就是这个。设置相对麻烦,但是可以通过局域网连接电脑调试手机页面。这个很久不维护了,而且chrome://inspect, 体验比这个好太多了。
    weinre

    拓展

    Electron 应用调试方法

    移动端抓包实践

    常见问题

    1. Mac os (big sur 11.4) Safari (11.4.1)网页检查器调试只显示控制台 来源 审核菜单。

    在这里插入图片描述
    解决方法:safari版本有问题需要下载最新的预览版本 Safari Technology Preview

    参考链接: Safari Web Inspector tabs are missing

    展开全文
  • 前端开发过程中,时常遇到移动端需求。若是每次部署完成后再查看开发效果,可能过于费时费力,因而需要可直接完成真机测试的配置 方法 一:查询电脑本地IP地址 1:ctrl/window+r输入cmd回车,打开命令提示符; 2...

    前言

    在前端开发过程中,时常遇到移动端需求。若是每次部署完成后再查看开发效果,可能过于费时费力,因而需要可直接完成真机测试的配置

    方法

    一:查询电脑本地IP地址

    1:ctrl/window+r输入cmd回车,打开命令提示符;
    2:输入ipconfig,查看本地ip,具体如下

    在这里插入图片描述

    二:修改config

    修改config中的配置,将host改为本地ip,具体如下:
    在这里插入图片描述

    三:手机访问链接

    1:将手机与电脑连接同一无线
    2:重启项目,生成链接,具体如下图:
    3:至此即可完成所有配置,手机端访问network即可
    在这里插入图片描述

    其他方式

    借用抓包工具:spy-debugger

    展开全文
  • 大厂技术高级前端Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群前言这么快就年终了,回顾2021年发现没干啥事,换了个城市,换了份工作,新公司新坑,现...

    大厂技术  高级前端  Node进阶

    点击上方 程序员成长指北,关注公众号

    回复1,加入高级Node交流群

    前言

    这么快就年终了,回顾2021年发现没干啥事,换了个城市,换了份工作,新公司新坑,现在主做Hybrid APP,那么年终就总结下移动端的调试方案来划划水吧🐰

    移动端的真机调试,总结了下就大致就2种方法,要不就是网页面注入js脚本,劫持console、网络请求等,比如: vConsoleeruda等调试库。要不就是使用抓包工具劫持浏览器与服务器的请求,比如:Charles,下面分享下我使用过的方法。

    1、alert大法

    这有啥好说的,(⊙﹏⊙)
    推荐指数0颗星

    2、抓包工具CharlesFiddler

    平时只用抓取各种网络,需要设置手机的wifi代理
    推荐指数2颗星

    3、vConsoleeruda等调试库

    这个方法需要在页面中插入一段 JS 脚本,这里以vConsole为例,导入vconsole.min.js,并实例化,注实例化代码最好放在头部,以便能一开始就能劫持内容:

    <script src="./vconsole.min.js"></script>
      <script>
        // 初始化
        new VConsole();
      </script>
    复制代码

    npm i vconsole
    复制代码
    import VConsole from 'vconsole';
    
    new VConsole();
    复制代码
    3a5ad14571c5f7f35118ae32a847544e.png
    image.png
    1beb74df26ec40c4ddc432eb8b738a9d.png
    image.png

    优点:方便,可查看console、network、elements等;
    缺点:css调试不友好,console会劫持consloe的打印,不能定位到打印的代码位置,需要额外加载js脚本

    推荐指数3颗星

    4、Chrome + Android

    首先在chrome安装ADB Plugin
    chrome中输入 chrome://inspect
    通过数据线连接你的电脑和 Android 手机,打开USB的调试模式
    就可以在上面的页面中看到自己的设备:

    fc545668e9058bf0d51eb9b4e77f5734.png
    image.png

    点击inspect

    然后就可以欢乐地调试了,和使用谷歌调试pc端一样,可惜ios不适用 推荐指数4颗星

    5、Mac + IOS + Safari

    打开手机点击设置 -> Safari浏览器 -> 高级

    打开JavaScript和web检查器

    cea1c74a458e6a9371d50087be9509aa.png
    image.png

    打开手机上的Safari,输入一个网址www.baidu.com[1]

    在Mac上打开Safari,点击开发-iPhone lh-www.baidu.com,[2] 就可以看到以下页面

    c0d81870f4e303fafca7d7039efd67d0.png
    image.png

    注:app的webview也可以使用这个方法,只需要让客户端同学打包个debug版本

    只适用ios,而且需要mac,而且有个缺点,没有打开调试窗口时,webview的网络请求和console都不会记录,webview关闭,调试窗口会直接关闭。推荐指数4颗星

    6、whistle

    安卓、ios都能调试,跨平台、代理抓包、H5调试、debugger、请求劫持、HTTPS支持、WebSocket数据捕获等,功能非常强大。weinre是用node编写的,使用npm来进行安装
    安装:

    npm install -g whistle
    复制代码

    运行:

    w2 start
    复制代码
    cc27982bd986848297f25f32f83831c8.png
    image.png

    跨平台、抓包、 DOMConsoleNetwork 等,功能非常强大。查看文档[3]
    推荐指数5颗星

    7、Mobile Debug

    功能和whistle非常相似,我严重有理由怀疑Mobile Debug的开发者就是在whistle的基础上进行开发的。

    `Mobile Debug`官网下载地址[4]

    下载安装后

    bc77b4e799920315beb3d7dfb76842be.png
    image.png

    抓包:

    b108ff53e6e4c0af3131ae918856de65.png
    image.png

    网页调试:

    a7030bfbb36d6b58ed2344f9c19ecb86.png
    image.png

    通过配置劫持规则将线上出bug的文件(如js)劫持到本地修改并调试:

    656a81fb4a18fc6575491dc056abd0d8.png
    image.png

    需要把手机在同一个局域网wifi设置代理,便可使用,https需要增加安装证书步骤。

    推荐指数5颗星

    最后

    3和7是我现在主要使用的方法,用这就能完全解决移动端的调试问题。

    来自:咸鱼翻身翻两次

    https://juejin.cn/post/7041049806562656293

    Node 社群

    我组建了一个氛围特别好的 Node.js 社群,里面有很多 Node.js小伙伴,如果你对Node.js学习感兴趣的话(后续有计划也可以),我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。

    3635626a786fbafa67b48cbe061b9dd4.png

       “分享、点赞、在看” 支持一波👍

    展开全文
  • web移动端真机上调试的两种工具: 1. vconsole 直接在html页面中引入vConsole的JS文件 <script src="vconsole.min.js"></script> <script> // 初始化vConsole var vConsole = new VConsole...
  • web前端移动端项目测试的几种方法

    千次阅读 2016-11-29 15:07:09
    web前端移动端项目测试的几种方法 本人只是个做前端刚刚半年的小白 技术还不熟练 见识也不够广 希望大家不喜勿喷 如果有不对的地方欢迎大家指出 我更加会努力的学习 提高自己的水平!   本人只是个做...
  • 前端页面开发过程中经常遇到真机页面与PC上的Chrome浏览器调试器不一致,例如iPhone上的Safari浏览器、微信自带浏览器等自带的底部导航栏无法在PC上的Chrome浏览器上模拟。 在真机上调试页面又无法查看页面文档...
  • 打开chrome的移动端模拟,但是模拟上也是好的,所以就只能开启真机调试了。1.配置在iOS设备上打开允许调试:设置→Safari→高级→打开”web检查器“在MAC上打开Safari的开发菜单:顶部菜单栏“Safari”→偏好设置→...
  • 几种模拟移动端设备的方法

    千次阅读 2019-10-31 23:06:13
    移动端设备的开发测试同学都知道,兼容性是个很头疼的问题,测试或者复现兼容问题时借设备也是很痛苦的事情。这里告诉大家三种简单的模拟手机终端的方法。
  • 移动端h5调试方法总结

    千次阅读 2020-05-21 18:18:15
    至于本地前端服务对 api 请求可以通过配置 webpack proxy 转发到后台去。不太明白的同学请另行查询 webpack proxy 相关用法。 方法四:IOS模拟器调试和查看各机型表现 1. 打开 MacOs 的 Terminal,命令行执行 open ...
  • l PC端网页和移动端网页的有什么不同? l PC端网页和移动端网页的有什么不同? Ø PC屏幕大,网页固定版心 Ø 手机屏幕小, 网页宽度多数为100% l 如何在电脑里面边写代码边调试移动端网页效果? Ø 谷歌模拟器 PC...
  • 这篇文章主要讲述由于**嵌套/deep/**的错误用法而导致的移动端真机样式失效问题,
  •  对于我们写的移动端代码,在谷歌浏览器中的手机模拟器中还是有很多地方不同于真机调试的,那么对于这个情况,我们还是需要将自己所写的移动端代码进行真机调试,对于真机调试,我看到很多编辑器还是需要下载插件...
  • 之所以写这个总结,还要从上周的一次移动端项目的 debug 说起。那天,测试小姐姐拿着自己的 iphone6s 过来找我,说页面打不开。我想:这怎么可能,我手机里挺好的呀,Chrome调试工具也没报错呀!就把她手机拿...
  • 移动端前端开发调试

    千次阅读 2015-11-18 00:02:59
    由此可见,掌握移动端前端开发和测试是非常有必要的。 本文只介绍与调试有关的内容,至于其他移动端开发知识(技巧、坑)太多太大,推荐 Mars 移动前端开发知识库。这个项目很久没有大动静了,欢迎大家猛烈关注...
  • 例如我在电脑端模拟手机测试时显示白条消失,但拿真机测试,白条依旧存 在。 方法二:给外层的div包裹器设置overflow:hidden 原理:因margin,padding等设置的问题,其子元素可能部分超出了屏幕的显示范围,故而o
  • 一、问题描述 在一个风和日丽,且UAT验收的下午,业务来了,她说:这里加个需求吧 具体的需求很简单:上传视频、展示视频、可预览、全屏播放。 你以为一个video就能搞定?...真机调试发现安卓部分机型不允许视
  • H5在iphone移动端如何实现真机调试

    千次阅读 2019-03-28 17:29:32
    最近公司要实现苹果移动端和H5的交互,因为平时用H5的不多,对iOS的比较熟悉,用H5的界面出问题就定位不出问题出在原生端还是H5端。应运而出iphone真机调试H5界面。 设置iphone 1.设置-->safari--->高级--&...
  • 为什么在Chrome Emulation模拟手机页面和真机预览效果不一致? 以前觉得不外乎两个原因: 1.某些机型或浏览器对一些CSS属性不支持。 2.某些设备不支持12px以下字体。 今天要补充的第3个原因是对于iPhone手机还...
  • 前端页面的时候,移动端页面开发需要模拟触摸事件,在电脑上操作不太方便,使用物理机可以操作起来会更舒服。 但是在使用物理机触摸屏幕的时候,调试起来有有点不太方便,好在谷歌浏览器给我们提供了真机调试的...
  • sass2-webstorm中sass的配置 sass3-sass文件整合 sass4-注释 sass5-变量 sass6-嵌套 sass7-混合器 sass8-for和each循环 sass9-颜色加深、减淡函数 移动端开发基础: 移动端开发基础 1-模拟访问和真机访问移动端页面 ...
  • 解决移动端真机不能下拉滚动bug

    千次阅读 2018-03-15 10:42:00
    在近期的移动端开发中,发现浏览器中调试可以正常滚动,而在真机中却不能滚动了,这是为什么呢??? 总结了一下主要有一下两方面:css的设置和js的设置 1.之前有设置css的原因,下面分先说css的问题,主要排查...
  • 移动端 手机、pad、watch、电视 ------------------------------------------------- 移动端和pc端的写法一样。只不过更加注意尺寸。 移动端测试 1.浏览器模拟手机 仅供参考 2.真机测试 写移动端必须加viewport ...
  • 在手机端设置 height:100vh 时,在 Chrome 模拟是正常的实际真机浏览的时候 100vh 的高度会超过窗口的实际高度,并显示滚动条。* {padding: 0;margin: 0;border: 0;outline: 0;box-sizing: border-box;}...
  • vue项目打包做app模拟真机测试 无法请求后台服务接口 背景:本地的测试使用的是反向代理,可以不用管目标地址问题,但是打包成apk测试却不可以,需要使用目标地址,而且在开发的代码中无法实现跨域,打包后是找不到...
  • 移动端使用scrollTop失效并一直为0 问题 在浏览器的仿真界面中,scrollTop 数值正常,可以正常显示。但是在真机上面 scrollTop的值一直为 0 不发生变化。 解决 html与 body 的 height 不要设置为 100%。设置为 min...
  • 如图,在chrome上运行的好好的,页面显示非常完整,但是到了微信上就成了这鸟样。。。代码丝毫都没动过。求大神指点一二![图片说明](https://img-ask.csdn.net/upload/201611/08/1478619539_825229.png)!...
  • 前言在开发中前端免不了要进行移动端的开发,然而在电脑上看的样式和手机上还是有一定的差距的,因为手机上有顶部的状态栏和底部的菜单栏,特别是在qq内置浏览器中打开,差距还是蛮大的,所以在chrom中模拟手机显示...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 704
精华内容 281
关键字:

真机模拟前端移动端