SAP成都研究院非典型程式猿，菜園子小哥：當我用UI5診斷工具時我用些什麼

身邊有些年輕同僚曾經向我表達過這種困擾：盡管完成日常工作沒有任何問題，但是還想更進一步，把代碼寫得更好些，做到精益求精。現在寫的代碼能實作功能，但是不知道可以怎樣寫得更好。

除了閱讀優秀的開源庫開源架構，一點一滴積累之外，Jerry的一個建議是大家可以多琢磨琢磨每天工作使用到的一些工具，研究下這些工具裡自己感興趣的那些功能的實作原理。想一想這個功能如果讓自己實作，該怎樣去設計和編碼，琢磨完之後再去看工具的實作，和自己心中所想進行比較。這樣一來，既學習了這些工作優秀的設計和實作，又進一步熟悉了工作本身，可以提高平時編碼和調試的效率，一舉兩得。

SAP的前端UI給大家提供了各式各樣的診斷工具，這些工具能友善大家調試，或是提供一些輔助技術資訊，提高排錯效率。

比如CRM WebClient UI的Ctrl+Alt+F2:

SAP Cloud for Customer的Ctrl+滑鼠左鍵：

以及SAP UI5的兩組診斷工具：

Ctrl+Alt+Shift+P

Ctrl+Alt+Shift+S

今天，就由SAP成都研究院的菜園子小哥王聰給大家聊聊他是如何專研第二組工具的。

和梁山好漢菜園子張青在大樹坡開店之前的職業一樣，王聰的一大愛好也是種菜。

據王聰的老闆Mint介紹，王聰的廚藝也不錯，喜歡烹饪。不過，各位單身妹紙們，遺憾的是，王聰已經結婚了，如今是一位模範丈夫。

躬耕于田間之餘，王聰也時常文藝一把。請通過下面的連接配接，欣賞王聰3分30秒的吉他演奏：《我的歌聲裡》。

http://compaign.tudou.com/v/611489926.html?from=timeline&isappinstalled=0

試想一個春雨綿綿的午後，王聰置身于滿園蒼翠欲滴的田間，一人一吉他一台筆記本電腦。吉他彈奏，電腦程式設計，這畫面太美，依稀有幾分陶淵明“采菊東籬下，悠然見南山”的風雅。

王聰除了種菜之外，另一個技能就是德語。大家點選這篇文章尾部的”閱讀原文”, 就能看到這篇文章的英語和德語版本。Jerry是不懂德語的，是以也不知道文章裡德語運用的水準如何。不過Jerry認識一位在德國SAP圈打拼了20多年的資深留德華，林峋博士。去年Jerry和林博士去Walldorf鎮上的商店買床墊，聽他和賣床小妹德語對話那個流利，羨慕極了。好事的Jerry把王聰的這篇文章給林博士過目，讓他幫忙品評下王聰的德語水準，得到了林博士的贊譽。

王聰的SAP Community上的部落格都是下面這種風格的，這些是Jerry達不到的水準：

這就是王聰，一個能寫代碼能種菜能玩音樂的非典型程式猿。下面是王聰的正文。

大家好我是王聰，目前在SAP成都研究院Revenue Cloud團隊負責話唠和捧場王的角色。以前年輕的時候還喜歡攝攝影聽聽音樂啥的，可慢慢的我卻在通往”油膩中年”的路上漸行漸遠，不再”面朝大海春暖花開”，而開始”關心糧食和蔬菜”。做飯和種菜成了我現在的愛好，我成了一個真正的”馬農”(颠着大馬勺的農民)。

前段時間承蒙汪主編賞臉約稿，讓我寫一寫工作中用到的一些工具。心中激動之餘沖入腦子的第一感覺就是标題的這幾個大字。一般來說拿審題後的第一印象當題目總是有那麼點不負責任，但想來村上春樹寫出來的書名不也就是長這個樣子，是以心中也就無所謂了。

以汪主編的風格，在技術正餐之前總得來點三國水浒金庸古龍之類的小零嘴先墊吧墊吧。今天我想談談刀，但我談的不是武俠的刀，而是小巧現代的瑞士軍刀。

我人生中的第一把瑞士軍刀是我08年考上大學時我媽媽的一個同僚阿姨送的。當時她問我報的什麼專業，我怕“通信工程”在她們看來不太好了解，就索性說自己是學“電腦”的。然後她就特地挑了一把有很多改錐的CyberTool系列的瑞士軍刀送給我，并真誠的叮囑我好好學習，以後修電腦的時候一定用得到。這把刀伴随了我很多年，卻在我之後的一次疏忽中易主給了機場的安檢大哥。再加上畢業之後我并沒有開個小店修電腦，想來當真辜負了阿姨的期冀。

