精华内容
下载资源
问答
我要提问
  • 前端——移动端真机调试利器
    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

    调试工具
    更多相关内容

  • 分享移动端真机调试几种方法(更新中)

     2020-11-21 15:11:27
    移动端前端开发经常会遇到在模拟器下没问题。一到真机就会各种问题，比如说微信内部调试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

    收起
    展开全文

  • h5移动端开发中配置真机测试

     2022-01-13 15:05:56
    在前端开发过程中，时常遇到移动端需求。若是每次部署完成后再查看开发效果，可能过于费时费力，因而需要可直接完成真机测试的配置 方法 一：查询电脑本地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

    收起
    展开全文
    vue.js swift

  • 干货！移动端真机调试指南，对调试说easy

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

    大厂技术  高级前端  Node进阶

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

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

    前言

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

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

    1、alert大法

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

    2、抓包工具Charles、Fiddler

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

    3、vConsole、eruda等调试库

    这个方法需要在页面中插入一段 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

    跨平台、抓包、 DOM、Console、Network 等，功能非常强大。查看文档[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

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

    收起
    展开全文
    python java 编程语言 chrome

  • web移动端真机调试工具

     2021-03-19 11:29:35
    web移动端真机上调试的两种工具： 1. vconsole 直接在html页面中引入vConsole的JS文件 <script src="vconsole.min.js"></script> <script> // 初始化vConsole var vConsole = new VConsole...
    收起
    vconsole eruda 调试工具

  • web前端移动端项目测试的几种方法

     千次阅读 2016-11-29 15:07:09
    web前端移动端项目测试的几种方法 本人只是个做前端刚刚半年的小白 技术还不熟练 见识也不够广 希望大家不喜勿喷 如果有不对的地方欢迎大家指出 我更加会努力的学习 提高自己的水平！   本人只是个做...
    收起
    测试

  • whistle 真机调试移动端页面（移动端页面适配不同型号手机和不同浏览器调试 支持跨平台调试iOS Android）

     2020-10-15 17:08:55
    在前端页面开发过程中经常遇到真机页面与PC上的Chrome浏览器调试器不一致，例如iPhone上的Safari浏览器、微信自带浏览器等自带的底部导航栏无法在PC上的Chrome浏览器上模拟。 在真机上调试页面又无法查看页面文档...
    收起
    ios android

  • Mac端调试iphone移动端网页

     2021-06-13 03:27:55
    打开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 ...
    收起

  • 移动Web(4)使用谷歌模拟器调试移动端网页, 移动适配, 媒体查询, Less语法

     2022-03-20 19:29:44
    l PC端网页和移动端网页的有什么不同？ l PC端网页和移动端网页的有什么不同？ Ø PC屏幕大，网页固定版心 Ø 手机屏幕小， 网页宽度多数为100% l 如何在电脑里面边写代码边调试移动端网页效果？ Ø 谷歌模拟器 PC...
    收起
    css html5

  • 移动端真机上样式失效问题解决方案之deep的深入理解

     千次阅读 2020-06-19 21:48:50
    这篇文章主要讲述由于**嵌套/deep/**的错误用法而导致的移动端真机样式失效问题，
    收起
    html css html5 css3

  • 如何快捷方便的进行移动端真机调试？

     千次阅读 2020-07-30 12:10:39
     对于我们写的移动端代码，在谷歌浏览器中的手机模拟器中还是有很多地方不同于真机调试的，那么对于这个情况，我们还是需要将自己所写的移动端代码进行真机调试，对于真机调试，我看到很多编辑器还是需要下载插件...
    收起

  • 移动端调试痛点？——送你五款前端开发利器

     2018-08-20 20:14:28
    之所以写这个总结，还要从上周的一次移动端项目的 debug 说起。那天，测试小姐姐拿着自己的 iphone6s 过来找我，说页面打不开。我想：这怎么可能，我手机里挺好的呀，Chrome调试工具也没报错呀！就把她手机拿...
    收起

  • 移动端前端开发调试

     千次阅读 2015-11-18 00:02:59
    由此可见，掌握移动端的前端开发和测试是非常有必要的。 本文只介绍与调试有关的内容，至于其他移动端开发知识（技巧、坑）太多太大，推荐 Mars 移动前端开发知识库。这个项目很久没有大动静了，欢迎大家猛烈关注...
    收起

  • 前端自适应——移动端右侧出现一列白条

     2020-07-31 17:20:00
    例如我在电脑端模拟手机测试时显示白条消失，但拿真机测试，白条依旧存 在。 方法二：给外层的div包裹器设置overflow：hidden 原理：因margin，padding等设置的问题，其子元素可能部分超出了屏幕的显示范围，故而o
    收起
    html css

  • 我走过最长的路，就是移动端播放视频的套路

     千次阅读 2022-02-21 17:23:29
    一、问题描述 在一个风和日丽，且UAT验收的下午，业务来了，她说：这里加个需求吧 具体的需求很简单：上传视频、展示视频、可预览、全屏播放。 你以为一个video就能搞定？...真机调试发现安卓部分机型不允许视
    收起

  • H5在iphone移动端如何实现真机调试

     千次阅读 2019-03-28 17:29:32
    最近公司要实现苹果移动端和H5的交互，因为平时用H5的不多，对iOS的比较熟悉，用H5的界面出问题就定位不出问题出在原生端还是H5端。应运而出iphone真机调试H5界面。 设置iphone 1.设置-->safari--->高级--&...
    收起

  • iphone 媒体查询方式与chrome真机模拟不一致的原因

     2017-10-19 10:33:00
    为什么在Chrome Emulation模拟手机页面和真机预览效果不一致？ 以前觉得不外乎两个原因： 1.某些机型或浏览器对一些CSS属性不支持。 2.某些设备不支持12px以下字体。 今天要补充的第3个原因是对于iPhone手机还...
    收起

  • Web前端浏览器真机调试

     2019-02-26 20:04:29
    写前端页面的时候，移动端页面开发需要模拟触摸事件，在电脑上操作不太方便，使用物理机可以操作起来会更舒服。 但是在使用物理机触摸屏幕的时候，调试起来有有点不太方便，好在谷歌浏览器给我们提供了真机调试的...
    收起

  • 前端课程视频列表-新增移动端开发基础【2020年8月15日】

     千次阅读 2020-04-28 15:53:30
    sass2-webstorm中sass的配置 sass3-sass文件整合 sass4-注释 sass5-变量 sass6-嵌套 sass7-混合器 sass8-for和each循环 sass9-颜色加深、减淡函数 移动端开发基础： 移动端开发基础 1-模拟访问和真机访问移动端页面 ...
    收起
    javascript html5 css3

  • 解决移动端真机不能下拉滚动bug

     千次阅读 2018-03-15 10:42:00
    在近期的移动端开发中，发现浏览器中调试可以正常滚动，而在真机中却不能滚动了，这是为什么呢？？? 总结了一下主要有一下两方面：css的设置和js的设置 1.之前有设置css的原因，下面分先说css的问题，主要排查...
    收起

  • 前端学习(二十五）移动端（笔记）

     2018-09-03 16:48:00
    移动端 手机、pad、watch、电视 ------------------------------------------------- 移动端和pc端的写法一样。只不过更加注意尺寸。 移动端测试 1.浏览器模拟手机 仅供参考 2.真机测试 写移动端必须加viewport ...
    收起

  • 【前端】移动端 body 高度为100vh 时，实际高度超过了视窗高度。

     2021-06-16 12:54:17
    在手机端设置 height:100vh 时，在 Chrome 模拟是正常的实际真机浏览的时候 100vh 的高度会超过窗口的实际高度，并显示滚动条。* {padding: 0;margin: 0;border: 0;outline: 0;box-sizing: border-box;}...
    收起

  • vue项目打包做app模拟真机测试 无法请求后台服务接口（axios配置）

     2021-04-14 18:12:58
    vue项目打包做app模拟真机测试 无法请求后台服务接口 背景：本地的测试使用的是反向代理，可以不用管目标地址问题，但是打包成apk测试却不可以，需要使用目标地址，而且在开发的代码中无法实现跨域，打包后是找不到...
    收起

  • 使用scrollTop失效并一直为0（移动端 手机 真机）

     千次阅读 2020-10-13 14:49:13
    移动端使用scrollTop失效并一直为0 问题 在浏览器的仿真界面中，scrollTop 数值正常，可以正常显示。但是在真机上面 scrollTop的值一直为 0 不发生变化。 解决 html与 body 的 height 不要设置为 100%。设置为 min...
    收起
    javascript html

  • chrome上的模拟移动端和真实微信浏览器的差异

     2016-11-08 15:37:02
    如图，在chrome上运行的好好的，页面显示非常完整，但是到了微信上就成了这鸟样。。。代码丝毫都没动过。求大神指点一二![图片说明](https://img-ask.csdn.net/upload/201611/08/1478619539_825229.png)!...
    收起
    html5

  • 移动端真机调试实战经验

     2017-11-09 21:21:29
    前言在开发中前端免不了要进行移动端的开发，然而在电脑上看的样式和手机上还是有一定的差距的，因为手机上有顶部的状态栏和底部的菜单栏，特别是在qq内置浏览器中打开，差距还是蛮大的，所以在chrom中模拟手机显示...
    收起
    调试

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 704
精华内容 281
热门标签
关键字：

真机模拟前端移动端