微信开发者工具ios调试,微信开发者工具调试器

如何使用微信web开发者工具调试程序

微信web开发者工具使用教程：

创新互联公司是一家专业从事网站制作、做网站、网页设计的品牌网络公司。如今是成都地区具影响力的网站设计公司,作为专业的成都网站建设公司,创新互联公司依托强大的技术实力、以及多年的网站运营经验,为您提供专业的成都网站建设、营销型网站建设及网站设计开发服务！

1、首先用户需要做的就是先下载安装，并启工具。

即刻下载使用==》微信web开发者工具下载

2、调试微信网页授权，具体操作步骤为：

1）开发者可以在调试器中点击“登录”，使用手机微信扫码登录，从而使用真实的用户身份来开发和调试微信网页授权。请确认手机登录页，绑定的公众号为“微信 web 开发者工具”。

2）为了保证开发者身份信息的安全，对于希望调试的公众号，我们要求开发者微信号与之建立绑定关系。具体操作为：公众号登录管理后台，启用开发者中心，在开发者工具——web 开发者工具页面，向开发者微信号发送绑定邀请。

3）开发者在手机微信上接受邀请，即可完成绑定。每个公众号最多可同时绑定10个开发者微信号。邀请确认页面如下图所示：

4）完成登录和绑定后，开发者就可以开始调试微信网页授权了，注意只能调试自己绑定过的公众号：

非静默授权的 URL：点击查看

在微信 web 开发者工具中上面的 URL，webview 模拟器显示效果如图：

点击“确认登录”即可带着用户信息跳转到第三方页面，很方便的进行后续的开发和调试。

静默授权的 URL：点击查看

在微信 web 开发者工具中打开该 URL 则会自动跳转到第三方页面。

（注意：如果使用了代理，需代理本身支持https直连，才能调试https页面。）

3、模拟JSSDK权限校验

通过 web 开发者工具，可以模拟 JSSDK 在微信客户端中的请求，并直观地看到鉴权结果和 log。以微信 JSSDK DEMO 页面为例：

微信web开发者工具怎么使用

微信web开发者工具使用，用到的工具：电脑，步骤如下：

下载安装微信web开发者工具，打开微信web开发者工具界面如下：

2.输入要调试微信程序的url，并选择移动设备的类型（安卓或者ios），以安卓为例：

说明：左边选择相应的区块，右边的代码就会追踪到。

注意事项：打开调试工具中的url需要微信公众号平台授权登录微信web开发者工具。

微信开发者工具——移动调试的简单使用

 目前主要是做PC端项目，但是偶尔也会有移动端需求提来，有在原生APP中的，也有在微信和浏览器中的，目前也就接触过这三个场景，对于移动端的坑入得也不深，本文介绍也是偏应用，如有不足请见谅。

一、开发移动端页面的工具

①移动端浏览器页面

   这里开发静态页面的做法和普通的PC页面开发一样，使用chrome浏览器进行开发和调试，但是不一样的地方是把PC端的开发模式切换到手机开发模式（PC调试模式切换到移动端，点亮图中 ②即可，图中①处可以模拟不同移动端设备，同时可以自己添加设备），效果如下：

该方式可以直接调试

②嵌入APP中的移动端页面

   对于某些经常举办针对用户活动的APP对于嵌入H5页面的需求是比较多的。因为这样会节省开发的成本、减少原生APP的迭代速度、对用户友好。

   开发嵌入原生APP的方式和第一种方式基本一致，唯一和第一种方式有些差别的是：如果h5页面和原生APP存在一些交互（js需要获取原生APP放回的数据），这种方式是没法做到的，因为上述方式是放在浏览器这个APP下的，而不是某个特定的原生APP。

解决方法：

    先和原生APP开发的同事商议好接口，使用方式一进行静态页面开发（这里面要写好正常的逻辑），然后与后台同事联调好接口，发不到测试，最后与原生开发的同事进行测试环境联调。过程看起来复杂，如果原生接口没问题，一般很快搞定。缺点就是和原生联调的时候，如果有问题，不好排查。（不知各位有什么好的方法，请指教！）

③开发微信端页面

   其实这个不应该拎出来说的，因为微信页面和在普通浏览器页面“一样”，可以认为微信中浏览网页就是在用QQ浏览器浏览。所以不再赘述。

