微信web开发者工具_微信web开发者工具 企业微信插件 - CSDN
精华内容
参与话题
  • 微信手机端调试工具[下载地址] ...如果安装调试工具-微信Web开发者工具需要卸载以前安装过的微信Web开发者工具(比如小程序-微信Web开发者工具),建议使用腾讯管家之类的清理干净。2.安装好后,选择移动调试,X5 Blin

    微信手机端调试工具[下载地址]

    (https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html)
    进入后的页面
    这里写图片描述
    这里写图片描述

    注意:

    1.如果安装调试工具-微信Web开发者工具需要卸载以前安装过的微信Web开发者工具(比如小程序-微信Web开发者工具),建议使用腾讯管家之类的清理干净。

    2.安装好后,选择移动调试,X5 Blink内核调试,先验证手机是否支持X5 Blink内核调试,如果不支持,找一台支持的手机。
    这里写图片描述
    3.翻墙,用usb线连接移动设备与本机,在手机设置里搜索usb调试,打开usb调试功能,用移动设备扫描以上二维码,勾选信息>TBS setting > 是否打开TBS内核 Inspector调试功能,点击开始调试。
    4.退出微信,从新登录打开微信端的网页后会出现下图(如果未出现,或空白则需要翻墙),点击inspect
    这里写图片描述
    5.现在进入了我们熟悉的chrome调试界面

    这里写图片描述

    展开全文
  • 微信web开发者工具https://pan.baidu.com/s/1xvjYEC5SjV9p50nTP6oRwg

    微信web开发者工具

    https://pan.baidu.com/s/1xvjYEC5SjV9p50nTP6oRwg

    展开全文
  • --------------文件内附最新版本下载...使用公众号网页调试,开发者可以调试微信网页授权和微信JS-SDK 详情 使用小程序调试,开发者可以完成小程序的 API 和页面的开发调试、代码查看和编辑、小程序预览和发布等功能。
  • 微信web开发者工具调试

    千次阅读 2017-02-10 11:33:34
    前几天写了一篇使用fiddler调试微信端页面的,然后博友评论说使用fiddler太麻烦了,推荐使用微信web开发者工具调试微信页面,这两天弄着玩了一下,很强大。这篇文章只是做一个记录,方便自己以后使用的时候看看,...

    前几天写了一篇使用fiddler调试微信端页面的,然后博友评论说使用fiddler太麻烦了,推荐使用微信web开发者工具调试微信页面,这两天弄着玩了一下,很强大。这篇文章只是做一个记录,方便自己以后使用的时候看看,不对的地方请大家批评指正。放入官方的微信web开发者工具下载链接以及文档说明https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html,参考这个文档,我又给细节化了一些内容。下载以后直接安装就好。

    1.下载安装好以后,打开界面是这样的。


    2.我们点击登录,会出现扫描二维码页面,用你自己的微信扫一下登录就可以

      


    3.登录以后,就可以对我们的微信企业号页面进行调试,请注意!!!要想调试当前的企业号页面,你登录的微信号,必须是这个企业号的管理员(这在微信开发者工具的说明文档有写),如果不是,请在你们的企业号开发端把你的微信设置为管理员。否则在开发者工具里面将会出现下面这个页面,如图

     

       管理员设置界面如图:

       

     

    在企业号管理页面添加完毕以后,会在你的手机微信端有提醒,记得按照他的提醒设置一下开发者工具的登陆密码,如果没有设置密码,你依然登陆不上去,如图所示:

     

    设置完密码以后,我们点击登录,发现还是上不去,如图所示:

     

    点进去以后,如图所示:

     

    2.上面所有的都设置过以后,我们登陆开发工具,随意打开一个公众号的页面,复制链接放在开发工具的地址栏,现在基本上就可以在电脑上面进行调试了。页面如图:(关注一下移动调试)

     

    3.这个工具更加强大的功能!点击窗口中的移动调试。

      3-1.如图所示,我们先选择Android设备调试--普通调试,

      

     

     

      接着我们只要按照他的提示--调试步骤设置我们的手机就可以,手机代理设置如图所示:

     

    手机设置完毕代理以后,点击开发者工具页面中的开始调试就可以,很强大,我们选中的页面部分,会在手机上面实时显示出来。(自己体验一下。)

      3-2.如图所示,我们先选择Android设备调试--X5 Blink内核调试,这个功能更强大!

    这一部分强烈建议看一下官网的文档说明,我先copy一下放在这。

    移动调试

    移动端网页的表现,通常和桌面浏览器上有所区别,包括样式的呈现、脚本的逻辑等等,这会给开发者带来一定的困扰。现在,微信安卓客户端 webview 已经开始全面升级至 X5 Blink 内核,新的内核无论在渲染能力、API 支持还是在开发辅助上都有很大进步。通过微信 web 开发者工具中的远程调试功能,实时映射手机屏幕到微信 web 开发者工具上,将帮助开发者更高效地调试 X5 Blink 内核的网页,具体步骤如下:

    (1)准备工作

    1. 安装0.5.0或以上版本的微信 web 开发者工具

    2. 确认移动设备是否支持远程调试功能

      打开微信 web 开发者工具,选择“移动调试”tab,点击验证移动设备是否支持。随后使用移动设备扫描弹出的二维码,在设备上即可获得支持信息。

    3. 打开移动设备中的 USB 调试功能

      1.打开移动设备,进入“设置”->“开发人员选项”

      2.勾选“USB 调试功能”

     

      需要注意的是,Android 4.2 之后的设备,开发人员选项默认是隐藏的,通过以下步骤可以打开:

      1.打开移动设备,进入“设置”->“关于手机”

      2.找到并单击“内部版本号”7次

    4. 安装移动设备 USB 驱动

      通常开发者可以在移动设备厂商的官网中下载到相关驱动,或者使用腾讯手机管家来安装设备驱动。

    5. 打开 X5 Blink 内核的 inspector 功能

      打开微信 web 开发者工具,选择“移动调试”tab ,使用设备扫描“调试步骤”中的二维码。

      如下图,勾选“是否打开 TBS 内核 Inspector 调试功能”,并重启微信。

      

    (2)开始调试

    使用 USB 数据线连接移动设备与 PC 或者 Mac 后,点击打开微信 web 开发者工具“移动调试”tab,选择 X5 Blink 调试功能,将会打开一个新窗口,在微信中访问任意网页即可开始调试。关于 X5 Blink 内核更多信息,可以查看官网介绍

    在所有准备工作都完成的情况下,窗口中可以看到当前设备的基本信息:

    点击任意页面的“inspect”,打开新窗口,开发者会看到熟悉的调试界面:

    点击上图右上角的“手机”图标,将启用屏幕映射功能:

     

     

    下面我来补充一下:

    3-2-1.打开我们手机的调试USB调试功能,我的手机是三星S7,(高版本Android好像都这么弄,如果你的不可以,就问问度娘)找了半天没找到,问了度娘才找到。。。。写个记录

    在下拉通知栏里面选择设置,如图:

                        

    在版本号那里多点击几次,页面就会有提醒,再点击几次就可以打开开发者选项,打开以后,在我们设置里面就出现了开发者选项,点进去,把USB调试打开就好了。

    额外内容----如何关闭开发者选项???如图所示

                    

     

    3-2-2打开 X5 Blink 内核的 inspector 功能

                 打开微信 web 开发者工具,选择“移动调试”tab ,使用设备扫描“调试步骤”中的二维码。如下图,勾选“是否打开 TBS 内核 Inspector 调试功能”,并重启微信。

     

    3-2-3开始调试

        上面的设置都弄完以后,点击页面的的开始调试按钮,手机上出现下面这个页面,如图,我们点击确定就可以。

     

    然后我们的调试工具就会弹出这个页面:

    此时基本上就可以了,我们在我们的手机上随意打开一个我们要调试的微信公众号的页面。如图

    打开以后如图所示:左侧是我们的调试工具页面,右侧是我们的手机上显示的页面,是不是非常棒,哈哈哈哈,

               

     

    点击调试工具页面右上角的手机图标,可以将手机页面映射到调试工具里面,如图所示:


    这样打开pc端可能出现空白,这时候pc需要翻墙


    展开全文
  • 早期微信应用的开发是一件非常痛苦的事情,因为基于微信的网页涉及到调用微信的接口,所以网页必须在微信的内置浏览器打开才能看到实际的运行效果。做过前端开发的同学都知道,Chrome和firefox都自带强大的调试工具...

    早期微信应用的开发是一件非常痛苦的事情,因为基于微信的网页涉及到调用微信的接口,所以网页必须在微信的内置浏览器打开才能看到实际的运行效果。做过前端开发的同学都知道,Chrome和firefox都自带强大的调试工具,使用非常方便。但是基于微信的网页不能在这两种PC端浏览器中运行,所以调试是一个很大的问题。

    幸运的是,现在这个问题已经不存在了。微信技术团队在去年年底的时候推出了微信web开发者工具:

    微信公众平台为开发者提供web开发者工具,用于帮助开发基于微信的网页或者webapp。它是一个桌面应用,通过模拟微信客户端的表现使得开发者可以使用这个工具方便地在PC或者Mac上进行开发和调试工作。

    下面来说说工具的使用:

    1. 下载安装

      Windows 64位版本:下载地址
      Windows 32位版本:下载地址
      Mac版本:下载地址
      具体安装过程略过,就是选择安装目录然后一路next

    2. 绑定开发者微信号

      登录微信公众平台,按照下面图示操作:

      进入web开发者工具页面进行开发者微信号绑定:

      搜索微信号,邀请绑定:

      点击“邀请绑定”按钮后,该微信用户会收到一条确认绑定的消息,点击“确认”完成绑定。

    3. 启动运行

      启动工具后会要求使用微信扫码进行登录,登录之后就可以正常的访问网页。

      登录后输入URL地址打开页面进行调试

      如果使用过Chrome浏览器开发者工具,应该对这个界面不陌生,使用方法是类似的,不再复述。

    4. 工具设置

      点击开发者工具的菜单“动作”->“设置”,打开设置:

      在这里可以设置模拟的手机系统以及手机设备型号和微信版本,特别是设置手机设备型号后看到的屏幕显示效果就非常接近真实的手机设备,方便测试网页在不同手机型号下的页面显示。

    微信web开发者工具就简单介绍到这里,以后再讲讲如何连接手机真机进行调试。

    -----------------------------------------------------------------------------------------------------------

    之前自己博客上写的,搬运到OSC,内容有点旧了,现在的开发者工具还可以开发小程序,界面也有点差别,使用上还是类似的。

    转载于:https://my.oschina.net/johnlee007/blog/1529205

    展开全文
  • 微信web开发者工具 移动调试

    万次阅读 2018-06-13 10:03:16
    1 下载 微信web开发者工具:https://mp.weixin.qq.com/wiki?t=resource/res_main&...3 打开微信web开发者工具 ,选择如下图PS:我使用了很多手机,小米max ,iphoneX,小米5sp等等。。。没有一个能使用 X5Blin...
  • 微信提供了小程序的官方开发工具—微信开发者工具,当然,这个微信开发工具 还可以用来调试运行在微信上的网页以及微信JS-SDK。 微信开发者工具官方下载地址:...
  • 微信公众号之开发者工具

    万次阅读 2020-04-06 16:49:32
    一、前言 这次的项目主要是关于微信...在开发过程中会设计到微信接口的调测,这里使用的微信公众号中提供的开发者工具中的在线接口调测和公众平台测试账号。注:微信支付功能不能使用公众平台测试账号测试,必须部署...
  • 微信小程序开发者工具详解

    万次阅读 多人点赞 2018-07-22 09:39:47
    一、微信小程序web开发工具下载地址   1.1 在微信公众平台-小程序里边去下载开发工具下载地址。 1.2 下载后安装一下就可以使用了: 二、创建项目   2.1 微信小程序web开发工具需要扫码登陆,所以必须...
  • 微信web开发者工具无法打开的解决方法

    万次阅读 热门讨论 2017-09-09 16:14:28
    安装了之后,除了刚安装完可以自动打开后续无论是用快捷方式,还是跑到文件目录里,都无法打开这个磨人的小家伙其实解决这个问题很简单,只需要使用你的管理员权限便可轻松打开微信Web开发者工具。 1、第一步,右键...
  • 微信web开发者工具使用教程

    万次阅读 2016-12-13 11:40:33
    即刻下载使用==》微信web开发者工具下载 2、调试微信网页授权,具体操作步骤为: 1)开发者可以在调试器中点击“登录”,使用手机微信扫码登录,从而使用真实的用户身份来开发和调试微信网页授权。请确认手机登录页...
  • 使用微信web开发者工具调试微信企业号页面(前端页面,已发布在服务器上的)前几天写了一篇使用fiddler调试微信端页面的,然后博友评论说使用fiddler太麻烦了,推荐使用微信web开发者工具调试微信页面,这两天弄着玩...
  • 今天遇到一个问题,开发微信公众号和小程序的微信web开发者工具,突然打不开了,无论怎么点击,怎么重启电脑都打不开,昨天都好好的,今天上班就出问题了。 刚刚解决,现在把解决办法附上,希望对大家有帮助: ...
  • 最近因工作需要围绕着企业微信来进行调试,从而掏出了我的微信web开发者工具,在进行授权的时候微信web开发者工具成功的提示了我:“您未绑定企业微信开发者权限”。那么关键来了,因为我也百度过,发现也有很多关于...
  • 安装微信web开发者工具

    千次阅读 2018-09-24 17:11:57
    微信web开发者工具的安装 随着移动通讯等电子设备的普及,微信小程序也逐渐被大家所熟悉;小程序以入口浅、体积小、方便用、体验好等优良特性受到各阶层地欢迎;那么,你准备好自己写一个小程序了吗? 首先,我们得...
  • 微信web开发者工具1.0正式版,版本号:1.01.1711160_x64
  • 今天在学习小程序过程中遇到了一个小问题:微信web开发者工具不能输入汉字了,连中文标点都输入不了!wtf??? 从网上查找解决问题的方案,发现竟然是官方bug,好⑧又一个累被踩中了……(都2019年了喂) 其实解决...
  • 前几天写了一篇使用fiddler调试微信端页面的,然后博友评论说使用fiddler太麻烦了,推荐使用微信web开发者工具调试微信页面,这两天弄着玩了一下,很强大。这篇文章只是做一个记录,方便自己以后使用的时候看看,...
  • 微信web开发者工具的使用

    万次阅读 2016-03-22 23:10:48
    2016年初微信发布微信web开发者工具,可以在PC或Mac上模拟访问微信内网页,帮助开发者更方便地进行开发和调试 1、上一篇文章微信企业号jssdk拍照http://blog.csdn.net/u014520797/article/details/50890513也可以...
  • 如何用微信web开发者工具测试调试并打包上传小程序,其实还是很简单的,这个教程针对小白,大神请直接略过。 一、下载并安装软件(根据自己电脑实际情况选择版本安装) 如何用微信开发者工具新建小程序项目并打包...
1 2 3 4 5 ... 20
收藏数 26,358
精华内容 10,543
关键字:

微信web开发者工具