微信web开发者工具简介

早期微信应用的开发是一件非常痛苦的事情，因为基于微信的网页涉及到调用微信的接口，所以网页必须在微信的内置浏览器打开才能看到实际的运行效果。做过前端开发的同学都知道，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