This file lists 10 tools for Frontend Developers. Feel free to add more via Pull Requests!
-
ColorZilla
- Website: https://www.colorzilla.com
- Description: A browser extension for picking colors from web pages, analyzing color palettes, and more.
-
GoFullPage
- Website: https://gofullpage.com
- Description: Takes full-page screenshots—handy for documenting entire webpages.
-
Scribe
- Website: https://scribehow.com
- Description: AI-powered SOP tool that automatically generates step-by-step documentation (with screenshots) as you perform tasks.
-
Postman
- Website: https://www.postman.com
- Description: An API development environment for creating, testing, and documenting APIs.
-
React Developer Tools (Browser Extension)
- Website: Chrome Web Store | Firefox Add-ons
- Description: Inspect and debug React component hierarchies within your browser’s DevTools.
-
Redux DevTools (Browser Extension)
- Website: https://github.com/reduxjs/redux-devtools
- Description: Debug and trace state changes in Redux-based apps, including time-travel debugging.
-
Lighthouse (Built-in Chrome Audits)
- Website: https://developers.google.com/web/tools/lighthouse
- Description: Automated tool for auditing performance, accessibility, SEO, and best practices on web pages.
-
BrowserStack
- Website: https://www.browserstack.com
- Description: A cloud platform for testing websites across multiple browsers and operating systems using real devices.
-
CodePen
- Website: https://codepen.io
- Description: An online code editor for prototyping, showcasing, and discovering front-end snippets and experiments.
-
WhatFont
- Website: https://chromewebstore.google.com/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm
- Description: WhatFont is a handy browser extension that allows you to quickly identify the fonts used on any webpage by simply hovering over the text. It displays the font name, size, and other styling details in a clean, user-friendly interface.