写了一个小工具，可以在网页中像 Sketch/Figma 一样量度元素间距

資深大佬 : stevenlei 36

大家好，写了一个 JavaScript 的小工具，名为 Spacing JS 。

我们做前端开发的时候，间距和空间感的掌握尤其重要。浏览器的开发者工具可以看到元素的大小，padding/margin 等等资讯，但是好像不能像 Sketch / Figma 这样量度元素之间的距离，所以写了这个小工具，效果图如下：

写了一个小工具，可以在网页中像 Sketch/Figma 一样量度元素间距

大家也可以到网站体验一下（网站寄存在 Cloudflare Pages ，有时候可能要用外网）：

https://spacingjs.com

除了通过 <script> 加载到自己的网站，也可以把它加到浏览器标签，在任何网站里使用。相关的标签代码可以在网页中找到。另外，浏览器的插件版本正在做。

项目地址在这里，如果喜欢的话请给个 Star ，欢迎大家参与开发：

https://github.com/stevenlei/spacingjs

对于这个工具也有个简单的视频介绍：

YouTube: https://www.youtube.com/watch?v=yirtQ8bQjKI

B 站：https://www.bilibili.com/video/BV1rR4y1E7xg

谢谢大家！

大佬有話說 (5)

資深大佬 : Vitta

棒，做成插件或者油猴脚本更方便
虽然听不懂但是声音很好听

資深大佬 : 54xavier

给 steven 打 call

資深大佬 : cyrbuzz

强，已 Star 。

資深大佬 : E520

牛逼

資深大佬 : aasdkl

好评！
另外我找到了个油猴脚本： https://greasyfork.org/en/scripts/435347-spacing-js
不过我觉得做成 bookmarlet 更加方便一点：
“`
javascript:(function(){
　　　　 var script=document.createElement(‘script’);
　　　　 script.setAttribute(‘src’, ‘//unpkg.com/spacingjs’);
script.setAttribute(‘defer’,”);
　　　　 document.getElementsByTagName(‘head’)[0]
　　　　　　　　.appendChild(script);
})();
“`