pc调试微信h5页面

最新推荐文章于 2025-01-31 22:57:03 发布
最新推荐文章于 2025-01-31 22:57:03 发布
阅读量4.4k 收藏 4
点赞数 1
CC 4.0 BY-SA版权
文章标签： 微信 调试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/machunlin2010/article/details/77947346

一、微信配置：
参考地址：https://testerhome.com/topics/6871

1.打开微信，设法打开网址 http://debugx5.qq.com （推荐直接把这个网址发给文件传输助手，然后就可以直接打开链接了）
2.在打开的网页中选择 【信息】->【TBS settings】，勾选 【是否打开 TBS 内核 Inspector 调试功能】,并点击提交按钮
3.微信提示需要重启，点击重启

二、手机打开USB调试功能

三、PC端配置
1.PC上安装adb驱动程序，
下载地址：https://pan.baidu.com/s/1hrRfkVi， 官网地址：http://adbdriver.com/downloads/
2.安卓手机连上PC，安装驱动

四、调试
参考：http://www.cnblogs.com/JinQingsong/p/6591830.html
1.PC连接上手机，手机允许USB调试
2.PC打开Chrome，输入：chrome://inspect/#devices
3.手机上，在微信中打开一个H5页面，就可以正常调试了
4.如果chrome inspect调试时，弹出的界面为空白，那么编辑hosts文件，添加：
61.91.161.217 chrome-devtools-frontend.appspot.com
61.91.161.217 chrometophone.appspot.com

