微信公众平台为广大开发者带来福音，强势推出微信web开发者工具，让开发人员可以通过这款工具方便快捷的在PC电脑端或者Mac端完成开发与测试，那么问题来了，微信web开发者工具如何使用？别担心，小编在此为大家简单介绍下使用方法吧！
微信web开发者工具使用教程：
1、首先用户需要做的就是先下载安装，并启工具。
即刻下载使用==》微信web开发者工具下载
2、调试微信网页授权，具体操作步骤为：
1）开发者可以在调试器中点击“登录”，使用手机微信扫码登录，从而使用真实的用户身份来开发和调试微信网页授权。
请确认手机登录页，绑定的公众号为“微信 web 开发者工具”。
2）为了保证开发者身份信息的安全，对于希望调试的公众号，我们要求开发者微信号与之建立绑定关系。具体操作为：公众号登录管理后台，启用开发者中心，在开发者工具——web 开发者工具页面，向开发者微信号发送绑定邀请。
3）开发者在手机微信上接受邀请，即可完成绑定。每个公众号最多可同时绑定10个开发者微信号。邀请确认页面如下图所示：
4）完成登录和绑定后，开发者就可以开始调试微信网页授权了，注意只能调试自己绑定过的公众号：
非静默授权的 URL：点击查看
在微信 web 开发者工具中上面的 URL，webview 模拟器显示效果如图：
点击“确认登录”即可带着用户信息跳转到第三方页面，很方便的进行后续的开发和调试。
静默授权的 URL：点击查看
在微信 web 开发者工具中打开该 URL 则会自动跳转到第三方页面。
（注意：如果使用了代理，需代理本身支持直连，才能调试页面。
）
3、模拟JSSDK权限校验
通过 web 开发者工具，可以模拟 JSSDK 在微信客户端中的请求，并直观地看到鉴权结果和 log。以微信 JSSDK DEMO 页面为例：
。
open。weixin。qq。com/jssdk
在调试器中打开该 URL，可以方便地在右侧的 JS-SDK Tab 中看到当前页面 wx。config 的校验情况和 JSSDK 的调用 log。 如下是校验通过的页面：
如下是校验未通过的页面：
在“权限列表” Tab 中，可以查询到当前页面拥有权限的 JS-SDK 列表：
4、移动调试
移动调试功能是基于 weinre 的，并且做了一些改进，相比直接使用 weinre 有两个优点：
1）无须手工在页面中加入 weinre 调试脚本
2）可以在 weinre 的网络请求页卡中，看到完整的 ，非局限于 ajax 请求
（注意，移动调试功能暂不支持。
）
5、Chrome DevTools
微信 web 开发者工具集成了 Chrome DevTools。同之前在 PC 上的调试体验一致，可以快速上手。
以上内容就是微信web开发者工具的一些基本使用方法，毕竟是一款适合开发人员使用的“高大上”软件，对于小编这种“文盲”来说是根本不知道软件的具体使用方法的，这个还需要开发者自行摸索，相信它一定能够成为开发者开发必备的利器。
小程序开发工具有新版本更新啦！开发体验更好了，详情可以查看微信公众平台-小程序://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html
好了我们开始小程序实战吧！
第一步：开发工具下载
下载开发工具：微信开发者工具
第二步：创建小程序项目
1、选择“小程序”开发模式
安装完成后，选择“小程序项目”
2、添加项目
点击“添加”
3、项目配置
如果没有AppID 点击“可点此体验”也可以哦
申请AppID:://mp.weixin.qq.com/wxopen/waregister?action=step1
4、完成
开发区域
备注：因为申请测试会占用测试机器资源，所以一个 APPID 一天只能申请一次测试报告。
第三步：代码结构
项目里边生成了不同类型的文件:
.json 后缀的 JSON 配置文件
app.json 是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
.wxml 后缀的 WXML 模板文件
从事过网页编程的人知道，网页编程采用的是 HTML CSS JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。
.wxss 后缀的 WXSS 样式文件
WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。
新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。
提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。
此外 WXSS 仅支持部分 CSS 选择器
.js 后缀的 JS 脚本逻辑文件
一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。
详情可以查看微信官方文档：微信小程序代码构成
总结
以上内容大家都看了都非常简单，更详细的可以参考微信官方文档，根据以上步骤可以搭建自己的第一个微信小程序，大家可以对生成的初始代码可以做一些细微的调整，比如看一下如何获取微信用户信息（userInfo），log日志如何打印，页面怎么跳转等。
