新手入门丨教你10分钟攻略开发者工具

开发者工具是面向小程序开发者推出的桌面端集成开发环境（Integrated Development Environment，IDE）。IDE 支持小程序开发、调试、预览、上传等基本功能，并且集成开发者服务（包含智能客服等），支持在 Windows、Mac 平台上运行，旨在帮助开发者更高效地开发小程序。

为了进一步提升小程序的开发效率，我们聊了十几个开发者才整理出来了【开发者工具】新手入门必备指南，希望可以帮助大家轻松入门，快速上手！

为了大家更好地在开发者工具里完成小程序代码的开发，我们提供了编辑器的代码提示功能等优化大家的开发体验。

单标签自动闭合，如直接打(注意需要打 < 和 >）

标签属性补全，打对应的标签名字，如直接打 image，再按 tab，便可（注意不需要打 打开工作区设置，可以打开编辑器相关的设置在命令面板输入 >格式化文档，可以使用配置的格式化工具快速格式化文档在命令面板输入 >主题，可以快速切换主题Command + Shift + P（Windows: Ctrl + Shift + P)

可以快速唤起预览窗口，生成预览二维码

可以快速触发全量的重复编译（在「详情面板｜中「工程配置」中的「保存文件自动编译）打开的情况下，一般情况下你只要 Command + S 保存文件即可）

可以快速触发模拟器刷新

还有更多的内部功能供大家探索～

Sources 面板用于显示当前项目的脚本文件。小程序框架会对脚本文件进行编译的处理，所以开发者在 Sources 面板中看到的文件是经过处理之后的脚本文件。实际上开发者的代码都会被包裹在 define 函数中，并且对于 Page 代码，在尾部会有 require 的主动调用。

在 Source 面板中可以设置断点，对小程序进行断点调试。注意，当代码运行到断点的时候，整个小程序进入停止状态，此时模拟器会出现白屏或者无法操作的情况。

AppData 面板用于显示当前小程序项目运行时，最上层页面中 Data 具体数据（在 Page 定义时的 data 对象）。Data 数据调试可以在此处修改数据，并及时地反馈到页面 TTML 上。

开发者 3.3.5 版本起，支持对双端的真机调试也使用 AppData 面板进行 Data 数据调试。

Storage 面板用于显示当前项目使用 tt.setStorage 或者 tt.setStorageSync 后的数据存储情况。

可以直接在 Storage 面板上对数据进行新增、删除（按 delete 键或通过右键菜单）、修改等行为。

修改后的数据将直接影响 tt.getStorage 或者 tt.getStorageSync 的回调运行结果。

Mock 面板用于拦截小程序 API 并提前返回用户自定义的数据。

Audit 会对审计到的页面进行评分，给出待优化项信息，帮助开发者开发性能更好的小程序

模拟器可以模拟小程序在抖音客户端的表现。开发者可以选择不同的设备，也可以选择自定义设备，拖动模拟器来调试小程序在不同尺寸机型上的适配问题。

模拟器默认位于主界面左侧。开发者可以点击模拟器工具栏中的“模拟器切换箭头”图标来切换模拟器的布局，比如切换到主页面右侧。同时开发者还可以点击开发者工具的左上角“模拟器”按钮来隐藏或者显示模拟器。

点击模拟器右上角“独立窗口”图标触发独立窗口显示。

模拟器内置部分工具，点击模拟器顶部右上角的“工具”图标可打开工具栏，从左到右工具栏为：

开发者工具还在持续迭代优化，假如你遇到了某些问题或者有某些建议，也可以及时找到官方同学反馈。

本次我们选择了部分开发者朋友们在新手期积累的实践经验，假如你觉得有更好的最佳实践也欢迎在评论区回复我们哦！相信有你的建议，我们一定能让大家的开发更高效更便捷！

都看到这里啦~没使用过的朋友还不点击下载体验？

👇

开发者工具正式版下载