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

實現(xiàn)原理

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

左上方是元素結構展示，左下方是具體懸停的元素的詳情，右側是當前移動端畫面展示。

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

// 在python端構建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()# 構建HTML列表 html_list = xml_to_html_list(root)# 渲染模板并傳遞構建的HTML列表 return html_list

// 這里使用jquery實現(xiàn)請求發(fā)送。function refreshData() {bounds_list = []// 發(fā)送GET請求到服務器，刷新圖片$.get('/refresh_image', function(data) {var img = document.querySelector('img');img.src = 'data:image/png;base64,' + data;img.setAttribute("id","image_")});// 發(fā)送GET請求到服務器，刷新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 標簽。

# 遞歸函數，用于將XML元素及其屬性轉換為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 += ")"# 如果元素有文本內容，將其添加到列表項中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é)點對應一個 div 標簽。

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

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

或者這樣

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

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

identifier_number，

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

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

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

結束語：

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

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

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

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

?

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