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

除了閱讀優秀的開源庫開源框架，一點一滴積累之外，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秒的吉他演奏：《我的歌聲裡》。

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

王聰除了種菜之外，另一個技能就是德語。大家點選這篇文章尾部的"閱讀原文", 就能看到這篇文章的英語和德語版本。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方法被賦值進去了。