最近有不少朋友问我，在Mac上做微信小程序和公众号H5开发，到底该用啥工具才顺手。其实答案很简单，就是微信web开发者工具 Mac版。这东西说白了就是微信官方给开发者准备的一个IDE，不管你是写小程序、调公众号网页，还是搞H5页面，它都能一站式搞定。我自己用MacBook Pro折腾了快两年，从最开始下载安装都摸不着头脑，到现在真机调试、代码热重载玩得飞起，中间踩过的坑真不少。今天就把这些实操经验整理出来，给刚入门的兄弟姐妹们省点时间。
类别： 编程开发 大小：523.9M 语言：中文
Mac版下载安装，别去乱七八糟的网站
先说下载。很多新手第一反应是去百度搜“微信web开发者工具 Mac版下载”，结果点进去一堆推广站，下下来的安装包要么版本不对，要么带一堆捆绑。正确姿势是直接去微信官方文档站，找到开发者工具下载页面，选macOS版本。注意看芯片类型，M1、M2、M3的Mac选ARM64版，老款Intel芯片选x64版，下错了打开会闪退。安装过程倒是没啥难度，拖进Applications文件夹就行。第一次打开可能会提示“无法验证开发者”，去系统设置里隐私与安全性点一下“仍要打开”就OK。装好之后用微信扫码登录，整个微信小程序公众号H5开发调试IDE的界面就出来了。
小程序调试，这几个面板你得摸熟
登录后新建项目，填上小程序的AppID，没有的话选测试号也行。左侧是模拟器，能切换iPhone和安卓各种机型，右侧是代码编辑区。重点说说调试面板，这玩意儿跟Chrome的DevTools很像，但多了几个微信特有的东西。比如Wxml面板，能直接看到页面结构对应的数据绑定，调样式的时候特别方便。Console里能打日志，Network看请求，这些跟网页调试差不多。我刚开始老忘记开“不校验合法域名”，结果本地接口一直报错，后来在详情设置里勾上那个选项才通。另外微信web开发者工具 Mac版支持代码热重载，改完保存模拟器自动刷新，不用手动点编译，效率高不少。
公众号H5调试，真机预览才是王道
公众号里的H5页面调试，跟普通网页不太一样。因为微信内置浏览器有自己的一套内核，你在Chrome里看着好好的，到微信里可能就错位了。这时候微信web开发者工具 Mac版就派上用场了。在工具里选“公众号网页调试”，输入你的H5链接，就能模拟微信环境打开。但模拟器终究是模拟器，最靠谱的还是真机预览。点工具栏上的“真机调试”，用手机微信扫二维码，手机上就能实时看到页面效果，而且还能在电脑上远程调试手机里的页面。我上次做一个活动页，按钮在模拟器里点着正常，真机上死活没反应，后来用真机调试发现是touch事件被阻止了，这种问题不真机测根本发现不了。
多账号切换和项目管理，别乱成一锅粥
如果你同时维护好几个小程序或者公众号，项目列表很容易乱。我的习惯是按项目类型分文件夹，小程序一个目录，公众号H5一个目录。在微信小程序公众号H5开发调试IDE里可以创建多个项目，每个项目独立配置。另外登录账号也能快速切换，点左上角头像就行。有个小细节要注意，Mac版工具默认会把项目存在用户目录下，时间长了缓存特别大，定期去设置里清一下缓存，不然硬盘空间嗖嗖就没了。还有那个“最近打开”列表，项目多了之后找起来费劲，建议直接固定常用的那几个。
常见坑点：代理、证书和性能
说说我踩过的几个坑。第一是代理问题，公司网络如果需要代理才能上网，得在工具设置里配好代理地址，不然登录都登不上。第二是HTTPS证书，本地开发用的自签名证书，工具默认不认，要么在设置里关掉证书校验，要么把证书加到系统信任列表里。第三是性能，Mac版工具跑久了内存占用会飙升，特别是同时开多个项目的时候，16G内存的MacBook Pro都能感觉到卡。解决办法就是别开太多项目，用完的关掉。另外微信web开发者工具 Mac版偶尔会抽风，模拟器白屏，重启一下基本能解决。
真机调试和远程调试的小技巧
最后聊聊真机调试。这个功能真心好用，但有个前提，手机和电脑得在同一个局域网里。如果公司网络隔离了设备，那就连不上。这时候可以开手机热点，让电脑连手机热点，反过来也行。远程调试的时候，手机上操作，电脑上能看到console和network，定位问题快得很。还有个小技巧，在真机调试模式下，可以长按手机屏幕调出vConsole，看一些简单的日志信息。总之微信web开发者工具 Mac版对于做微信生态开发的人来说，基本是绕不开的工具，花点时间熟悉一下，后面开发调试能省不少事。
喜欢 
高兴
鬼脸
呵呵
无聊
伤心
