墨斗（Visual Inspector）

UI开发、走查辅助工具

前端同学在开发页面过程中由于诸多人为因素产生误差，对像素级别的误差并无强烈感知，直到开发结束设计师用图片对比或“像素眼”时才能发现误差，这个时候再去修正误差会难上加难，“拆东墙补西墙”的感受想必大家都懂！由此我联想到装修师傅在开工前会在墙上弹出好多根黑色的墨线来标记位置，此开发辅助工具的灵感便来源于此工具，故名墨斗。通过此工具，可以在开发过程中实时反馈像素级误差、提示样式代码及开发完成辅助UI走查相关工作，从而提升开发效率。 使用步骤 1.Sketch Measure插件导出html文件 2.Chrome插件上传Sketch Html导出的文件 3.点击RUN计算误差 快捷键 1.长按Shift + s显示Sketch 2.长按Shift + i显示涂层 The front-end classmates caused errors due to multiple human factors during the development of the page, and almost did not perceive the error of the variable level. It was not until the end of the development that the designer found the error when using picture comparison or "wrong eyes". At this time, it would be difficult to correct the error. Adding to the difficulties, everyone knows the feeling of "removing the east wall to make up the west wall"! This way I think that the decorator will open a lot of black ink lines to mark the position before the start of the work. The inspiration for this development aid tool is through this tool, which can feedback the conversion level error in real time during the development process, prompt the style code and development completion Assist UI walkthrough related work to improve development efficiency Steps for usage 1.Sketch Measure plug-in export html file 2. The Chrome plug-in uploads the files exported by Sketch Html 3. Click RUN to calculate the error hot key 1. Long press Shift + s to display Sketch 2. Long press Shift + i to display the coating This Plugin is developed based on opensource code htmlburger/pixelparallel Thanks for contribution，Please contact me if necessary