簡介:Egret Inspector 是一款Chrome瀏覽器插件。使用 Inspector，你能夠穿透 Canvas，用滑鼠直接定位顯示對象，Inspector會高亮顯示對象的邊界、坐標。顯示列表面板中會顯示當前選中對象在顯示列表樹種的層級，一目了然，UI調試效率顯著提升。屬性面板會顯示當前選中對象的所有屬性值，調試更加方便，你還可以直接修改屬性，實時查看修改後的效果。雖然現在egret有方便的eui類庫,但可能有些時候為了減小包體體積並不引入eui類庫,而是直接使用gui進行編寫，這時候調整ui使用Inspector就顯得更為方便、直觀。
2.5.5版本相比之前版本更改了插件的安裝方式，修復了63版本以上插件損壞問題,修復了chrome 62版本一下斷開後無法重現連接問題，增加了監聽埠斷開onMessage事件；修復了樹結構面板中有時切換後臺重新回到操作無法同步屬性面板，使用Array.isArray()方法區分類型。
一、安裝Inspector插件
注意：安裝inspector插件前請您先查看下自己chrome瀏覽器的版本，在幫助--->關於中查看版本，如何您的瀏覽器版本大於或等於63.x.x.x請使用開發者安裝模式，如小於63.x.x.x您可以使用普通安裝模式。 為保證工具可用，請重新啟動瀏覽器 。
下載地址：https://egret.com/products/others.html#egret-inspector 也可以在Egret Launcher中直接下載
1.開發者安裝模式：
- 打開Chrome，轉到Chrome擴展工具頁 (可以直接輸入chrome://extensions/ 打開)。
- 先把開發者模式打開。
- 然後會出現加載已解壓的擴展程序，點擊彈出瀏覽文件夾，選擇剛剛zip解壓出來的EgretInspector-install文件夾。
- 點擊確定安裝，安裝完成的狀態。
2.普通安裝模式：
- 注意：您的chrome瀏覽器一定要小於63.x.x.x版本才可以使用。
- 把下載的crx文件直接拖動到Chrome的擴展工具窗口中
- 點擊確定安裝
- 安裝完成的狀態：
二、打開Inspector插件
1.首先在chrome擴展插件中啟用插件。
2.然後按F12打開調試面板，點擊上方工具欄中的Egret。
三、調試顯示對象
1.顯示面板：
1).FPS顯示面板。
2).顯示列表面板。
3).阻止點擊事件：
當想要檢查按鈕等點擊之後會消失的對象，請勾選「阻止點擊動作」選項再進行檢查操作。
4).顯示滑鼠划過的對象：
勾選顯示列表面板中的「高亮划過對象」選項，然後當滑鼠在場景中移動時就會高亮顯示滑鼠滑過的對象。
5).選中點擊對象:
高亮顯示滑鼠點擊對象，並在屬性面板中顯示該對象的屬性。取消改選項時，將不再跟蹤滑鼠點擊動作。
6).刷新按鈕:
由於在遊戲中顯示列表樹變化頻繁，所以Inspector中的顯示列表樹並不是實時更新的，而是當滑鼠點擊對象時更新。當你長時間沒有點擊時，顯示列表樹可能會與場景中的結構由很大差異導致不能自動更新，這時可以點擊刷新按鈕開重新加載顯示列表樹。
7).展開顯示列表:
在現實列表樹中顯示對象前方帶有 + 號的對象表明含有子元素，可以點擊展開。顯示對象後面的選框是快速隱藏或者顯示該對象的開關方便查看被遮蓋的對象。
8).顯示/隱藏選中對象:
取消勾選會將該對象的visible屬性設置為false,會將顯示對象隱藏。
注意：
- 搜索在現實列表樹下方的搜索框中（快捷鍵Ctrl/Command + Shift + F）輸入 顯示對象name或hashCode來搜索。
- 右擊顯示列表中的對象，點擊存儲為全局變量，在控制臺中將會輸出全局變量名和該對象。
2.屬性面板:
1).列出方法：
在屬性列表中顯示方法，滑鼠經過時會顯示方法的內容。
2).列出私有屬性：
選擇是否顯示以下劃線開頭的屬性，並非TS 的private。
3).屬性編輯
雙擊屬性值，即可編輯屬性，回車或者離開輸入框提交更改。
4).對於只提供Getter沒有Setter方法的屬性，不能編輯 。
5).在程序運行界面上會顯示出選中對象的位置及尺寸信息。
注意：不在舞臺顯示出來的對象是不會在屬性面板中顯示出其對應的信息的。
如何使用Egret粒子編輯器實現煙霧效果
如何使用Egret插件壓縮代碼包體積，減少請求數量
菜鳥|小白接觸白鷺引擎4天，成功做了一款足球小遊戲
菜鳥|EUI卡牌遊戲製作
菜鳥丨密室逃生Egret遊戲教程
菜鳥|使用P2物理引擎製作物理小球
菜鳥丨2D骨骼動畫工具DragonBones的使用教程
菜鳥丨用Egret製作功能簡單的打地鼠類遊戲《冰桶挑戰》
菜鳥 | 紋理集打包和動畫轉換工具Texture Merge的使用教程
開發者技術交流區：bbs.egret.com
合作開放平臺：open.egret.com
商務合作：bd@egret.com
招聘郵箱：hr@egret.com
產品合作QQ：248843012
渠道合作QQ：2669903485
白鷺引擎微信號