Just a Computer Graphics Studio & My Life

[iOS] 視圖除錯 (View Debugging)

寫完程式就會來測試除錯,過去幾乎都只能在字裡行間找出臭蟲,現在拜Xcode之賜,可以視覺化來視圖除錯 (View Debugging)!這對所有設計使用者介面的工程師來說可是相當棒,因為設備只有一個螢幕,每個畫面都會塞滿視覺元件,等待使用者與其互動後來變化視覺元件,很多時候我們以為這些元件非常正常地運行,然而因為看不見就以為真的沒問題,呵~多虧現在裝置規格非常之高,所以稍微過度使用也無傷大雅!

view debugging animation

據說View Debugging原本是第三方插件,之前我也有印象有這回事,大概因為這功能能幫助許多工程師,於是Apple就把功能整合進Xcode 6

拿我公司產品「垃圾管家」做示範,只要在實機或模擬器跑的當下,Xcode就會出現一個神秘的圖示,然後我們只要按下去,馬上就進入視圖除錯模式,也就是當下螢幕所呈現的樣子,就好像下中斷點來除錯的感覺!

View Debuggin

View Debugging不用寫任何程式碼即能除錯,最棒的就是看穿整個視圖的結構,也就是畫面上所有我們生成的視覺元件,都能清楚地知道它目前所在的位置。像我有時候就會多生成一次元件,此刻就能輕易地看出問題所在呢!

view debuggingx

進一步點擊該元件後,我們可以查看它的各種特性,是不是符合我們所預期的狀態。甚至我們可以即時修改 (Live Modifications),如背景變為紅色,字串改為「逍遙文工作室」,看它在畫面上呈現的效果如何,而不必特地在專案類別中找出特定程式碼,再花時間重新編譯執行。

即時修改的用法是,先點擊想要變更的視覺元件,然後在其資訊頁面上找到其記憶體位址,接著就可在Xcode控制台輸入指令,就像我們過去停留在中斷點時的使用方式!

view debugging3

expr [(UILabel *)0x125eadba0 setText:@"HappyBoy”]

就是將label的字改為HappyBoy,因為HappyMan想返老還童了:P~

view debugging4

還有指令可以看出此頁面的視圖階層,我們通常會用navigation來push許多視圖成堆疊。使用指令後,就可以知道那個在最上層的視圖是哪個類別囉~

po [[[[UIApplication sharedApplication] keyWindow] rootViewController] _printHierarchy]
<UINavigationController 0x125e1b670>, state: appeared, view: <UILayoutContainerView 0x125e1a110>
| <SPHomeViewController 0x125e1b2c0>, state: disappeared, view: <UIView 0x125e2b440> not in the window
| <TRCMovieListViewController 0x125e84120>, state: disappeared, view: <UIView 0x125d9a810> not in the window
| <TRCMovieDetailViewController 0x125d9f8e0>, state: disappeared, view: <UIView 0x125d050a0> not in the window
| <TRCMovieTimelineViewController 0x125dc7410>, state: appeared, view: <UIView 0x125eaf6c0>

實際來示範一下我正在開發的畫面⋯⋯很明顯地看到畫面有數字疊在一起,我們想知道原因,所以來視圖除錯~

view debugging7

哇~看起來很壯觀,好多label疊在一起呢!

view debugging6

你在看它嗎?可以靠近一點喔~

view debugging8

終於知道原因,是因為cell重複使用,要先移除先前動態生成的label,再貼上新的label顯示~

view debugging9

於是,我愛上debug不是強者如我的人,可以利用視覺化的方式來找出問題所在!我之所以熱愛寫程式,是因為所見即所得啊:)~

參考:View Debugging in Xcode 6

廣告

發表留言

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s

標籤雲

%d 位部落客按了讚: