好几个月前,我意识到我的浏览器打开的标签比代码注释还乱。标签太多,乱七八糟,浪费了很多时间在这些标签上。于是我决定做点改变。
结果是?这些扩展程序确实有用,让我来和你分享一下。这10个扩展程序改变了我的工作方式。
1. VisBug(一种视觉调试工具)
你知道在调试 UI 时,是否感觉就像在玩打地鼠游戏,只不过对象是 CSS?VisBug 可以解决这个问题。调整间距、字体和布局。这样可以节省时间,保持冷静,防止你因愤怒而砸键盘。
链接地址:https://chromewebstore.google.com/detail/visbug/cdockenadnadldjbbgcallicgledbeoc?hl=en (Visbug工具插件页面)
(注:Visbug是一个用于Web开发的调试工具。)
2. React 开发工具
如果你在使用 React,这将是你的不可或缺的工具。你可以轻松地查看组件层级、props 和状态,再也不用猜测哪些部分在重新渲染及其原因。
3. 邮差拦截工具
API是我們所建的一切的支柱。Postman Interceptor 让你能够捕获网络请求并直接在浏览器中调试。这就像给你的后端装上了X射线透视眼。
链接地址: https://chromewebstore.google.com/detail/postman-interceptor/aicmkgpgakddgnaphhhpliifpcfhicfo?hl=en
4. 暗色阅读器
如果你曾经在午夜盯着刺眼的白屏,你需要暗模式。它能瞬间把任何网站变成暗模式。你的双眼会感激你。(你的设计师朋友可能不会感激你)
链接:https://chromewebstore.google.com/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbieeh
5. 网页开发者
这是一款经典的传统工具,但仍然非常强大。禁用浏览器中的JavaScript,验证CSS代码,调整视口尺寸——它是前端开发者必备的多功能工具。
链接地址:https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm。这是一个 Chrome 网上应用店中的 Web 开发者工具插件。
6. JSON格式化器
阅读压缩的 JSON 好像在读一本你不懂的语言的书。JSON Formatter 可以将其整理得更清晰,使其更易读且色彩丰富。谁又有时间去费劲地看呢?
7. Wappalyzer,一款用于检测网站技术的工具
有没有好奇过是什么技术在支撑一个网站?Wappalyzer 可以帮你一目了然。不论是研究还是好奇,都很有用。
8. 灯塔
性能、可访问性和 SEO。Lighthouse 都能搞定。运行检查,几秒钟内即可获得实用的见解。可以把它当作你的私人代码检查工具(但没有那么挑剔)。
https://chromewebstore.google.com/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk
9. Octotree(八爪树)
没有 Octotree,像在 GitHub 仓库间导航就像蒙着眼睛在迷宫里瞎走。它为 GitHub 添加文件树视图,让你轻松找到需要的内容。
https://chromewebstore.google.com/detail/octotree-github-code-tree/bkhaagjahfmjljalopjnoealnfndnagc
10: 农药.
对于追求极致完美的人来说,Pesticide 详细列出页面上的每个元素,这样你就能更快地调试布局。像素级完美设计?完全可能实现。
https://chromewebstore.google.com/detail/pesticide-for-chrome/bakpbgckdnepkmkeaiomhmfcnejndkbi?hl=en Chrome插件:农药-for-Chrome
bonus: 标签整理器
你有没有过这种情况:打开五十多个标签页,效率直线下降。Tab Wrangler 自动关闭不活跃的标签页,但这些标签页可以随时重新打开。让浏览器清爽,思绪也更清晰。
https://chromewebstore.google.com/detail/tab-wrangler/egnjhciaieeiiohknchakcodbpgjnchh(点击这里访问 Tab Wrangler 扩展程序页面)
你的扩展要么会减慢你的速度,要么会提升你的能力。这些扩展都属于后者。试试看,告诉我你最喜欢哪一个。