這篇將用較短的篇幅給大家介紹我是如何實現(xiàn)iOS和Android的inspector（元素審查工具）的。

實現(xiàn)原理

為了更方便的顯示UI界面，且更容易制作，我選擇了使用web端來承載整個元素樹展示。同時我選用Flask一次性梭哈前后端（因為本身就是個體量不大的web page，如果要用react或者vue有點殺雞用牛刀的感覺），不得不說Flask 在編寫一些小型的web應(yīng)用的時候真的是個利器，非常推薦大家試用。

左上方是元素結(jié)構(gòu)展示，左下方是具體懸停的元素的詳情，右側(cè)是當前移動端畫面展示。

首先在啟動初始化 inspector 的時候，會先向移動端的 sever 發(fā)送請求獲取圖像和元素樹結(jié)構(gòu)。

// 在python端構(gòu)建url裝飾器@app.route('/refresh_image')def refresh_image():port = int(os.environ.get('RemoteServerPort'))platform = os.environ.get('nico_ui_platform')if platform == "android":new_data = send_tcp_request(port, "get_png_pic:100")else:new_data = send_tcp_request(port, "get_jpg_pic:1.0")base64_data = base64.b64encode(new_data)return base64_data@app.route('/refresh_ui_xml')def refresh_ui_xml():root = dump_ui_tree()# 構(gòu)建HTML列表 html_list = xml_to_html_list(root)# 渲染模板并傳遞構(gòu)建的HTML列表 return html_list

// 這里使用jquery實現(xiàn)請求發(fā)送。function refreshData() {bounds_list = []// 發(fā)送GET請求到服務(wù)器，刷新圖片$.get('/refresh_image', function(data) {var img = document.querySelector('img');img.src = 'data:image/png;base64,' + data;img.setAttribute("id","image_")});// 發(fā)送GET請求到服務(wù)器，刷新XML$.get('/refresh_ui_xml', function(data) {var xmlContainer = document.querySelector('.content-inner');xmlContainer.innerHTML = data;initImageControl()addTextControlHoverListeners(); // 添加新的事件監(jiān)聽器addImageListeners(); // 添加新的事件監(jiān)聽器});}

拿到整個元素樹之后，我通過遞歸遍歷所有節(jié)點并為其創(chuàng)建一個個 div 標簽。

# 遞歸函數(shù)，用于將XML元素及其屬性轉(zhuǎn)換為HTML列表項def xml_to_html_list(element, depth=0):# 開始列表項random_number = random.randint(100000, 999999)html = f'<div class="node" style="text-indent: -1em; padding-left: {depth + 1}em; word-wrap: break-word;"'# 如果元素有屬性，將它們添加到列表項中if element.attrib:html += " " + " ".join([f'{k}="{v}"' for k, v in element.attrib.items()])html += f'''identifier_number = "nico_{random_number}"'''if depth != 0:content = element.tagelse:html += f'''id = "Title" '''html += f'''current_package_name = {os.environ.get("current_package_name")} '''html += f'''nico_ui_platform = {os.environ.get('nico_ui_platform')}'''content = f"{element.tag} for {os.environ.get('nico_ui_platform')}"html += f'><strong style="font-size: 2em;">{content}</strong>'# 如果元素有屬性，將它們作為文本添加if element.attrib:html += " (Attributes: "html += ", ".join([f'{k}="{v}"' for k, v in element.attrib.items()])html += ")"# 如果元素有文本內(nèi)容，將其添加到列表項中if element.text and element.text.strip():html += f" - Text: {element.text.strip()}"html += "</div>"# 處理子元素children = list(element)if children:for child in children:html += xml_to_html_list(child, depth + 1)return html

我們在生成的 html 界面可以看到，每一級元素節(jié)點對應(yīng)一個 div 標簽。

