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

已于 2023-12-12 10:47:37 修改
阅读量1.6k 收藏 3
点赞数
分类专栏： Android 前端技术 文章标签： 微信 微信小程序 小程序
于 2023-12-12 10:46:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/G971005287W/article/details/134943593
版权

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

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

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

http://debugxweb.qq.com/?inspector=true

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

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

chrome://inspect/#devices

可以多等等 

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

剩下的 就可以查 chrome 开发工具用法

我是Superman丶
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
前端之巅：在Chrome浏览器上运行微信小程序
03-29
微信小程序的开发框架体验起来，还不错——自带了UI框架。但是问题是它的IDE，表现起来相当的糟糕——其实主要是因为，我当时买WebStorm License买了好多年。所以，我觉得他的IDE真不如我这个付费好用。而且，作为一 ...       微信小程序的开发框架体验起来，还不错——自带了UI框架。但是问题是它的IDE，表现起来相当的糟糕——其实主要是因为，我当时买WebStorm License买了好多年。所以，我觉得他的IDE真不如我这个付费好用。 (此图片来源于网络，如有侵权，请联系删除! ) 而且，作为一个拥护自由和开源的“GitHub 中国区首席Markdown程序员”。微信在微信
用Chrome调试微信小程序的方法
五角大寨
03-03 1万+
问题 微信小程序的开发一般就适用官方发布的“微信web开发者工具”了，可是，开始使用这个工具后，发现居然没有“调试”功能。 当然这其实只是官方没有写如何调试，实际上还是可以打断点，进行调试的，步骤如下。 步骤 1 打开调试器的source面板 默认在开发工具的右下方，如图 2 在左边的Sources面板中找到需要调试的页面 3 在中间的对应行的行号出打断点 4 开始调试 调试也有跨步，单步，等...
Chrome inspect工具使用
最新发布
m0_63857646的博客
02-28 404
1.打开Chrome，输入网址： chrome://inspect/#devices。方便之处在于，寻找模块相关数据的时候，鼠标滑上去，左侧会有相应的显示。2.点击左侧 Pages ，显示目前浏览器所有打开的页面。例如需要“主要主题分布”中每个柱状图的数据，点击右键操作。例如我们需要查看“计量可视化分析”的数据代码。用于页面中的数据等代码查看。点击下方的 inspect。
本地调试H5页面
weixin_34326558的博客
03-14 872
摘要 详细讲述微信H5页面调试（安装在安卓或iOS手机上的），钉钉内H5页面的调试，QQ、微博以及各浏览器上H5页面的调试方法 背景 大学毕业快要一年了,用leader的话说我也是有一年开发经验的前端开发工程师了,输出是检验输入的最好方法,那我就慢慢来总结这一年来在工作中总结的经验教训,分享给大家,有不专业和不完善的地方,请大家多多指点反馈,比心~ 做过一段时间的运营需求,一...
谷歌浏览器调试微信H5网页或者微信小程序的方法
qq_35430000的博客
04-28 1万+
5、点击对应网页或者小程序 inspect 即可出现调试栏，然后像正常调试页面即可，小程序可以打开webview嵌套的h5页面，这样就能打开调试模式，看到接口请求、图片等调用情况。1、首先USB数据线连接手机进入调试模式。等待一会儿 （浏览器需要具备翻强功能）确定是否可以用（能打开就能用）3、微信上打开你需要调试的页面。4、谷歌浏览器地址栏输入。
H5缺省页（pc端禁止f12调试等操作）
06-17
H5缺省页（pc端禁止f12调试等操作），适用于app的webview链接页面，前端技术控制让拿到页面的人无法通过调试在pc端打开页面，代码简介明了，直接取用即可
H5移动端调试方案全解（iOS&Android&Chrome&vConsole）
m0_48176238的博客
08-30 6038
前言 在移动端盛行的今天，大家在日常中经常会接触到H5的移动端网页，不仅仅是在浏览器中，在各种的APP中也有存在着许多的H5页面，所以我们作为前端开发者就会有在开发时候进行移动端调试、甚至是真机调试的需求，本文旨在一文带领大家了解iOS、Android等平台的调试以及模拟器和真机的调试方法。 谷歌浏览器手机模式调试 优点：方便，常用 确定：无法完全模拟真机，无法发现真机上的一些问题 调...
微信小程序自动化测试-----chrome浏览器识别小程序进程的问题
vissy小朱测试分享
12-03 3356
chrome浏览器打开设备 chrome://inspect/#devices 点击inspect进行调试。如果打开页面404，首先确保google.com可打开，如果不可以，那就翻墙。 注意： 1：如果出现，页面打开，但是elements空白，则尝试清除一下浏览器缓存。 2：如果，出不来小程序的进程，尝试删除小程序，然后从搜一搜进入小程序。 3：如果inspect打开，是空白，则建议降低微信版本...
微信内置浏览器调试和调试微信内的H5页面汇总（持续更新...)
热门推荐
Hello World
07-04 1万+
微信内置浏览器调试工具和微信H5页面的调试方式
chrome浏览器使用(包括小程序的调试)
ZHXT__的博客
10-23 2359
调试一 调试二 调试三 调试四
Hbuilder本地调试微信H5项目（三）--调用微信接口获取用户信息
flygoa的专栏
10-07 1308
通过微信网页授权接口，获取用户信息（头像，昵称等）
微信小程序蓝牙控制继电器及串口调试 微信小程序源代码
02-19
1、 微信小程序蓝牙控制继电器及串口调试 微信小程序源代码 2、微信小程序蓝牙控制继电器，灯等设备，蓝牙串口调试助手等功能。 3、小程序云开发功能。
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
10-15
主要介绍了vue项目使用高德地图的定位及关键字搜索功能的实例代码，也是小编踩了无数坑总结出来的经验,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
iOS 真机调试微信小程序
01-05
平时开发小程序可以在开发者工具中进行调试，开发者工具提供了类似 Chrome DevTools 的调试面板，对于前端开发者来说入门门槛比较低。 小程序开发完成之后，我们需要在真机上进行测试，真机调试方面小程序开发者工具...
yolov5/v6.0微信小程序前端代码
05-23
yolov5使用微信小程序部署，需要在腾讯云或阿里云等租一个服务器，配置域名和相关证书、端口等。
微信小程序项目实例-精简小程序商城源码纯前端项目
06-02
微信小程序项目实例——精简小程序商城源码纯前端项目，适合做毕业设计，下载即用，涉及CSS,HtML5、微信小程序等技术栈。无论学习还是二次开发必备
【前端】等待异步任务js执行完毕再执行
我是Superman丶的博客
03-11 8222
【前端】等待异步任务js执行完毕再执行 //页面加载完毕后执行 $(function(){ console.info('---- 我是js代码 Start ----'); let promiseArr = []; let p = new Promise((resolve, reject) => { //当第三方api提供的是异步方法时 这里用setTimeout模拟
【开源】前端拖拽表单设计器 自定义表单
我是Superman丶的博客
06-09 6596
form-generator: Element UI表单设计及代码生成器 (gitee.com) https://gitee.com/mrhj/form-generator
微信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页面和小程序属于同一公众号。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我是Superman丶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值