精华内容
下载资源
问答
  • 待续 一、调试工具 1、h5调试 2、小程序调试 二、抓包 1、windows下普通抓包 2、mac下普通抓包 3、单页面应用hash路由抓包 4、安卓7.0+版本下的app抓包

    一、调试工具

    1、h5调试

    • 推荐使用腾讯团队开发的vconsole,毕竟团队官方在维护,稳定性和安全性更有保证。
    • 官方文档:https://github.com/Tencent/vConsole
    • 经历了2020年整年没有更新,在2021年又重新开始了大量更新,直接上最新版吧,相对于老版本多了location的默认显示,再也不用手动输入location.href查看页面地址了。

    2、小程序调试

    • 小程序调试有官方内嵌的调试工具,也就是低配版的vconsole
    • 开启方式:首先需要小程序是开发版或体验版,然后点击右上角三个点,打开调试,重新打开小程序就能看到了。
    • 官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/usability/debug.html
    • 如果想在线上小程序打开调试,可以先在对应的开发版或体验版小程序里打开调试,然后再打开线上版小程序,就能看到调试工具了,这不是bug,是小程序官方承认了的,算是后门。
    • 小程序官方的调试工具很鸡肋,没有network日志,没有storage日志
    • 对于接口数据请求的日志建议还是自己封装一下打印出来,所有接口都打印出来有点凌乱,建议做个判断,只在接口异常的情况下再打印接口日志,正常情况下的可以局部打印,也可以配合抓包工具查看。

    二、移动端抓包

    1、charles

    charles是一款抓包工具,相比于fiddler凌乱的界面数据,charles更加清晰简洁,同时支持mac和windows。
    不过它本身是收费的,有30天试用,网上有很多破解版,也有注册码,破解版百度一搜就能找到。

    下面说一下安装完charles后的一些配置方式(v4.6.1):

    • 步骤一-获取电脑ip: 菜单栏 - Help - Local IP Address,这里是电脑本机ip地址

    • 步骤二-手机组成局域网: 手机和电脑连接同一网域组成局域网,打开手机连接的wifi高级设置,配置代理,代理改为手动,主机名填写电脑ip,端口默认8888,保存

    • 步骤三-手机安装证书: 手机打来浏览器输入chls.pro/ssl下载安装ca证书。

      • ios10+版本还需要在证书信任设置里信任一下安装的charles证书,具体方式:打开ios【设置】>【通用】>【关于本机】>【证书信任设置】,把刚才添加的证书后面的 Switch 打开。
      • android手机如果无法正常下载证书,也可以选择保存证书后手动安装。具体方式: charles菜单栏 - Help - SSL Proxying - Save Charles Root Certificate…,选择.cer格式保存在电脑上再传输给手机安装ca证书。
    • 步骤四-配置代理访问白名单: 菜单栏 - Proxy - Access Control Settings,点击Add,填写0.0.0.0/0,点击OK

    • 步骤五-配置https代理: 菜单栏 - Proxy - SSL Proxying Settings,勾选Enable SSL Proxying,左侧Include栏里点击Add,弹出的小窗里Host栏输入*,Port栏输入*,点击OK

    ok完成。

    2、spy-debugger

    spy-debugger是一个专门服务于移动端h5的调试插件。

    • 官方地址:https://github.com/wuchangming/spy-debugger
    • 具体使用方式参考官方文档教程,不再赘述了。
    • 需要注意手机配置手动代理时默认端口号是9888,手机安装证书方式的网址是http://s.xxx

    重点来了,spy-debugger相比于charles的优势是什么:

    • spy-debugger能抓取到spa单页面应用hash路由下的完整页面地址,包含#号后面的路由和参数,而charles抓取不到#号之后的地址内容。
    • spy-debugger能达到移动端vconsole工具的效果,能在电脑上显示调试页面的面板信息,包括elements页面元素、css样式、console日志、storage存储内容都能显示,对于线上bug的排查非常有用。
    • spy-debugger能修改页面elements元素和css样式,且页面能实时看到修改后的效果,样式bug排查利器。

    3、安卓7.0+版本下的抓包

    安卓7.0+的版本,app里默认会有安全限制,只信任系统证书,默认情况下是无法抓到包的。

    • 方案一: 在app里配置信任用户证书。
      配置文件:res/xml/network_security_config.xml

      <network-security-config>
          <base-config cleartextTrafficPermitted="true">
              <trust-anchors>
                  <certificates src="system" overridePins="true" /> <!--信任系统证书-->
                  <certificates src="user" overridePins="true" /> <!--信任用户证书-->
              </trust-anchors>
          </base-config>
      </network-security-config>
      
    • 方案二: 把ca证书安装到system系统证书目录里:

      • 需要手机提前获取完整root权限(需解锁system分区)
      • 系统证书的目录是:/system/etc/security/cacerts/
      • 每个证书的命名规则为:<Certificate_Hash>.<Number>
      • Certificate_Hash表示证书文件的 hash 值,Number是为了防止证书文件的 hash 值一致而增加的后缀
      • 证书的 hash 值可以由命令计算出来,把证书(.pem格式)保存在电脑上,在电脑终端输入openssl x509 -subject_hash_old -in <Certificate_File>,其中Certificate_File为证书路径,得到结果hash,将证书重命名为hash.0放入系统证书目录,修改权限为rw-r-r,即可正常抓包。
      • 无法使用openssl的可以百度win10安装openssl,按照教程安装,配置完环境变量后记得重新打开命令窗口操作。
      • 在这里插入图片描述

    我自己的手机是安卓,目前是用的最后这个方式,就是安装证书到系统目录,过程也是相当艰辛。。。


    参考链接:
    https://testerhome.com/topics/17746

    展开全文
  • 在Web开发过程中,对html页面进行开发和调试的时候都会用到浏览器提供的调试工具,小编我最常用的就是Chrome浏览器...在这里小编推荐一个移动端调试神器Eruda。Eruda 是一个专为手机网页前端设计的调试面板,类似 ...

    在Web开发过程中,对html页面进行开发和调试的时候都会用到浏览器提供的调试工具,小编我最常用的就是Chrome浏览器自带的开发者工具了,可以很方便的对JS代码进行断点调试,log也很方便。但是在移动端的浏览器上进行开发就没有这么方便了,不管是iOS的Safari还是Android的众多浏览器。在这里小编推荐一个移动端的调试神器Eruda。

    Eruda 是一个专为手机网页前端设计的调试面板,类似 DevTools 的迷你版,其主要功能包括:捕获 console 日志、检查元素状态、显示性能指标、捕获XHR请求、显示本地存储和 Cookie 信息、浏览器特性检测等等。

    Eruda的github地址: https://github.com/liriliri/eruda/blob/master/doc/README_CN.md

    废话不多说,我们直接上代码介绍Eruda的用法。使用Eruda有两种方法。

    1)通过CDN使用:

    直接在html页面中引入Eruda的JS文件

    2)通过npm安装:

    npm install eruda --save

    在页面中加载脚本:

    我一般使用第一种方式(比较懒,呵呵)。初始化Eruda之后在html界面上会出现一个半透明的齿轮按钮,点击一下就会弹出Eruda的面板,再点击一下就会收起来,如下图所示。

    aeaacc58f26fde61419cda113339bc3e.png

    直接使用不带任何参数的初始化方法init()会加载Eruda提供的全部面板,如果只需要部分面板需要在init()中带上配置参数。这里先介绍一下Eruda提供了哪些面板。

    Console面板:捕获Console日志,支持log、error、info、warn、dir、time/timeEnd、clear、count、assert、table;支持占位符,包括%c自定义样式输出;支持按日志类型及正则表达式过滤;支持快捷命令加载underscore、jQuery库;支持JavaScript脚本执行。

    Elements面板:查看标签内容及属性;查看应用在Dom上的样式;支持页面元素高亮;支持屏幕直接点击选取;查看Dom上绑定的各类事件。

    Network面板:图表显示页面加载速度;查看页面各资源请求时间(Android);捕获XHR请求,查看发送数据、返回头、返回内容等信息。

    Resources面板:查看并清除localStorage、sessionStorage及cookie;查看页面加载脚本及样式文件;查看页面加载图片。

    Sources面板:查看页面源码;格式化html,css,js代码及json数据。

    Info面板:输出URL及User Agent;支持自定义输出内容。

    Snippets面板:页面元素添加边框;加时间戳刷新页面;支持自定义代码片段。

    Features面板:浏览器常用特性检测;提供Can I use,Html5Test快捷访问。

    配置面板的代码如下:

    eruda.init({

    tool: ['console', 'elements']

    });

    想要什么样的面板只要在tool的数组中加上对应的面板名称就行了。

    这次就介绍到这里,更多后续文章敬请期待...

    展开全文
  • 开发h5的时候有时候在真机上报错,我们得频繁的alert去打印调试,这无疑是痛苦的一件事,发现一个H5的调试工具,类似于小程序的打开调试,大大的增加了我们的开发效率。 // cdn 地址 <script src=...

    开发h5的时候有时候在真机上报错,我们得频繁的alert去打印调试,这无疑是痛苦的一件事,发现一个H5的调试工具,类似于小程序的打开调试,大大的增加了我们的开发效率。

      // cdn 地址
        <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.4.1/vconsole.min.js"></script>
    
    

    // 或者npm

     npm install vconsole
    

    使用

      new VConsole();
    
    展开全文
  • 2.使用chrome的chrome://inspect/#devices进行调试,缺点是只能调试安卓端,需要翻墙 3.vconsole,fetch请求看不到,只支持ajax的请求 4.whistle,使用方法如下 1) 安装 Node.js 方式一:brew install node ...

    1.使用charles,具体使用方法自动百度

    2.使用chrome的chrome://inspect/#devices进行调试,缺点是只能调试安卓端,需要翻墙

    3.vconsole,fetch请求看不到,只支持ajax的请求

    4.whistle,使用方法如下

        1) 安装 Node.js

        方式一:brew install node
        方式二:Node.js 下载地址:https://nodejs.org/en/ 直接下载然后安装,安装完成之后,可以在命令行工具输入 node -v 检查

         2). 安装 whistle,使用下面的命令安装 whistle:npm install -g whistle
         如果权限不允许,则前面加 sudo 来执行:sudo npm install -g whistle
         安装完成之后检查:w2 help
         3). 启动 whistle:w2 start ,whistle 启动默认使用的 端口号 是 8899,也可以在启动的时候自 定义端口号:w2 start -p 1234 如果要停用 whistle,可以用:w2 stop
          4) PC 安装根证书 ,whistle 启动之后, 打开 Chrome 浏览器,输入 URL:http://127.0.0.1:8899然后下载证书,二维码底部的两个选项勾选上,并打开下载好的证书, 找到 证书 > whistle.xx 并双击,选择 使用此证书时 为 始终信任

    展开全文
  • Charles —— 一款Web调试代理应用程序,适用于Windows / Mac OS / Linux 下载地址: https://www.charlesproxy.com/download/ 下载完成后,根据系统需要勾选proxy菜单下的 • macOS proxy • Windows proxy...
  • 刚接触移动端,今天花了快一下午的时间来弄钉钉微应用调试(╥╯^╰╥),不得不说移动端调试起来好麻烦呀。chrome钉钉开发者文档中写的Android开发版调试十分简洁,就短短几个步骤,对新手来讲真是一头雾水。学习一、...
  • 移动端调试eruda

    2021-04-19 14:42:00
    <scriptsrc="//cdn.jsdelivr.net/npm/eruda"></script> <script>eruda.init();</script>
  • 腾讯开源的移动 H5 的控制台开发调试工具 vConsole 腾讯开源的移动 H5 的控制台开发调试工具,支持查看 console 日志、网络请求、自定义插件等 用于移动网页的轻量级,可扩展的前端开发人员工具。 特征 查看...
  • 移动端调试神器(eruda)

    千次阅读 2020-12-28 09:55:41
    移动端开发的过程中,经常是在chrome dev tools或者微信开发工具中调试好了但放入各种型号的手机或者app里就会出现问题。而在移动端想要看到数据就只能抓包,eruda能在页面生成一个控制台,你可以看接口数据,也...
  • 项目开发时经常需要debug调试,但在移动端debug则会阻断代码运行,并且很难判断出错在哪里,这里我们需要借助第三方插件 vConsole安装:1.下载模块:下载 vConsole 的最新版本或 使用npm安装:npm install vconsole...
  • eruda 移动端网页调试工具的使用: <script src="https://cdn.bootcdn.net/ajax/libs/eruda/1.6.0/eruda.js"></script> <script>eruda.init();</script> 效果如下,点击小按钮即可 ...
  • 文章会列举目前适合移动端调试的多种方案,快来选择你的最佳实践吧! 二、iOS 设备 Safari:iphone 调试利器,查错改样式首选,需要我们做如下设置: 浏览器设置:Safari - 偏好设置 - 高级 - 勾选「在菜单栏中显示...
  • 移动端调试神器vconsole 前端开发过程中,往往会出现开发时在电脑中模拟移动端都是正常的,但真正在移动端运行时会出现偏差,而在移动端中又不能像在电脑浏览器中随时查看浏览器console,检查问题,这时候就需要用上...
  • 移动端调试

    2021-08-21 16:18:57
    <script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script> <script type="text/javascript"> let vConsole = new VConsole(); </script>
  • 安装 npm install vconsole --sava 在页面中使用: import Vconsole from 'vconsole' const vconsole = new Vconsole(); 用手机打开后就有一个绿色的vConsole图标,点击图标,就出现跟浏览器一样的控制台
  • H5 移动端调试

    2021-03-15 10:07:23
    文章会列举目前适合移动端调试的多种方案,快来选择你的最佳实践吧! 二、iOS 设备 Safari:iphone 调试利器,查错改样式首选,需要我们做如下设置: 浏览器设置:Safari - 偏好设置 - 高...
  • WebStorm移动端调试html方法

    千次阅读 2019-12-27 14:44:34
    WebStorm移动端调试html方法 在使用WebStorm编写HTML代码,尤其是编写移动端web时,常常会需要在商机上显示网页进行测试,WebStorm上只需要简单几步即可访问 打开WebStorm上的preferences 选择Debugger ...
  • 移动端添加调试

    2021-02-26 14:53:19
    有时候我们开发的移动端项目在PC端浏览器显示的很正常,但是到了手机上就有问题了,这可就让人很纠结,只能盲改,如何能在手机上面查看log,查看接口请求等等,你需要使用vConsole 方法一、安装vcosole 1、yarn add ...
  • 我们先不看未来,从此文可见,当下的移动端调试还是 Weinre 和 JSConsole 的天下。Weinre 我们在前面已经有所了解(详见移动端页面(css)调试之“weinre大法”),它主要是为了移动端 css 的调试,能兼容各种浏览器,...
  • 文章目录移动端调试浏览器调试进入控制台进入浏览器模拟器调试切换测试机型添加测试机型改变屏幕尺寸,改变DPR改变网络情况改变屏幕显示大小横/竖屏切换真机测试扩展远程调试工具 -- vorlon.js多终端调试工具 -- ...
  • H5无法在移动端调试

    2021-06-25 09:35:35
    可能会出现以下问题 1.首先找到ipv4的地址(电脑和手机要连接同一个wifi)。可以在cmd输入 ipconfig就可以找到。 2.在项目里面的config里面找到index.js,修改里面的host地址,把ipv4的地址输入进去。...
  • 移动端调试vConsole

    2021-06-03 19:48:22
    通过vConsole.js 重写console方法,实现了类似于微信小程序的移动端调试效果。 具体使用方法也很简单 <script src="http://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.2.0"></script> <...
  • 注意你的安装路径,之后会将所需文件拷贝进去 ...boundHost是调试服务器绑定的ip地址或域名,默认是localhost,设置为-all-是为了在本地能使用localhost打开(也可以设置成自己的ip),在移动设备或本地环境用ip地址
  • function () { eruda.init() } })() 在项目的入口引用这个文件就可以 只需要在地址栏增加mdebug=true即可调试 2、VConsole使用方法 方式1: 方式2: npm install --save-dev vconsole var vConsole = new VConsole()...
  • Eruda是一个专为手机网页前端设计的调试面板,类似 DevTools 的迷你版,其主要功能包括:捕获 console 日志、检查元素状态、显示性能指标、捕获XHR请求、显示本地存储和 Cookie 信息、浏览器特性检测等等。...
  • 移动端调试是每一位前端工程师必须掌握的技能,在移动端环境上往往有很多不同的情况,我们需要借助一些工具来调试。本文将介绍 Mac 如何安装 charles,进行抓包、以及一些应用场景。场景一:app端内线上环境接口报错...
  • Unity中实现移动端调试

    千次阅读 2021-05-07 10:49:09
    一:前言 Unity中的Console窗口能够显示运行...——在游戏启动时调用 DebugConsole.Ins.OpenDebugConsole()开启控制台调试窗口 三:代码 using System; using System.Collections.Generic; using UnityEngine; //
  • 移动端调试利器: 具体使用方法也很简单 <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.3.4/vconsole.min.js"></script> <script type="text/javascript"> let vConsole = new ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 28,995
精华内容 11,598
关键字:

移动端调试