做一个帮你快速调试UI参数的Idea插件

本文会介绍一个帮助我们快速调试UI参数的插件开发过程以及开发思路，可能需要一些简单的Idea平台插件开发经验，希望对大家会有一些帮助。

插件介绍

插件基于Layout Inspector，强化了这个工具，故取名Layout Master。

使用方式同Layout Inspector，呼出Android Studio(3.1以上)或Idea(2017.3以上)的Action面板，输入Layout Master点击即可，双击Property，支持修改的话会弹出Popup，同Layout Inspector一样，每次Activity重启了就需要再次运行Layout Master才可。

插件效果如下（图中仅演示了部分属性修改效果，支持很多属性）

项目Github地址：https://github.com/wuapnjie/LayoutMaster

为什么要做这个插件

我在平时的Android开发过程中，会经常修改一些UI的参数，比如padding，margin，color等等，有时View是通过非XML代码动态注入的，很多参数设置在真机调试时才能看到（而且我是那种一定要看真机跑效果的人），所以很多时候效果不满意就要改参数继续看效果，设计师们也会经常让我们改一些UI上的参数，这样每次都要重新编译运行一次代码，或者Instant Run一下，项目小还好，项目一大，这个重新编译运行的时间成本就会很大，大大降低了开发效率。于是我决定开发这个插件，快速看到UI参数改变的效果。

插件的简单原理介绍

不同于React Native和Flutter这些框架实现的热加载（哈哈，其实我也不知道这些框架怎么实现的），这个插件对View的参数实时设置都是通过Java反射调用View自身的setXXX()方法实现的，所以只能看效果，代码本质上没有改变，需要达到满意效果后再去修改，但这还是大大节省了时间，至少对我来说是。

那要怎么样做到从电脑端（IDE端）调用APP上View的setXXX()方法呢？很简单，让手机与电脑之间进行一个Socket长连接，定义一些命令协议，就可以实现电脑端对手机端的控制。

实现思路与过程

最初的思考

首先要实现想要的功能，第一步就是建立手机端与电脑端的Socket长连接并拿到关于Activity的View Hierarchy和View的Properties。这样的功能我在两个地方看到过，一个是Facebook强大的调试框架Stetho，另外一个就是Android Studio自带的Layout Inspector。这两个工具都与手机端建立了一个Socket长连接，建立了自己的通信协议。下面我会简单介绍一下两者的区别，并解释了为什么我选择基于Layout Inspector做一个插件，而不是基于Stetho做一个代码扩展。

Stetho

Stetho这个项目功能十分强大，不光可以看到View Hierarchy，还可以调试数据库，监测网络等等，实现上和我之前介绍的一样，建立了一个Socket长连接，APP负责获取需要的数据，通过Socket传输到Chrome DevTools，这里Chrome DevTools有一个开发API，接收到特定的Json，会进行渲染显示，在DevTools的操作也会Json格式包装成特定的数据包发送给APP进行操作。由于Stetho的代码比较复杂，我没有对其深入研究，也不了解Chrome DevTools的API，但大致原理已经介绍了，如果你感兴趣或有什么想法，可以去研究研究。

Layout Inspector

同样，Layout Inspector也是通过Socket长连接来获取APP的相关UI信息，由于Idea的社区版代码是开源的，而作为Android插件的Layout Inspector代码也是开源，具体可以编译Idea项目查看，代码入口在android插件的AndroidRunLayoutInspectorAction.java类中。

两者差别

Stetho的Socket连接相关代码是写在它的库中的，需要调试的APP依赖这个项目，进行一些配置，侵入性较强，但功能强大。而Layout Inspector则对代码零侵入࿰