由于html和xml擁有幾乎相同的特性，所以轉(zhuǎn)化起來其實很簡單。然后除了處理轉(zhuǎn)換之外，我還為每個div事件都添加了監(jiān)聽事件，方便當我們鼠標懸停在某一個節(jié)點時。下方會展示該元素對應(yīng)的詳細屬性值。

細心的同學可能會注意到，我在xml_to_html_list，這個方法開頭加入了使用了一個隨機數(shù)?random_number = random.randint(100000, 999999)，這個可大有用處。使用過其他 inspector 的同學應(yīng)該知道，當我們鼠標懸停在具體的控件節(jié)點上時，右側(cè)圖像通常會有一個半透明的遮罩，告知你當前控件節(jié)點在實際設(shè)備上的具體位置。而當鼠標懸停在圖像上的某一位置時，也會出現(xiàn)一個半透明的遮罩，告知你當前懸停處，所顯示的控件，同時左側(cè)的元素樹也會相應(yīng)跳轉(zhuǎn)到對應(yīng)位置。

或者這樣

為了實現(xiàn)這個功能，我在創(chuàng)建 div 層級的時候，每生成一個控件 div 標簽的同時就會在右側(cè)的圖像上方添加一個透明的 div 標簽。添加監(jiān)聽事件，當我們鼠標懸停在對應(yīng)位置的控件上時，會將這個透明的控件改為半透明的綠色，來展示我們當前懸停位置的控件是什么。而圖像上的透明 div 標簽的長寬坐標就來源于左側(cè)控件 div 標簽里的提供的屬性。

當然這樣一來還不夠，為了能夠?qū)崿F(xiàn)控件文本節(jié)點和控件圖像的一一對應(yīng)關(guān)系，前面提到的隨機數(shù)就發(fā)揮了作用。我用這個隨機數(shù)為每個控件文本 div 標簽添加了唯一 id 屬性。

identifier_number，

在生成對應(yīng)透明控件 div 標簽時也加上一樣的 id 屬性img-identifier_number

那么這樣就能實現(xiàn)當我鼠標懸停在任意一邊的時候，可以傳遞該id，在另一側(cè)中找到相同id的 div 標簽，并高亮處理。

于是整個inspector工具就完成啦！目前這個工具還是只能夠看，未來有空也許會把點擊等操作的功能一并加入進去。

結(jié)束語：

寫了這么多，終于也是到了尾聲。其實當初之所以構(gòu)建這個框架，除了給自己公司的項目使用，更多的還是抱著一個學習的態(tài)度。我是一個使用東西喜歡刨根問底，探究原理的人。研究一個東西最好的辦法就是拆開它然后自己重現(xiàn)它。

在編程領(lǐng)域不外如此，熟讀別人的源碼，讀深了，讀透了，讀到自己也能夠獨立寫一個了，那就算成了。那么成了之后，我也希望能夠讓更多的人看到，于是我選擇了開源，并且選擇用一篇文章的形式將我的設(shè)計思路和做這個框架的心路歷程寫出來分享給大家看。一方面對于我來說是一種回顧和記錄，一方面能夠為更多對這方面感興趣的同學不敢說指引方向，只能說避避坑少走一些彎路。

之前有看到論壇里的有同學說，現(xiàn)在寫技術(shù)文章的人越來越少了。有人說大環(huán)境這樣，人人自危還有誰有心情有時間抽出來分享技術(shù)。怎么說呢，這確實是一個無解的題。但我們能將做就是在尚能安身立命的時候，仍然抱著對技術(shù)的熱情，做更多的事。這樣保證自己在大環(huán)境回歸的那一天，仍能寒芒不減當年。也希望未來能夠更好吧~！

最后感謝每一個認真閱讀我文章的人，禮尚往來總是要有的，雖然不是什么很值錢的東西，如果你用得到的話可以直接拿走：【文末自行領(lǐng)取】

?

這些資料，對于【軟件測試】的朋友來說應(yīng)該是最全面最完整的備戰(zhàn)倉庫，這個倉庫也陪伴上萬個測試工程師們走過最艱難的路程，希望也能幫助到你！