Show HN: GetEles，一款浏览器扩展，帮你轻松理解网页内容
2 分•作者: WayneFung1992•10 个月前
大家好，我是 HN 用户。过去两年，我从前端工程师转型为独立开发者，一直在构建工具来解决我在日常工作流程中遇到的问题。
我每天都会使用 F12/开发者工具来调试网页。说实话，我经常只是想看看某个元素的写法，或者哪些样式影响了我的布局。2024 年，我换了一台新笔记本，屏幕比旧的（14 英寸）小。现在，每次我按下 F12，网页就会被挤压，有时甚至会切换到移动端视图。这种 frustation 促使我创建了 GetEles，它的名字来源于 JavaScript 函数，比如 getElementsBy*。
GetEles 能做什么？
1. 快速获取网站信息：标题、描述、配色方案、资源等。
2. 快速检查元素详情：类名、内联样式。
3. 快速定位元素（我已经为你遍历了 DOM！）。
4. 快速将元素样式转换为 Tailwind CSS。
5. 精确测量任意两个元素之间的距离。
6. 快速导出元素或整个页面的截图。
7. 获取页面加载时间和性能信息...
GetEles 免费使用，但一些高级功能需要订阅。即便如此，我强烈建议您先在官方网站上体验一下——它包含了 90% 以上的功能。
请访问网站并点击“试用”：
[https://geteles.com](https://geteles.com)
查看原文
Hey HN, I used to be a frontend engineer, but for the past two years, I've been working as an independent developer. I'm building tools to solve problems I encounter in my daily workflow.<p>Every day, I use F12/devtools to debug web pages. Honestly, I often just want to see how an element is written or which styles are affecting my layout. In 2024, I upgraded to a new laptop with a smaller screen (14") compared to my old one. Now, whenever I press F12, the webpage gets squeezed, sometimes even switching to mobile view. This frustration inspired me to create GetEles, named after JavaScript functions like getElementsBy*.<p>What can GetEles do?<p>1. Quickly get website info: title, description, color scheme, resources, etc.
2. Quickly inspect element details: classes, inline styles.
3. Quickly locate elements (I've traversed the DOM for you!).
4. Quickly convert element styles to Tailwind CSS.
5. Precisely measure the distance between any two elements.
6. Quickly export screenshots of elements or the entire page.
7. Get page load times and performance info...<p>GetEles is free to use, though some advanced features require a subscription. Even so, I highly recommend trying out the experience on the official website first – it includes over 90% of the functionality.<p>Head over to the website and click "Try it out":<p><a href="https://geteles.com" rel="nofollow">https://geteles.com</a>