精华内容
下载资源
问答
  • 手机调试H5页面
    千次阅读
    2020-03-30 16:38:55

    1.在h5页面中引入js文件

    <script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>

    2.在全局中或者打印的地方写

    var vConsole = new VConsole();

    3.打印要调试的内容

    console.log(res)

    4.手机浏览 右下角会有绿色的console 标志 点开

     

    更多相关内容
  • 手机调试 H5(vue 方向) 代码 bug 多没关系,关键是可以及时定位到问题! 小提示:不知道是不是 fiddler 的原因,不能在微信的网页注入 JS。所以以下调试均在手机浏览器中进行,当然如果可以自己在页面引入调试...

    手机调试 H5(vue 方向)

    代码 bug 多没关系,关键是可以及时定位到问题!

    小提示:不知道是不是 fiddler 的原因,不能在微信的网页注入 JS。所以以下调试均在手机浏览器中进行,当然如果可以自己在页面引入调试资源,那也是可以滴!

    手机使用 vue-devtools 调试

    开发 vue 应用的时候,chrome/firefox 有 vue-devtools 插件。那手机端呢?还有最新的edge浏览器,虽然说兼容 chrom 插件,可是也是一番折腾。于是找到了 vue-devtools 的 github 仓库

    先上效果图:

    根据文档提示,可以用 npm 安装

    # 安装 vue-devtools
    npm install -g @vue/devtools
    
    # 打开vue-devtools
    vue-devtools
    

    打开后就能看到我上面的图的效果,有 2 个 script 标签,其实都是本地的。这时候最好选择是 IP 地址的标签,放入到页面的 index.htmlhead标签的第一行!

    • 为啥需要放在 head 的第一行?

      文档也有说,调试插件引入必须在 vue 文件引入之前。所以引入的时候应该是这样的:

    • 其次,只是引入了 JS 文件,PC 端调试是没问题了,可是手机端一直连不上!

      这是因为,就算采用了 IP 地址的 script。在手机端发送调试请求的时候依旧发送的是 localhost:8098。所以我们还得指定发送调试请求的 IP 地址。
      最后改成这样子:

    完整代码:

    <!-- IP地址记得改成你们自己本地的IP -->
    <script src="http://192.168.0.105:8098"></script>
    <script>
      window.__VUE_DEVTOOLS_HOST__ = '192.168.0.105'
      window.__VUE_DEVTOOLS_PORT__ = '8098'
    </script>
    

    可是这会有一些隐患,万一项目打包上线咋办?岂不是每次打开我都得删除这行代码,打完包我想调试在把这行代码放回去?NO NO NO。于是我们找到了 fiddler。动态帮我们注入这段 JS

    使用 fiddler 注入 JS

    使用 fiddler 固然方便,也不用怕打包上线的时候忘记去掉调试,可是在微信中貌似注入不了,如果有知道怎么解决的欢迎留言 😃

    flddler 的配置后续在出文章把,配置好一切后,找到FiddlerScript 选项,找到 onBeforeResponse

    static function OnBeforeResponse (oSession: Session) {
      if (m_Hide304s && oSession.responseCode == 304) {
        oSession["ui-hide"] = "true";
      }
    
      // 新增部分 ↓ ↓ ↓
      // 这里的判断还能根据域名来判断是否新增,太折腾了,我就没去弄了
      if (oSession.oResponse.headers.ExistsAndContains("Content-Type", "text/html")) {
          oSession.utilDecodeResponse();
          oSession.utilReplaceOnceInResponse('<head>', '<head><script src="http://192.168.0.105:8098"></script><script> window.__VUE_DEVTOOLS_HOST__="192.168.0.105";window.__VUE_DEVTOOLS_PORT__ ="8098"</script>', 0);
      }
      // 新增部分 ↑ ↑ ↑
    }
    

    其实就是在请求响应之前,找到 <head> 标签,替换为 :<head> 想引入的JS资源。从而达到 JS 注入的效果~

    这里不要忘记了指定 vue-devtools 的请求域名和端口

    重点:改完之后,ctrl+s 是没用的! 是没用的! 是没用的!。一定要按上面的保存脚本!这样才能生效

    然后到手机上,需要连接代理,这一部分也在新的文章写把,这里就不拓展 fiddler 的功能了~

    第一次调试可能连接时间比较长,多刷新几次即可。有条件的还能用 chrom。用数据线来连接页面,看下到底页面上被注入了 JS 没。chrome 调试可以看这篇:chrome 调试手机网页

    进阶:vue-devtools + weinre + vconsole

    既然已经折腾到这一步。动态插入 JS 了。何不在进阶一步?

    众所周知,vue-devtools 只能调试 vue 相关的节点,查看变量,查看 vuex。可是对于页面的样式却无能为力。所以我们可以重新搬出 vconsole 甚至可以用上 weinre!

    • vconsole

      vconsole 没啥好说的。就是引入资源。new 一个 vConsole

    <script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
    <script>
      new vConsole()
    </script>
    

    安装完成后,我们启动 weinre 的端口需要注意下面几个点:

    1. 不能使用 8090 因为 vue-devtools 占用了
    2. 不能使用 8080 因为本地开发项目通常用的都是 8080
    3. 不能使用 8888 因为 fiddler 占用了

    那,我们直接还是用 9999 端口把,启动的时候一样是要指定 IP 启动,原因上面也说过了,手机调试,必须指定 IP

    weinre --boundHost 192.168.0.105 --httpPort 9999
    

    然后同理在 fildder 里面找到OnBeforeResponse

    在这里我只引入了 vue-devtools 还有 weinre

    static function OnBeforeResponse (oSession: Session) {
      if (m_Hide304s && oSession.responseCode == 304) {
        oSession["ui-hide"] = "true";
      }
      // 新增部分 ↓ ↓ ↓
      if (oSession.oResponse.headers.ExistsAndContains("Content-Type", "text/html")) {
          oSession.utilDecodeResponse();
          oSession.utilReplaceOnceInResponse('<head>', '<head><script src="http://192.168.0.105:9999/target/target-script-min.js#anonymous"></script><script src="http://192.168.0.105:8098"></script><script> window.__VUE_DEVTOOLS_HOST__="192.168.0.105";window.__VUE_DEVTOOLS_PORT__ ="8098"</script>', 0);
      }
      // 新增部分 ↑ ↑ ↑
    }
    

    如果不用 fiddler。也是在 html 中直接引入对应的资源,在手机上也可以调试,记得在 <head> 下面的第一行就开始引入资源.确保资源在 vue 引入之前就被引入了


    这次的调试可能意义不大~因为 vue-devtools 不能调试线上代码,在手机端也只能调试 PC 开放出来的端口。不过也算是以防不时之需~。顺便熟悉下 fiddler 的流程

    最后最后,放上调试终极效果图,可以调试节点,调试样式,使用控制台功能,查看 vue 的变量,并且被调试的终端是手机~

    最后

    如果发现调试不了,一定要好好检查下上面的流程,尤其是 vue 调试,必须额外的指定 IP 地址。好好的把流程都过一遍,不能跳着跳着看,会很容易就漏掉一些步骤

    第一次调试固然麻烦,可是把流程都配置好后,现在我只需要打开 fiddler。无需 5S。立刻可以开始调试了~

    如果流程有误或者有更好的方法的,欢迎留言 😃

    展开全文
  • 手机h5怎么调试

    千次阅读 2022-01-20 15:01:47
    最近遇到h5页面调试,想查看web打印的log或cookie,...3、通过手机的 Safari 来打开 H5 页面,我们通过浏览器开发选项可以看到: 4、通过这种方式成功解决问题。 *特点:不能调试webView里面的页面。 二、 Chrome+

    最近遇到h5页面调试,想查看web打印的log或cookie,于是搜索资料找到以下方法

    一、Mac+IOS+Safari- 进阶调试(亲测有效)

    1、浏览器设置:Safari - 偏好设置 - 高级 - 勾选「在菜单栏中显示开发」菜单。
    在这里插入图片描述

    2、iphone 设置:设置 - Safari - 高级 - 打开 Web 检查器。

    在这里插入图片描述

    3、通过手机的 Safari 来打开 H5 页面,我们通过浏览器开发选项可以看到:
    在这里插入图片描述

    4、通过这种方式成功解决问题。

    在这里插入图片描述
    *特点:不能调试webView里面的页面。

    二、 Chrome+Android- 进阶调试
    1、打开 Android 手机 设置 > 开发者选项 > USB调试。

    在这里插入图片描述

    2、通过数据线连接你的电脑和 Android 手机,会弹出如下界面,点击 确定。
    在这里插入图片描述

    3、Chrome 中输入:chrome://inspect,进入调试页面。

    在这里插入图片描述
    4、可以见到是这样的调试界面
    在这里插入图片描述

    *特点:控制台能正常看页面。

    三、vconsole工具,目前没有查看具体使用
    参考链接:https://www.jianshu.com/p/dd8a44d7c96e

    展开全文
  • H5 在iPhone真机上调试H5页面

    千次阅读 2021-05-07 09:52:54
    第一步:打开iPhone设置 ...第四步:在手机Safari上打开H5页面 第五步:在Mac上Safari浏览器开发就会出现设备,设备选项里就会有加载的H5页面,点击打开,如果没有,就重新连接一下手机。 如图: ...

    第一步:打开iPhone设置

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

    第二步:打开Mac上的Safari浏览器

    偏好设置-高级-在菜单栏显示开发菜单

    第三步:连接电脑和手机并信任

    第四步:在手机Safari上打开H5页面

    第五步:在Mac上Safari浏览器开发就会出现设备,设备选项里就会有加载的H5页面,点击打开,如果没有,就重新连接一下手机。

    如图:

    展开全文
  • 手机调试H5页面

    千次阅读 2019-07-05 16:48:49
    在设置的开发者选项里开启手机的USB调试; 要确保手机和电脑连接的是同一局域网,并且关掉电脑上的防火墙; 电脑上的chrome浏览器访问chrome://inspect,如果连接成功,就会在电脑上的chrome浏览器中显示出对应的...
  • H5:在手机调试开发H5网址

    千次阅读 2020-05-24 10:52:47
    在开发H5网址的时候,特别是手机上真机使用的时候,想要在电脑上输出日志,IOS的safari还可以直接联机调试,但是安卓就很麻烦,所以找了一下便捷的安卓手机调试H5网址的方法。
  • 3.设置手机wifi代理 改成手动代理,填写电脑端的ip地址,端口填charles里面配置的端口 Charles中的端口配置: Proxy->Proxy Setting 4.手机操作。电脑上面就能看到相应的地址请求了 注: 网站请求没有...
  • 学习目标:掌握whistle调试运行在手机端的H5页面 学习内容: 1、 实现查看页面的console信息 2、 实现查看页面的真实dom节点 3、 实现让接口异常,如:返回500,伪造接口信息 学习时间: 1、 2021.12.21 学习产出...
  • 1.纯html写的代码 引入 <script src=...</script> 然后在 <script>...let vConsole = new VConsole();...//导入安装包,安装在 devDependencies配置里面 只是开发环
  • 移动h5调试方式 1、eruda 直接外链引入初始化;然后重新运行项目即可看到 <script src="//cdn.bootcdn.net/ajax/libs/eruda/2.3.3/eruda.js"></script> <script>eruda.init();</script> 2...
  • H5手机端控制台调试

    2019-09-27 03:28:05
    链接:https://pan.baidu.com/s/1lDlRtJtiGVJTK-qy_rAHPg 提取码:dynk ...下载以上js并引入到需要调试的页面 页面初始化完成加入代码 newVConsole(); 转载于:https://www.cnblogs.com/lch1990/p/11546830.html...
  • H5前端手机调试打印之vConsole

    千次阅读 2018-12-13 11:56:45
    一个轻量、可拓展、针对手机网页的前端开发者调试面板。 特性 查看 console 日志 查看网络请求 查看页面 element 结构 查看 Cookies 和 localStorage 手动执行 JS 命令行 自定义插件 下载 下载 vConsole 的最新版本...
  • 如何真机调试微信h5页面

    千次阅读 2019-08-04 14:00:04
    由于微信环境、sdk的限制,在微信环境下如何有更加良好的调试体验还是有一些坑的,本篇将主要介绍本人在实际业务开发中使用到的微信环境下h5页面的三种调试方法(由于没有苹果手机,所以在开发自测...
  • h5项目在手机上打开调试模式

    千次阅读 2020-01-13 11:14:22
    vue:在index.html引入: 在使用界面 原生: h5项目在手机上调试(ios和安卓) 1、在vue 项目中实现手机调试 vue中直接使用npm 安装vConsole —(1)先找到vue得全局index.html页面 —(2)引入 —(3)在手机端得任意浏览器...
  • 欢迎访问我的博客https://qqqww.com/,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~文章目录1 前言2 debugx5.qq.com3 手机连接电脑并打开开发者选项和USB调试4 Chrome设置5 参考文章1 前言由于最近调试H5,客户那边...
  • 一、先确保在一个局域网下 二、打开cmd(Windows+R)输入ipconfig,找到WiFi的IP地址(192.168.XXXX.XXXX)每个人的不一样 三、如果是vue,直接输入提示行的network那一行就可以 就可以访问了!...
  • 使用数据线连接手机,打开手机开发者模式启用 USB 调试手机打开项目页面。 在谷歌浏览器中访问地址: chrome://inspect/#devices 出现如下页面 点击 inspect 方可开始进行调试 如果下面页面未出现,可以...
  • https://www.cnblogs.com/innooo/p/10876382.html
  • h5远程调试

    千次阅读 2021-11-09 19:07:10
    H5开发远程调试篇 由于部分同学对远程调试不太了解,了解远程调试后,可以直接避免打alert来看数据的变化,直接在chrome浏览器内打断点,然后查看每一步数据的变化,可提高开发效率,定位问题快等优点,H5发布生产...
  • 如何在iOS应用中更好的调试H5页面

    千次阅读 2022-03-21 14:24:05
    本篇先简单讲述WKWebView的加载流程,再通过Safari网页检查器,实现H5页面的调试与问题定位。 一、了解web容器的加载流程 1、WKWebView的初始化 WKWebViewConfiguration配置 - (WKWebViewConf
  • 手机调试h5页面利器插件

    千次阅读 2019-06-05 11:29:44
    手机调试h5页面利器插件 现在越来越多的手机app或者公众号,里边大量的使用h5页面,而在手机端没法像pc谷歌浏览器那样调试页面,有些时候只能不断的进行alert,麻烦不说,有的时候还找不到问题所在。今天给大家...
  • 在开发H5中当需要调试页面时,我们可以利用pc端的控制台来进行页面调试,但有时候我们还需要在手机端进行调试,那么此时我们就需要使用到一些手机前端开发调试利器,可以方便我们在手机前端页面看到log日志,...
  • 在app的有些模块里使用h5页面展示可以给移动开发者带来很大的方便, 但是一旦涉及到与本地交互的时候, 调试并不是很方便. 通过谷歌发现通过Safari 辅助功能,可以很好的发现定位问题.总结操作不走如下:1. 手机 ->...
  • A: chrome://inspect/ 这个只能调试手机浏览器的页面吗,可以调试混合app和原生app的页面吗? B: 混合的webview 可以 原生...app-debug.apk(可以手机调试) app-release-unsigned.apk(需要安装xposed) 下载链接: 链接.

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,868
精华内容 3,947
关键字:

手机调试h5