一、安装微信小程序开发者工具
微信官方提供了微信开发者工具。它可以让我们很方便地完成小程序的 API 和页面的开发调试、代码查看以及编辑、预览和发布等功能。使用微信开发者工具必须联网。微信官方提供了 Windows 32 位、Windows 64 位以及 macOS 系统下载包，你可以根据你的操作系统选择合适的版本下载安装。
一般推荐使用稳定版进行开发。但是因为稳定版的发布周期较长，往往一两个月才会出一次版本，因此如果在使用稳定版时遇到 bug，可以酌情采用已经修复这个版本的预发布版和开发版的安装包。
二、微信小程序开发者工具使用
打开开发者工具后，用微信扫一扫即可进入项目选择界面。单击“新增小程序”标志，进入的“新建项目”页面。可以在这里添加新的项目，并填写目录、AppID 等内容。其中，开发模式有小程序和插件两种；后端服务也有两种方式可供选择，分别是“不使用云服务”和“小程序·云开发”。
新建项目后，我们就可以看到小程序的开发主界面了。
开发者工具可以分为 4 个部分。
(1)最上面是导航菜单栏，封装了我们开发时经常使用的一些操作，例如真机调试等。
(2)开发者工具左侧是模拟器预览，可以实时预览当前的代码，帮助我们快速调试代码。
(3)右上部分是编辑器界面，在这里我们可以编写代码。编辑器具有语法自动补全的功能，在开发过程中，会自动提示用户可能使用的语法，并给出一些相关注解，帮助完善开发内容。当然，也使用得比较顺手的编辑器（如，VScode、WebStorm等），那么也可以不使用开发者工具自带的编辑软件进行代码的开发。
(4)右下部分是控制台界面，你在代码中打印的调试信息可以在这里查看。该界面有 Console、Network、Storage、AppData、Wxml 等窗口。Console 窗口包含了在开发中小程序输出的错误信息和调试信息。Network 窗口用来观察小程序发送的请求和返回信息。Storage 窗口用来显示小程序代码中主动存储的缓存信息。AppData 窗口用来显示小程序当前页面的数据信息，因为小程序实现了数据的双向绑定，因此我们在调试的时候可以直接在这里修改当前的页面数据，它会实时地展示到调试预览页面上。Wxml 窗口是帮助开发者查看页面的真实 DOM 结构，允许用户直接修改 DOM 树或者对应的样式。
三、小程序开发者工具本地设置
打开右上角的“详情”即可根据需要做一些编译相关的配置修改。比如，刚开发早期比较常用的是“不校验合法域名、web-view（业务域名）、TLS 版本以及HTTPS 证书”，如果你有域名还未申请或还未通过审核，把这个选项勾选上就可以跳过白名单检查。
--------------------------------------
版权声明：本文为【PythonJsGo】博主的原创文章，转载请附上原文出处链接及本声明。
博主主页：https://my.oschina.net/u/3375733
本篇文章同步在个人公众号：
