我们在导航菜单击“编辑”按钮进入编辑模式，可以看到主操作区会显示小程序嘚目录树和代码编辑区域，目录树用于小程序的文件管理我们的代码编写工作需要在代码编辑区域完成。
在ct目录树’’窗口我们可以方便地查看和管理文件如图4-6所示。单击“目录树”右上角三个点的按钮可以从硬盘打开小程序代码文件、查找文件里的关键词和新建目录戓者代码文件
开发工具目前提供了wxml、wxss、js、json共4种文件的编辑功能和图片文件的预览，在我们编辑代码时也可以实时地在模拟器里预览代碼编辑的情况。
在编写代码的过程中开发工具会自动帮助用户保存当前的代码编辑状态，关闭工具或者切换到别的项目并不会丢失已经編辑的文件状态但只有按下[Ctrl+s]快捷键保存代码后，修改过的代码才能够被重新编译
同现在大部分成熟的代码编辑器一样，小程序开发工具提供了自动补全功能编辑is文件时系统会帮助我们补全所有的API，并自动给出相关的注释解释编辑wxml文件时系
统会帮助开发者直接写出相關的标签，编辑json文件时系统会帮助我们补全相关的配置并给出实时提示。
下面是小程序开发工具常用的快捷键其中最重要的是[Ctrl+s]保存文件快捷键，每次修改代码后都需要用这个快捷键保存更改的内容：
·Ctrl+cCtrl+V：复制，粘贴如果没有选中任何
·ctrl+＼：隐藏侧边栏
·ctrl+m：打开或者隱藏模拟器
单击导航菜单的“调试”按钮进入调试模式，主操作区会显示调试工具调试工具有6个窗口：“Console'’、“Wxml”、“Sources'’、“Network”、“AppData'’、“Storage'’。
“Console'’窗口就是小程序的调试控制台也被叫作终端窗口，用于给开发者输入调试代码和查看调试信息也用于小程序的错误输出，是我们在小程序调试时最常用的面板
“Wxml”窗口用于帮助开发者开发wxml文件转化后的界面。类似我们在Chrome浏览器窗口查看一个页面时单击鼠标右键“开发者工具”的“Elements'’窗口看到的信息，在这里可以看到真实的页面结构和结构对应的WXSS属性同时可以通过修改WXSS属性在模拟器中實时看到修改的情况。通过调试模块左上角的选择器还可以快速找到页面中组件对应的wxml代码。关于wxm]及WXSS文件我们会在后面的章节详细介紹。
“Sources”窗口用于显示项目的脚本文件与浏览器的代码开发不同，微信小程序框架会对脚本文件进行编译所以在Sources面板中开发者看到的攵件是经过处理之后的脚本文件，开发者的代码都会被包裹在define函数中并且对于Page代码，在尾部会有require的主动调用
"AppData"窗口用于在调试中实时查看和编辑项目数据情况，在此处编辑数据将会实时反馈到模拟器界面上。
接口后的数据存储隋况