微信web开发者工具Mac版小程序公众号H5调试

最近不少朋友问我，在Mac上搞微信小程序和公众号H5调试到底顺不顺手。说实话，我刚换Mac那会儿也折腾了一阵，后来把微信web开发者工具 Mac版摸熟了，发现它其实比Windows版还清爽。今天就把我这段时间的使用感受整理一下，从下载安装到实际调试，再到踩过的坑，一次性说清楚，给刚入门的朋友省点时间。

应用名称：微信web开发者工具 Mac版 微信小程序公众号H5开发调试IDEv2.02.2608031 Mac官方稳定版 下载地址：https://m.fxxz.com/f/770911

Mac版装完第一件事，先别急着写代码

下载渠道其实就一个，微信官方文档里找开发者工具，选macOS版本。装好之后打开，第一眼会觉得界面挺干净，左侧项目列表，右侧编辑区，底下控制台。但很多人卡在第一步——登录。这里提醒一句，微信web开发者工具 Mac版必须用绑定了开发者权限的微信号扫码，普通微信号进去只能看不能建项目。我当初拿自己私人号扫了半天，一直提示无权限，后来换成公司管理员给的号才进去。另外Mac版对系统版本有要求，太老的macOS比如10.13以前，装完可能打不开，直接闪退，建议先看下自己的系统版本。

小程序调试，这几个快捷键能省一半时间

建好项目之后，日常用得最多的就是模拟器和真机预览。Mac版有个好处，触控板手势支持得不错，双指滑动就能滚代码。调试小程序的时候，我习惯把微信小程序开发调试面板固定在右侧，改完样式直接看效果。快捷键记两个就够：Cmd+S保存并自动编译，Cmd+Shift+P打开命令面板。还有一个隐藏技巧，点模拟器右上角那个小手机图标，能切换不同机型尺寸，做响应式布局的时候特别有用。真机预览扫码就行，但注意手机和电脑要在同一个WiFi下，不然预览二维码刷不出来。

公众号H5调试，别忽略这个内置浏览器

很多人以为这工具只能搞小程序，其实公众号H5开发调试它也管。在项目类型里选公众号网页，填上你的H5地址，就能在工具里直接打开。关键是它自带一个类似Chrome的调试内核，Console、Network、Elements都齐全。我平时调公众号菜单跳转的H5页面，就直接在这里看请求和报错，不用来回切浏览器。有一点要注意，公众号H5涉及微信JS-SDK的时候，得在工具里配置安全域名，不然签名一直报错。这个坑我踩过，折腾了半小时才发现是域名没加对。

热重载和真机调试，体验到底怎么样

Mac版的热重载速度我觉得还行，小项目基本秒级刷新，大项目会慢一两秒，但能接受。真机调试分两种，一种是预览，一种是远程调试。远程调试更实用，手机上操作，电脑上同步看日志。不过有时候会抽风，连不上，我的经验是先把手机上的调试开关关掉再重开，或者重启一下工具。另外微信web开发者工具 Mac版对M系列芯片的兼容性已经不错了，我用的M1 MacBook Air，跑起来风扇基本不转，比开安卓模拟器轻快多了。

那些让人头疼的闪退和卡顿，怎么破

用久了总会遇到几个糟心事。最常见的是打开项目直接闪退，尤其是从旧版本升级上来的时候。解决办法很简单，把工具彻底退出，去用户目录下找到缓存文件夹删掉，重新打开一般就好了。还有就是代码提示偶尔失灵，这个多半是项目太大索引没建完，等一会儿或者手动触发一次编译就行。另外如果你同时开了多个项目窗口，内存占用会比较高，建议关掉不用的。Mac版还有一个专属问题，就是外接显示器的时候窗口拖过去可能会花屏，更新到最新版基本能解决。

给新手的几个实在建议

如果你是刚接触微信小程序公众号H5开发调试IDE，别一上来就啃文档。先建一个官方模板项目，把里面的页面改一改，跑起来看看效果，比看半天说明强。然后遇到报错先看Console，大部分问题那里都有提示。还有，工具里的“帮助”菜单有个“开发者社区”入口，很多奇怪的问题别人已经问过了。最后说一句，Mac版和Windows版在功能上基本一致，但Mac的界面更符合原生习惯，如果你主力机是Mac，直接用Mac版就行，不用纠结。希望这篇能帮你少走点弯路，调试顺利。