微信小程序代碼怎么在開發(fā)者工具中打開？

微信開發(fā)者工具有三大模塊。小程序模擬器、小程序編輯器、小程序調(diào)試器。每個模塊都有不同的作用。調(diào)試器的功能類似瀏覽器里頁面的審查元素，我們在元素調(diào)式框里修改屬性，可以查看到頁面相關(guān)屬性的變化，找到相關(guān)的頁面樣式文件。微信小程序開發(fā)工具的調(diào)試器也是這樣子。

微信開發(fā)者工具-調(diào)試器

調(diào)試器分為 6 大功能模塊：Wxml、Console、Sources、Network、Appdata、Storage

Wxml

Wxml用于幫助開發(fā)者開發(fā) Wxml 轉(zhuǎn)化后的界面。在這里可以看到真實的頁面結(jié)構(gòu)以及結(jié)構(gòu)對應(yīng)的 wxss 屬性，同時可以通過修改對應(yīng) wxss 屬性，在模擬器中實時看到修改的情況。通過調(diào)試模塊左上角的選擇器，還可以快速找到頁面中組件對應(yīng)的 wxml 代碼。

Sources

Sources 用于顯示當前項目的腳本文件，同瀏覽器開發(fā)不同，微信小程序框架會對腳本文件進行編譯的工作，所以在 Sources 中開發(fā)者看到的文件是經(jīng)過處理之后的腳本文件，開發(fā)者的代碼都會被包裹在 define 函數(shù)中，并且對于 Page 代碼，在尾部會有 require 的主動調(diào)用。

Network

Netwrok 用于觀察和顯示 request 和 socket 的請求情況

Appdata

Appdata 用于顯示當前項目當前時刻 appdata 具體數(shù)據(jù)，實時地反饋項目數(shù)據(jù)情況，可以在此處編輯數(shù)據(jù)，并及時地反饋到界面上。

Storage

Storage 用于顯示當前項目的使用 wx.setStorage 或者 wx.setStorageSync 后的數(shù)據(jù)存儲情況。

Console

Console有兩大功能：

開發(fā)者可以在此輸入和調(diào)試代碼小程序的錯誤輸出，會顯示在此處