总结：移动端开发，还是f12“大法”，然后切换移动调试就行了。

二、微信开发者工具之移动调试的使用

   对于f12开发小型的页面是没问题的，但是如果是基于微信的项目就有些力不从心了。所以大部分针对微信开发的项目基本上都可以使用 微信开发者工具 。

针对微信的开发者工具，真的是极大的方便了开发微信项目的效率。

   下面是一个应用于本地的个税计算器（其实控制台操作和浏览器f12基本一致，所以这个东西前端的同事一般立马上手）：

   但是，这个开发者工具虽然是微信官方开发工具，但是毕竟是模拟器，现实情况的复杂会导致有些样式不兼容。例如vivo的微信客户端，显示总是错乱的（测试的同事发现的问题，她的手机可以还原场景，但是我的手机端是正常的）。所以，我们需要有针对性的在这款手机真机上调试，如何做呢？下面简要介绍如何利用微信开发者工具进行真机调试。

   相对于iOS移动端调试，Android移动端调试更丰富一点，所以以安卓为例，ios调试方式同Android调试中的“普通调试”。

①普通调试

普通调试的步骤如下：

步骤解释：

第一步：选择无线网卡地址，默认即可，工具会自动查询你的无线网卡ip v4地址

第二步：意思就是你的手机连接的网络要和第一步得到的ip v4在同一个网段内（什么是网段？看这里）。简单的做法就是把手机的网络和电脑的网络设置为同一个源（连接到同一个无线网上）

第三步：这个步骤很清楚了，还有一个快捷的方式就是“下拉工具栏——长按无线连接图标”然后就可以直接进入到无线列表在做后续操作了。iOS操作如下：

iOS： 设置 - 无线局域网 - 选中网络 - HTTP代理手动

第四步：设置好上面步骤以后，重启微信，这可能是让微信重新检测目前的网络情况，然后打开你想调试的页面（注意，要先打开要调试的页面才可以开始调试）

第五步：这个不在上面的说明里，但是需要说明下，打开调试的网页以后，在点击下面的开始调试按钮！

如果你的操作正确，弹出框会是这样的：

如果你当前没有在微信打开调试页面或打开的本地页面地址错误，则会失败：

   请注意 ，如果你想调试本地开发的页面，需要你开启web服务，使用;:port的方式来访问，如果只是一个本地页面，是无法打开调试的，形如webstrom里面快捷打开的页面地址： 这个是无法调试的。需要你搭建WEB服务，使用类似于 这种url。（ 这种写法也是无法调试的，因为微信根本打不开）。

调试模式开启以后，我们就可以直接在手机上查看调试的结果或者修改东西：

我选中这里，手机就会有类似于PC端选中的状态一样被选中

   好了，可以直接看着手机调页面了，对于一些手机端的兼容性处理更有针对性，而且可以在network那里看网络请求，十分方便。

②X5 blink内核调试

X5 blink调试步骤如下：

 首先开发者工具要验证你的手机是不是支持该调试功能，所以，首先选择验证，然后在按下面的步骤做：

   上面三步结束以后，直接点击开始调试按钮，工具会给出一个弹框，检测出你的手机信息，但是其他什么都没有，像这样

那是因为——微信还没有打开能调试的页面！！！

同样，打开一个能调试的页面，这个“白板”就变了样子了，

注意：过程中会提示“是否允许USB调试”，选择同意即可

然后点击箭头指向的“inspect”，熟悉的画面再次出现！！！

好啦，这样就可以愉快的去调试真机界面了！

本文以应用为主，说的不深，不足之处还请见谅！

心如繁星，是美还是罪？

微信web开发者工具 ios怎么使用

微信web开发者工具主要功能：

使用自己的微信号来调试微信网页授权；

调试、检验页面的 JS-SDK 相关功能与权限，模拟大部分 SDK 的输入和输出；

使用基于 weinre 的移动调试功能；

利用集成的 Chrome DevTools 协助开发。

　工具顶部菜单栏是刷新、后退、选中地址栏等动作的统一入口，以及微信客户端版本的模拟设置页。左侧是微信的 webview 模拟器，可以直接操作网

页，模拟用户真实行为。右侧上方是地址栏，用于输入待调试的页面链接，以及清除缓存按钮。右侧下方是相关的请求和返回结果，以及调试界面和登录按钮。