machunlin~
关注
如何真机调试微信h5页面
zwkkkk1的博客
08-04 1万+
最近在项目中接手微信环境h5页面的开发，主要的是使用微信 JS-SDK 做原有项目部分功能在微信环境下的适配。 目前项目暂时告一段落，希望可以用几篇文章记录并分享这些天来学习、开发微信h5页面的心得、体会~ 由于微信环境、sdk的限制，在微信环境下如何有更加良好的调试体验还是有一些坑的，本篇将主要介绍本人在实际业务开发中使用到的微信环境下h5页面的三种调试方法（由于没有苹果手机，所以在开发自测...
uniapp微信H5开发本地调试方案
逍遥的前端笔记
08-05 2082
痛点：1）原生的H5，并不能方便地提供类似扫一扫的功能2）原生H5的扫一扫也需要部署到httpsps：本文基于mac系统，windows用户可以根据思路来进行调整。
微信打开X5调试，使微信页面可以在谷歌浏览器调试
热门推荐
一窍不通只会复制粘贴的Java工程师
09-28 4万+
由于微信对很多页面做了限制，微信开发工作者需要对页面进行调试 这个时候可以用到谷歌 首先我们需要打开微信 TBS 调试 http://debugx5.qq.com 也可微信直接扫描二维码 然后打开手机 打开开发者模式，打开 USB 调试   然后 在谷歌浏览器地址栏输入  chrome://inspect/#devices  出现如下界面 点击
微信公众h5页面如何在web端调试
hexiaoniao的博客
03-06 1万+
由于微信公众页面在手机上不好调试。所以可以选择使用微信开发者工具登录微信公众号-》开发者工具-》绑定微信账号-》下载工具-》安装-》微信扫码-》工具内输入公众号网页地址...
h5页面真机调试
colgirl的博客
09-11 1367
注意，微信开发者工具最新的1.0版本不支持移动端调试，必须是旧版，下载链接：https://pan.baidu.com/s/1dwf3ZJ1MpxOnfcKkzzBRAQ 提取码: igin。第一个选项打开微信扫码，提示503，选择普通调试，直接按步骤操作就行。需要注意的是，真机设置了代理，微信无法直接打开https网页，请求的api如果是https也会返回空。电脑chrome打开chrome://inspect/#devices。1、 使用微信开发者工具。2、使用vconsole。
微信公众h5页面如何在pc端调试
qq_34927733的博客
09-08 5993
方法一：微信开发者工具 方法二： 1、正常访问会提示请在微信上打开 2、我们可以用一些抓包工具（Charles等），抓微信端（移动端微信/pc端微信都可以）访问该页面时携带的cookie信息 3、修改浏览器的cookie信息，将抓包到的cookie信息填入到浏览器cookie中去，这样页面就能在pc访问，然后就可以开心的调试了 ...
微信支付如何实现内置浏览器的H5页面支付
11-26
因为项目需要，要在H5页面中加入微信支付，所以便去尝试，只想说真的很坑，尤其调试起来不方便 这是微信的官方API文档 微信API 微信支付的准备工作 申请公众号，申请开通支付，这个很简单，自行百度 申请好之后 在...
利用python生成微信h5_Python + Appium 微信公众号 H5 页面自动化测试
weixin_39828193的博客
12-20 1110
本文内容在以下环境运行成功：Windows10Python2.7android-sdk_r24.4.1Appium-windows-1.15.1chromedriver_2.40小米手机微信7.0.13(webview66.0.3359)环境之前已经搭建好了，还没搭建好环境的看这里：一、编写微信Native部分代码可以用appium inspector录制微信Native部分代码，不会的看这：我用...
微信pc端3.2.1版本，支持pc端开发调试
04-21
1. **本地资源预览**：开发者可以将本地的H5页面链接直接在微信PC客户端打开，无需上传到服务器或者使用其他工具进行中转，极大地简化了开发流程。 2. **实时刷新**：当代码发生变化时，页面会自动刷新，显示最新的...
微信H5支付实战记录:附前后端实现逻辑
weixin_43401380的博客
06-22 1873
登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。可以直接填入项目的访问路径,例如我这访问地址是:https://www.abc.top/h5,配置的安全域名就是:www.abc.top/h5.点击支付时页面提示:当前页面的URL未注册:https://www.abc.top/h5/#/pages/pay/处理方式:设置授权目录为提示目录的上一级:https://www.abc.top/h5/#/pages/1.商品详情页点击提交订单按钮调用创建订单接口,并调起微信支付.
如何突破限制，在PC上调试微信手机页面
得峰的专栏 [网络收藏]
08-22 1783
场景 假设一个手机页面，开发者对其做了限制，导致只能在微信客户端中打开。而众所周知手机上非常不利于调试页面，所以需要能在电脑上打开并进行调试。这里针对常见的三种页面做一下分析，一一绕过其限制，（当然不要拿去干坏事） 工具准备 ‍‍‍‍1、方便调试的浏览器。个人喜欢Chrome，本文基于Chrome 43.0.2357.130 (正式版本) m （32 位）环境； 2、抓包工具，推荐fi
【调试仅手机微信打开的h5】方法
全栈程序员什么都会一点
01-31 821
3.使用支持usb调试的机器使用usb链接电脑并打开usb调试，也支持局域网远程调试我这里不会设置就不说了。方法二 使用fd直接在浏览器输入访问在请求的时候用模拟器把需要的请求头放进去。1.发送以下消息给手机微信然后手机微信点开，看到执行成功就可以。2.打开需要调试的页面 比如我这里用贪吃蛇。方法三，使用webviewhook。好了就可以爽快的去玩了。
【亲测免费】 微信H5页面调试包：提升开发效率的利器
gitblog_09750的博客
10-28 372
微信H5页面调试包：提升开发效率的利器 去发现同类优质开源项目:https://gitcode.com/ 项目介绍 在微信生态中开发H5页面，开发者常常面临诸多挑战，如微信特有的API调用问题、性能优化、兼容性检查等。为了帮助开发者更高效地应对这些挑战，微信H5页面调试包（devtools-resources）应运而生。这款调试包专为前端开发者设计，特别是那些专注于在微信浏览器环境中开发和调试H5...
如何调试微信浏览器内嵌H5
米老头
05-27 4557
有些代码是必须依赖微信环境才能正常运行，而X5调试页面可以把我们在手机的操作页面，投屏到chrome浏览器里面，像我们常用的开发者工具操作可以查看console、network、缓存等。 官网地址：https://x5.tencent.com/tbs/guide/debug/faq.html 安卓调试： 1.在微信中打开http://debugx5.qq.com地址 如果打开提示不是x5内核，可以如下操作 1-1.在微信中输入：debugtbs.qq.com，点开会自动下载； 1-2.下载成功后
微信H5调试Vconsole
m0_37378152的博客
09-27 1229
1.ios安卓通用 yarn addvconsole // main.js import VConsole from 'vconsole' // ios必须安装才能使用 new VConsole() // 有需要的话，根据路由参数决定是否打开 if (this.$route.query?.showConsole === '1') { localStorage.setItem('showConsole', '1') } else { localStorage.setItem('sho.
微信开启H5调试功能
u014174132的博客
06-07 7142
微信公众号H5测试 1.在微信聊天窗口输入 http://debugtbs.qq.com,进入页面 2. 安装线上内核 3. 进入DebugX5 4. 打开信息页面中H5相关配置 以上步骤开启微信的调试功能; 查看Chrome版本 可以使用强转或原生的方式定位 ...
微信 PC 端h5页面打开的内置浏览器开发者工具界面
绝对零度的博客
04-21 9343
困境 项目开发的h5页面需要在微信端支持转发、分享功能，以及企业微信授权等相关权限功能，h5页面功能开发可以直接在Chrome浏览器的移动端模式开发，但是涉及微信权限时的一些功能，则需要在微信和企业微信中进行调试； 微信开发者工具 一些功能可以使用微信开发者工具，比如jsdk微信授权等 如图所示： 企业微信PC端调试 企业微信调试时，需要在管理端打开dev调试功能开关 然后打开企业微信，使用快捷键Ctrl+Alt+Shift+D,即可打开dev模式 然后打开企业微信中的相关h5页面，右键点击即可打开C
在微信小程序中实现调试H5页面，集成调试器
semoon的博客
09-09 4266
在微信小程序中实现调试H5页面，集成调试器 1.业务场景 因为要在小程序中使用H5页面，H5的数据请求都需要从小程序跳转时携带token等用户登录信息，再加密，所以迫切希望能在开发者工具中打开H5的调试器，方便快速开发。 2.资源 版本：vConsole v3.3.2 地址：https://github.com/Tencent/vConsole 使用：下载到web项目的工具包中，...
企业微信开发H5页面，如何在手机端调试
最新发布
09-13
<think> 嗯，用户这次问的是企业微信H5页面在手机端的调试方法。之前提供的引用里正好有相关内容，特别是引用[3]提到的vConsole，这应该是最直接的解决方案。 用户可能是个前端开发，正在为调试企业微信环境下的H5页面发愁。ta特意强调"手机端"，说明需要真机调试方案，而不是模拟器方案。从ta引用站内资料的行为看，可能已经尝试过其他方法但效果不好。 让我梳理下可行的方案：首选当然是vConsole，引用[3]已经给出了完整示例代码；其次Charles抓包方案虽然引用[2]说的是微信，但同样适用于企业微信；至于微信开发者工具，虽然引用[1]说是模拟调试，但其实也能连真机调试。 考虑到企业微信环境的特殊性，需要特别强调调试时的两个坑：一是企业微信的UA检测，二是可能遇到的跨域问题。用户既然开发企业微信H5，大概率是内部系统，可能还需要处理登录态问题。 准备在回答时突出vConsole的便捷性作为主要方案，其他方案作为备选。调试步骤要具体到代码层面，特别是引入vConsole的方式，因为引用[3]的CDN链接可能需要更新版本。对于需要抓包的情况，要说明Charles的关键配置点。 </think> 在企业微信开发的H5页面进行手机端调试的主流方法及详细操作如下： ### 📱 一、vConsole调试面板（推荐） **原理** 通过嵌入轻量级前端调试库实现真机调试面板（无需PC连接），支持查看日志、网络请求、存储数据等。 ```html <!-- 在HTML中引入 --> <script src="https://cdn.jsdelivr.net/npm/vconsole@latest/dist/vconsole.min.js"></script> <script> // 生产环境建议通过URL参数控制开启 if (location.search.includes('debug=1')) { new VConsole({ theme: 'dark' }); } </script> ``` **操作步骤**： 1. 代码注入后打包部署测试环境 2. 手机访问时追加URL参数 `?debug=1` 3. 屏幕右下角出现绿色按钮，点击展开调试面板 **特点**：支持查看 `console`日志、`Network`请求、`LocalStorage`等[^3] --- ### 💻 二、PC远程调试（Chrome DevTools） **适用场景**：需深度调试样式、断点调试JS ```mermaid graph TD A[手机开启USB调试] --> B[电脑Chrome访问 chrome://inspect] C[手机访问企业微信H5页面] --> D[Chrome检测到页面] D --> E[点击'inspect'远程调试] ``` **关键配置**： 1. 安卓手机开启USB调试模式 2. PC安装对应手机驱动 3. 微信需启用`TBS调试`（进入微信输入 `debugx5.qq.com` 开启） --- ### 🔍 三、Charles抓包调试 **解决痛点**：调试接口请求、HTTPS报文分析 1. **配置步骤**： - PC安装Charles并开启代理（默认端口：8888） - 手机与PC连同一WiFi，配置代理指向PC IP - 访问 `chls.pro/ssl` 安装Charles证书 2. **企业微信特殊处理**： ```txt // 过滤企业微信请求 *.wx.qq.com; *.qyapi.weixin.qq.com; ``` --- ### ⚠️ 调试避坑指南 1. **UA检测问题** 企业微信内置浏览器UA包含： ```js // 特征字段检测 /MicroMessenger.*Enterprise/.test(navigator.userAgent) ``` 2. **登录态同步** 需通过 `企业微信JS-SDK` 的 `wx.agentConfig` 注入企业身份 3. **iOS限制** 若遇白屏，检查是否启用`WKWebview`： ```js // 安卓/IOS通用启用方式 wx.startHTML5WebView?.(true) ``` > 💡 **调试技巧**：生产环境可通过动态注入vConsole避免误开启，示例： > ```js > const debug = localStorage.getItem('DEBUG_MODE') === 'on'; > if (debug) import('vconsole').then(m => new m.default()); > ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值