在进行微信开发的时候，必须要输入外网域名，我们本地没法进行调试，这给我们造成很大的不方便，系统在开发阶段容易出现bug，如果服务器上的版本已经在运行了，我们不能在那基础上进行开发调试，所以能够在本地进行微信开发很重要。

微信web开发者工具

微信推出了一个web开发工具，支持在本地开发环境调试授权登录、 模拟JSSDK权限校验、移动调试，用过之后感觉方便。

微信web开发者工具地址：https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html

下面推荐一个Linux用户的微信开发者工具，虽然没有微信自家的功能完备，基本的功能还是有的，使用过也不错。

微信开发者工具（wechat_web_devtools）Linux版，微信小程序Linux版，支持最新微信小程序开发和微信网页开发

微信官方讲解很详细了，这里分享一些自己遇到的坑和技巧。

关注公众号

如果你使用微信Web调试工具进行网页开发，首先你需要关注你所调试的公众号和公众号安全助手两个公众号。

绑定开发者账号

你必须成为相应公众号的开发者才能进行调试。

这个可能容易忘记，如果要用该工具，需要绑定开发者账号。

登录微信公众平台，在微信公众号后台的左下侧进入开发者工具，进入微信Web开发者工具后，点击绑定开发者微信号，就可以绑定开发者账号了。

网页授权域名

这次开发的功能是用户通过微信授权进行登录，需要在公众平台配置网页授权域名。

登录微信公众平台，在微信公众号后台的左下侧进入开发>接口权限,找到网页授权获取用户基本信息的接口，点击修改，设置网页授权，首先需要上传微信提供的一个验证文件，然后才能填写域名。

微信的授权回调域名的设置有一些限制：

用户在网页授权页同意授权给公众号后，微信会将授权数据传给一个回调页面，回调页面需在此域名下，以确保安全可靠。
注意事项：

1. 回调页面域名或路径需使用字母、数字及“-”的组合（例：wx.qq.com或wx.qq.com/mp），不支持IP地址、端口号及短链域名。填写的域名或路径需与实际回调URL中的域名或路径相同。
2. 填写的域名须通过ICP备案的验证。
3. 将文件MP_verify_j9vcNn6PYoEcuoBT.txt（点击下载）上传至填写域名或路径指向的web服务器（或虚拟主机）的目录（若填写域名，将文件放置在域名根目录下，例如wx.qq.com/MP_verify_j9vcNn6PYoEcuoBT.txt；若填写路径，将文件放置在路径目录下，例如wx.qq.com/mp/MP_verify_j9vcNn6PYoEcuoBT.txt），并确保可以访问。
   如果要结合web开发工具在本地测试授权登录，需要将回调域名指向到本地，在类unix系统下可以通过修改/etc/hosts实现。

修改 host 文件

微信有JS接口安全域名和网页授权域名的限制，所以想要本地调试最重要的是解决这个问题。具体在右上角公众号名称-公众号设置-功能设置里面。

想要把域名映射到本地显然是改 host 文件方便一些，因为你不太可能把线上的域名改成本地。

Linux 下修改host：

$ sudo vi /etc/hosts

#127.0.0.1	localhost
127.0.0.1   ***.com

改完 host 之后保存，你就可以在微信Web开发者工具中调试本地代码了，如果是HTTPS的域名，你还需要在本机安装相关证书，然后再项目目录下的nginx.conf文件中设置:

http{
	server {
		listen       443 ssl;
	}
}

ngrok

这是什么鬼？它是国外开源的一款可实现内网穿透工具（服务端+客户端），即，开启后，访问公网ip或域名，将TCP链接转发到内网。所以，通过ngrok，可实现：
访问域名，最终指向本地服务，那么修改本地代码，立即就可以看到效果，微信SDK要求的域名也能够满足了，微信SDK终于可以舒服的调试了。
另外，ngrok可以和微信开发者工具一起使用。
国内 http://qydev.com/
这个站点提供了免费服务，但还是希望大家能适当捐助，以帮助作者维持服务器费用，或者选择自行搭建ngrok服务。

优点：

任何人访问ngrok绑定的域名，都可以看到效果

缺点：

公众号后台需要设置域名为ngrok绑定的域名
依赖ngrok服务端+客户端，搭建这样一个调试环境成本略高

NATAPP

一个基于ngrok的国内高速内网穿透服务,适用于微信开发调试,简单方便。

如何区分微信浏览器

function isWexin() {
const ua = navigator.userAgent.toLowerCase();

if (/micromessenger/.test(ua)) {
  return true;
}
  return false;
}