ionic2界面調試，浏覽器，chrome

一、使用浏覽器幫助調試ionic生成的頁面

       我們在開發ionic項目的時候，經常會出現，頁面效果出錯，沒有達到預期的效果，包括元素的css屬性等不滿意的地方。我們就可以使用浏覽器的調試功能來檢視頁面布局代碼，并實時動态調整。我們開發原生Android的時候，可以動态的看到預覽。同樣的。在開發ionic應用的時候，我們都是使用浏覽器來檢視效果的。知識，浏覽器給我們提供了一個非常好用的調試功能，幫你快速的檢視頁面布局元素，以及找出布局問題。（簡直比原生開發Android的界面布局調試都友善很多）。

       下面更具我的經驗，簡紹一下使用方法和功能：

1.    一般我們使用ionic的浏覽器調試指令，就可以檢視效果。再我切換到ionic2的時候，使用體驗就更好。 每次修改項目代碼，就會被監測到，并重新編譯，并在浏覽器自動重新整理。調試起來非常友善。在浏覽器調試的指令是：ionic serve

2.    接下來就是調試，隻要在浏覽器頁面點選鍵盤的F12就可啟動調試界面。在調試界面我們可以檢視網頁元素，指令行，等，我們修改頁面的時候，一般是看element（元素）選項裡面的html元素布局。以及對應的css布局參數。

我們編寫的頁面布局代碼，經過ionic解析，生成真正浏覽器可以解析的html代碼。通過調試模式，我們可以看到真正的代碼布局以及标簽事實上使用的css屬性。，從圖上可以看到，小三角，點選小三角展開，我們就可以看到子選項，而且我們滑鼠放在選項上，對應的頁面就會變藍，非常清楚的告訴我們每個标簽在網頁中的位置布局。給我們調試非常友善高效的體驗。

二、使用浏覽器檢視别人項目的界面布局

由于ionic以及react項目是動态通過代碼生成網頁頁面，index.html檔案裡隻有打包好的js和css。是以，我們打開别人項目的時候，看不到靜态的布局代碼。隻看看到一大片的js代碼，和css檔案。那麼對于我們想要參考學習人家界面布局的時候很困難。那麼我們其實可以借助浏覽器的調試功能更，檢視到人家界面的布局。當然，我們看到的是解析過的html代碼，裡面糅合了ionic庫的很多東西。是以我們隻能大概了解布局實作。還是不可以直接得到人家的源代碼。（是以呢，ionic做的軟體，安全性還是很好的）