谷歌浏览器调试微信H5网页或者微信小程序的方法

已于 2023-04-28 12:05:08 修改
阅读量1.2w 收藏 10
点赞数 7
文章标签： chrome 前端
于 2023-04-28 12:02:09 首次发布
原文链接：https://www.jianshu.com/p/2e8d13ea0a50
版权

有时候我们想看一下第三方平台微信公众号或者小程序的接口调用情况，要用抓包工具或者搞证书的比较麻烦，所以以下设置更加简便看到第三方平台的一些接口调用、图片等情况。

1、首先USB数据线连接手机进入调试模式

2、微信访问 http://debugxweb.qq.com/?inspector=true 确定是否可以用（能打开就能用）

3、微信上打开你需要调试的页面

4、谷歌浏览器地址栏输入 chrome://inspect/#devices 等待一会儿 （浏览器需要具备翻强功能）

5、点击对应网页或者小程序 inspect 即可出现调试栏，然后像正常调试页面即可，小程序可以打开webview嵌套的h5页面，这样就能打开调试模式，看到接口请求、图片等调用情况

飞歌Fly
关注
  • 7
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
前端之巅：在Chrome浏览器上运行微信小程序
03-29
微信小程序的开发框架体验起来，还不错——自带了UI框架。但是问题是它的IDE，表现起来相当的糟糕——其实主要是因为，我当时买WebStorm License买了好多年。所以，我觉得他的IDE真不如我这个付费好用。而且，作为一 ...       微信小程序的开发框架体验起来，还不错——自带了UI框架。但是问题是它的IDE，表现起来相当的糟糕——其实主要是因为，我当时买WebStorm License买了好多年。所以，我觉得他的IDE真不如我这个付费好用。 (此图片来源于网络，如有侵权，请联系删除! ) 而且，作为一个拥护自由和开源的“GitHub 中国区首席Markdown程序员”。微信在微信
PC端浏览器如何访问微信小程序
qq_44504968的博客
04-02 1万+
PC端浏览器如何访问微信小程序前言：解决方案 前言： 小程序通过扫描二维码可以在手机浏览器打开，但用电脑浏览器访问同样的url却不能正常访问。 解决方案 通过F12打开 开发调试工具，点击toggle device toolbar（如下图）即可。 =================================================================================== 注：获取小程序url 通过网络封包分析软件抓包获取（相比wireshark，更推荐Fiddl
uniapp微信小程序中嵌入H5页面，调试信息查看
weixin_44375151的博客
03-29 211
uniapp微信小程序中嵌入H5页面，调试信息查看
微信小程序蓝牙控制继电器及串口调试 微信小程序源代码
02-19
1、 微信小程序蓝牙控制继电器及串口调试 微信小程序源代码 2、微信小程序蓝牙控制继电器，灯等设备，蓝牙串口调试助手等功能。 3、小程序云开发功能。
外部浏览器h5打开微信小程序 微信内置也可用
sdgjah2的博客
01-23 687
首先拿到小程序的access_token 这个也是后端调用 微信官方api拿到的。这个方法使用的是微信官方api 请求url scheme 实现的。因为前端请求在手机上会有跨域错误 所以请求代码放到了后端。后端不会写 但是后端需要调用的api及参数如下。拿到后 调用 看官方文档比较省劲。前端代码只做最后的请求跳转。
H5静态页面跳转微信小程序；从外部浏览器，点击H5链接跳转打开微信小程序；以及在微信内直接点击H5链接打开微信小程序；
i_am_a_div的博客
07-12 6216
参考链接 需求：从外部浏览器，点击H5链接跳转打开微信小程序；以及在微信内直接点击H5链接打开微信小程序； 步骤1：小程序开发需要使用云开发创建项目，使用云开发生成的项目会自带云函数文件夹； 步骤2：项目开启云开发 步骤3：下载官方的H5静态html和public文件进行配置，下载地址（点击下载HTML 即可下载全部文件）；下载后文件夹有两个位置需要修改： 下载的文件夹： 步骤3.1：更改静态的html：替换6项云开发字段：（直接搜索replace 将对象位置的信息改成你的云开发配置） 步骤3.2：
手机浏览器打开微信小程序，支持外部浏览器跳转到小程序
海贼王某人的博客
03-26 2万+
第一步生成小程序的跳转链接，进入微信公众平台，找到工具，生成跳转用到的URL 如下图： 参数可以不用传，点击生成后，复制链接，放在微信聊天记录里面可以直接点击打开，也就是说在微信环境内可以打开，微信H5也可以，如下图： 点击连接后 放在外部浏览器中打开，直接给一个超链接:点我去微信小程序，这个链接在网页中任何一个地方都可以，亲测有效。点击后会如下图：先点击取消程序，页面下方会出现跳转链接，点击后直接打开微信然后自动打开小程序 学废了记得点个三联哦·~~~ ......
H5移动端调试方案全解（iOS&Android&Chrome&vConsole）
m0_48176238的博客
08-30 6105
前言 在移动端盛行的今天，大家在日常中经常会接触到H5的移动端网页，不仅仅是在浏览器中，在各种的APP中也有存在着许多的H5页面，所以我们作为前端开发者就会有在开发时候进行移动端调试、甚至是真机调试的需求，本文旨在一文带领大家了解iOS、Android等平台的调试以及模拟器和真机的调试方法。 谷歌浏览器手机模式调试 优点：方便，常用 确定：无法完全模拟真机，无法发现真机上的一些问题 调...
微信H5移动端真机调试--vConsole
热门推荐
唯一的切慕，唯一的诗歌……
04-09 4万+
在移动端实际开发中，还是会碰到一些棘手的bug，想看看到底哪里出了问题，苦于移动端不能F12啊。友好的微信给我们提供了这么一个入口，使开发者可以真机调试。给微信开发者点赞。然后就可以看到你打印的内容及其他的信息，比如cookie、LocalStorage,Network、Element…… 微信打开这个网址 http://debugx5.qq.com/ 暖心的我给你准备好了二维码，扫一扫吧（不要...
【前端】谷歌浏览器调试微信H5网页或者微信小程序的方法
我是Superman丶的博客
12-12 1735
即可出现调试栏，然后像正常调试页面即可，小程序可以打开webview嵌套的h5页面，这样就能打开调试模式，看到接口请求、图片等调用情况。1、首先USB数据线连接手机进入调试模式。等待一会儿 （浏览器需要具备F强功能）确定是否可以用（能打开就能用）3、微信上打开你需要调试的页面。5、点击对应网页或者小程序。4、谷歌浏览器地址栏输入。
微信小程序开发（二）微信小程序的调试和发布
竹毛言己
02-01 1079
微信小程序的调试和发布
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
10-16
主要介绍了小程序webview组件交互,内联h5页面并网页实现微信支付实现解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
iOS 真机调试微信小程序
01-05
平时开发小程序可以在开发者工具中进行调试，开发者工具提供了类似 Chrome DevTools 的调试面板，对于前端开发者来说入门门槛比较低。 小程序开发完成之后，我们需要在真机上进行测试，真机调试方面小程序开发者工具有预览、远程调试和设置体验版本三大部分功能。除了这三种方式之外，我们还可以使用真机远程调试，在 iOS 上可以通过实现 Safari 调试代码，安卓中可以安装 X5 内核的 inspect 版本，开启 Chrome remote debug 模式。使用真机调试不仅可以发现开发者工具中不能发现的 bug，还能帮助我们理解小程序的运行原理。 下面介绍下如何使用 Xcode、Revea
微信小程序 小程序页面生成器 (源码)
05-31
微信小程序 小程序页面生成器 (源码)微信小程序 小程序页面生成器 (源码)微信小程序 小程序页面生成器 (源码)微信小程序 小程序页面生成器 (源码)微信小程序 小程序页面生成器 (源码)微信小程序 小程序页面生成器 ...
H5套壳微信小程序，实现付款功能
03-25
php语言写的。h5与小程序内都可以使用微信支付来进行付款。提供使用说明。使用后觉得满意记得打个5星好评。赚积分不易
chrome 查看版本安装路径、cmd命令行启动浏览器
最新发布
weixin_42357472的博客
04-28 253
【代码】chrome 查看版本安装路径、cmd命令行启动浏览器。
报错The chromedriver version cannot be discovered以及下载chromedriver.exe和查看其版本的命令
kxltsuperr的专栏
04-22 520
在使用selenium的时候，出现报错，The chromedriver version cannot be discovered。将chromedriver.exe放入项目的根目录中，同时放入python3.8的Scripts目录中。如果想要比较新的chrome浏览器对应的chromedriver，需要下面的链接。（1）首先要下载对应的chromedriver。如何找到python的路径呢？（2）下载好以后解压。
进程的概念（2）
lin_95的博客
04-26 900
指定进程获取某种资源（CPU）的先后顺序：优先级的本质是优先级数字的大小，Linux中优先级数字越小，优先级越高task_struct 进程控制快-> struct -> 内部字段 -> int prio =??nice =??优先级：已经能做了，是我们获取资源的顺序权限：能不能做的问题。
Linux学习08_学习shell脚本编程
kayotin的博客
04-22 1362
系统学习Linux08，学习shell脚本
微信H5跳转微信小程序
05-18
可以通过使用微信JS-SDK提供的API实现微信H5页面跳转到微信小程序。具体步骤如下： 1. 在微信公众平台中获取小程序的AppID。 2. 在H5页面中引入微信JS-SDK，并使用wx.config()方法进行配置。 3. 使用wx.miniProgram.navigateTo()方法跳转到小程序页面。 示例代码如下： ``` // 引入微信JS-SDK <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> // 配置微信JS-SDK wx.config({ debug: false, // 是否启用调试模式 appId: 'yourAppId', // 小程序的AppID timestamp: Date.now(), // 当前时间戳 nonceStr: 'yourNonceStr', // 随机字符串 signature: 'yourSignature', // 签名 jsApiList: ['miniProgram.navigateTo'] // 调用的API列表 }); // 跳转到小程序页面 wx.miniProgram.navigateTo({ url: '/pages/index/index', // 小程序页面路径 success: function() { console.log('跳转成功'); }, fail: function() { console.log('跳转失败'); } }); ``` 需要注意的是，跳转到小程序页面的URL应该以“/”开头，并且需要在小程序的app.json文件中进行配置。同时，在使用wx.miniProgram.navigateTo()方法时，需要保证当前H5页面和小程序属于同一公众号。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值