之後我又有過一些其他的瑞士軍刀，但到頭來手裡隻剩一把Waiter系列的小刀。因為用來用去會發現很多花哨的功能幾乎永遠都不會被用到。除了偶爾拿來開瓶啤酒剔剔牙之外，隻有那片鋒利好用的主刀才是我一次次把它摸出口袋的理由。

在去年初識UI5的時候我就被強大的UI5診斷工具震驚了，功能豐富簡單易用随喚随出活好不粘人，簡直是一把出色的瑞士軍刀。但慢慢的新鮮感褪去，于我來說Control Tree子產品就是那片百用不膩的主刀。

Control Tree了解一下？

這裡我們用一個簡單的例子認識一下Control Tree，在頁面上顯示一個sap.m.Text文本。通過Shift+Ctrl+Alt+S呼出UI5診斷工具，然後在Control Tree标簽下我們可以清楚的看到整個頁面的控件樹形結構，點選Text節點，我們就可以看到如下行為：

相應的屬性被展示出來，使用者可以動态修改，也可在相應屬性的Get/Set方法中加斷點——這邊打個勾，運作時執行到Get/Set方法後斷點就自動觸發了，如此神奇。怎麼做到的？這實際上是面向切片程式設計思想的一個應用。細節參看汪主編部落格：

https://blogs.sap.com/2016/05/16/a-small-tip-i-learn-from-ui5-diagnostics-tool-a-practice-of-aop-programming/

可以在檢視控件相關的綁定資訊

可以在控件的所有方法中加斷點 （原理同第一條後半段）

相應控件被高亮一秒鐘

這裡我們對其中的部分行為debug下去，看看其背後的邏輯。

屬性清單是哪來的？

首先我們通過萬能的在EventProvider.js的229行加斷點方式定位到sap/ui/core/support/plugins/ControlTree.js檔案，并找到目标方法getControlProperties。衆所周知一切UI5控件都是派生自sap.ui.core.Element。而我們也注意到了這樣的一個while循環。而這也就解釋了為什麼屬性清單會按照BaseType加以劃分，并會一直劃分到Element一層。

而在周遊的過程中，每一個BaseType的各項屬性以及aggregation都被整理成友善後續渲染清單的格式。進而在renderPropertiesTab方法中逐級渲染出DOM段落。

如何通過修改屬性清單中的值去修改控件的屬性？

我們在屬性清單當中可以直接去實時地修改某一項屬性，這又是如何做到的呢？想來這個過程最終一定是調用到了控件本身的set方法，我們就在sap.m.Text的setText方法中打一個斷點，然後在調用棧中向上追溯，發現了目标方法onsapUiSupportControlTreeChangeProperty。原來是在控件的Metadata中存有各個屬性所對應的Set方法的名稱，在通過簡單的校驗之後使用者所輸入的值就通過setText方法被指派進去了。

雖然綠色的高亮很醜，但我想知道它是怎麼來的？

我們繼續嘗試在EventProvider中尋求突破口。進而定位到了Selector.js中的onsapUiSupportSelectorHighlight方法。在這裡我們發現所謂的高亮其實并不是元素本身的行為，而是在元素上面覆寫一層綠色的“遮罩”（div）。

綠色“遮罩”

然後會根據被高亮的控件的寬度高度來調整“遮罩”的大小，并将其顯示在控件的位置，以達到高亮的效果。

快速在Control Tree中定位元素

如果一個頁面非常複雜，想在其中靠層級結構找到元素将變得困難。而Control Tree則提供了一個通過Ctrl+Alt+Shift+滑鼠點選快速定位元素的功能，好用得讓人無法自拔。

這裡我們可以看到當UI5診斷工具處于打開狀态時，mousedown事件的處理方法會增加一個，便是Selector的_fSelectHandler方法。而在這裡将會判斷如果三個修飾鍵同時被按下，則幫助使用者在Control Tree中選中相應的元素節點。

以上就是我對于UI5診斷工具中Control Tree子產品部分功能的了解。希望你也能和我一樣愛上這個工具。

更多閱讀

Jerry和您聊聊Chrome開發者工具

那些年我用過的SAP IDE

Jerry的Fiori原創文章合集

Jerry的UI5架構代碼自學教程