過去0前端基礎的我如果能看到這篇文章，應該會少走很多彎路。
文檔中的截圖來自項目：“黃薔的記事本第一季”，以下簡稱“此項目”。
工具欄介紹
IDE界面最上面一行是工具欄，在此項目中主要用到的工具有模擬器、編輯器、調試器、雲開發、編譯預覽。單擊後即可顯示/隱藏對應的模塊，現在依次介紹各部分功能。
模擬器介紹
模擬器可以顯示當前代碼對應的預覽界面，並能夠模擬用戶在其上進行點擊、拖動、跳轉界面。前端框架效果可以非常直觀地反映在模擬器界面。
編輯器介紹
## 文本編輯
文本編輯器，支持多欄對比顯示，具有相對完善的代碼匹配提示的功能。有一定的錯誤糾正提示（圖中bar後的大括號下有紅色波浪線），鼠標移動到上面會有錯誤原因顯示。
但是有一些地方不夠“完美”，比如引號中的“{{}}”還有部分屬性的配置。
經常command+S保存是個好習慣（雖然保存就會自動重新編譯，有時要1s左右）。
目錄顯示
目錄可以快速定位到特定文件。簡單介紹一下各個文件的主要作用：
.js一般用於內部邏輯，主要是node.js的語法，兼容一些微信的SDK接口；wxss用於模板設計,主要是CSS語法規則；wxml介於兩者之間，一方面會調用一些.js中的一些函數，另一方面主要用於位置排版，並調用wxss中給出的模型。.json文件此項目中沒有用到
調試器在這裏插入圖片描述
調試器功能很多，用好了可以非常方便地調試界面。下面逐個介紹此項目中常用的一些功能。
Console
Console作爲主要的輸出框，能夠顯示一些運行時的警告，以及使用console.log(“變量名稱”)進行實時輸出，調試時作用很大。
Network
Network模塊可以監視與數據庫的交互，能夠具體地顯示數據的交互過程。可以作爲檢視數據庫調用的一個工具。
不起眼但是用起來很方便的兩個小按鈕
檢視元素對應的wxml/wxss代碼
單擊該按鈕後再點擊調試器界面中的某個模塊，會在調試器中顯示對應模塊的代碼：
可以在下面文檔中進行快速的調試，比如多次修改width直到滿意，或者點掉前面的勾相當於快速註釋對應行。這邊可以非常快地進行樣式的調整，直到覺得滿意再將代碼複製進文本編輯器保存，這樣可以調整文字、邊框大小、位置的時候比較方便。
（注：一般都用rpx或者百分比來顯示，比較容易兼容不同橫縱比例的不同機型。）
清空Console欄
這個在交通標誌牌中應用廣泛的標誌在這裏表示的是清空Console中的內容。對於爲了檢視特定輸出的時候是比較方便的。個人經常用。
雲開發
雲開發部分默認是另外一個窗口，此項目主要用到其中的“數據庫”內容。之後會補充雲開發窗口相關的具體內容。