Chrome Extensions: My Dev Toolkit
Here are the browser extensions that make my development workflow smoother.
Extensions I Can't Live Without
As web developers, we spend a lot of time in the browser. These extensions make that time more productive.
React Developer Tools
If you're building React apps, this is mandatory. Inspect component trees, view props and state, profile performance.
// Highlights when components re-render
// Shows exactly what props changed
// Essential for debuggingJSON Viewer
API responses in raw JSON are unreadable. This formats and syntax-highlights them automatically.
Also adds:
- Collapsible sections
- Search within JSON
- Copy path to value
Wappalyzer
What stack is this site using? Wappalyzer tells you instantly. Great for:
- Seeing what technologies competitors use
- Learning what tools power sites you admire
- General curiosity
ColorZilla
Eye-dropper for picking colors from any webpage. Also shows the color in various formats (hex, rgb, hsl).
Faster than screenshotting and using Photoshop.
Lighthouse
Built into Chrome DevTools, but the extension makes it one-click:
- Performance audits
- Accessibility checks
- SEO analysis
- Best practices
Run it on your sites regularly.
EditThisCookie
Manage cookies easily. View, edit, delete, or add cookies. Essential for testing authentication flows.
Web Developer
Swiss army knife extension:
- Disable JavaScript
- Disable CSS
- View response headers
- Outline elements
- Resize window to specific dimensions
My Own: TextBeam
I built TextBeam for highlighting custom word lists on webpages. Useful for:
- Finding specific terms in documentation
- Code review (highlight TODOs, FIXMEs)
- Research
Honorable Mentions
- **uBlock Origin** - Ad blocker that doesn't slow you down
- **Refined GitHub** - Makes GitHub's UI better
- **Octotree** - File tree for GitHub repos
Don't Go Overboard
Extensions affect browser performance. I have many installed but only enable what I need for the current task.
What extensions are in your toolkit?