18 developer tools I use to improve my workflow
Source: Dev.to
Tools & Resources I Keep Close for a Smoother Development Workflow
Every few months I discover a tool that makes one small part of development less painful—whether it’s debugging performance, testing responsiveness, drawing quick diagrams, or prototyping an API before the backend is ready.
Below is a curated list of tools I use (or keep handy). Not every tool is a must‑have for everyone, but each solves a real problem that shows up when building, testing, explaining, or maintaining software.
If you already use any of these, feel free to share your thoughts—learning how other developers incorporate the same tools into their day‑to‑day work is always helpful.
Angular Render Scan
What it does
Helps debug Angular change detection and component renders visually.
Why I like it
When a page feels slow, it’s often unclear which component is re‑rendering too often. Angular Render Scan lets you see render activity directly on the UI, turning an abstract performance problem into something concrete.
Typical use cases
- Finding components that render too often
- Debugging change‑detection issues
- Checking slow Angular screens
- Improving performance without random code changes
Multi Device Viewer
What it does
A Chrome extension for checking responsive layouts across multiple devices simultaneously.
Why I like it
Testing one device, then another, then back again is a time‑suck. This extension shows several screen sizes side‑by‑side, supports device frames, orientation switching, screenshots, and annotations—perfect for explaining layout issues.
Typical use cases
- Checking mobile, tablet, laptop, desktop, and custom sizes
- Comparing breakpoints side‑by‑side
- Capturing screenshots for feedback
- Spotting responsive issues without repeatedly resizing the browser
React Scan
What it does
Finds performance issues in React apps by highlighting unnecessary renders.
Why I like it
As a React app grows, performance debugging can become confusing. React Scan gives a quick visual clue about which components need attention.
Typical use cases
- Detecting unnecessary renders
- Finding components that need optimization
- Debugging React performance visually
- Verifying whether a change improved or worsened rendering
ToDiagram
What it does
Converts JSON, YAML, XML, CSV, or Mermaid data into diagrams.
Why I like it
Raw data can be hard to read once it gets large. Visualizing the structure makes relationships and nesting much clearer—great for API responses, config files, schemas, etc.
Typical use cases
- Visualizing JSON or YAML
- Understanding nested data
- Explaining payloads to teammates
- Turning structured data into diagrams quickly
diagrams.net (draw.io)
What it does
A versatile diagramming tool for flowcharts, architecture diagrams, UML, ER diagrams, network diagrams, and database schemas.
Why I like it
It’s simple, not overly flashy, and gets the job done without a heavy setup.
Typical use cases
- Architecture diagrams
- Database schema diagrams
- Flowcharts
- Explaining systems visually
Excalidraw
What it does
A web‑based, hand‑drawn‑style sketching tool.
Why I like it
Perfect for quick, informal diagrams that don’t need a polished look. The sketchy style signals “work in progress,” making it ideal for brainstorming sessions.
Typical use cases
- Sketching ideas
- Drawing rough system flows
- Making casual architecture notes
- Explaining concepts without over‑polishing
Jam
What it does
Simplifies bug reporting by allowing you to record the issue with contextual data (browser details, console logs, network logs, reproduction steps).
Why I like it
Reduces back‑and‑forth between developers, QA, and product teams.
Typical use cases
- Reporting bugs with proper context
- Capturing console and network logs automatically
- Sharing reproducible steps
- Speeding up debugging for the person fixing the issue
Beeceptor
What it does
Provides instant mock APIs and webhook testing.
Why I like it
When the frontend is ready but the backend isn’t (or you need to test failure scenarios), Beeceptor lets you create mock REST or GraphQL endpoints, simulate delays/failures, and inspect requests.
Typical use cases
- Creating mock REST or GraphQL APIs
- Testing webhooks
- Simulating API delays and failures
- Continuing frontend work without waiting for backend changes
AFFiNE
What it does
An open‑source workspace that combines docs, whiteboards, and databases.
Why I like it
It lets you write, draw, and organize data in the same place—ideal for mixed workflows where ideas start as text, evolve into sketches, and later become tasks or notes.
Typical use cases
- Project notes
- Whiteboards
- Planning tasks
- Maintaining a personal or team knowledge base
fish shell
What it does
A command‑line shell with sensible defaults: autosuggestions, tab completions, syntax highlighting, and a clean scripting language.
Why I like it
If you spend a lot of time in the terminal, those small improvements add up to a smoother, faster workflow.
How to Use This List
- Pick what fits your stack. Not every tool is relevant to every project.
- Combine where possible. For example, use Angular Render Scan together with Multi Device Viewer when debugging a responsive Angular page.
- Share feedback. If you’ve found a better alternative or a hidden gem, let the community know!
A Surprising Amount of Time
It is not a tool that changes your whole workflow overnight, but it makes daily terminal work smoother.
I would use it for:
- Better command suggestions
- Faster terminal navigation
- Cleaner shell scripting
- Improving the daily command‑line experience
Free Public APIs
Free Public APIs is a directory of public APIs. This is useful when you want to build a demo, practice API integration, or test a frontend idea without creating your own backend first. Many side projects slow down because we spend too much time thinking about data. A public‑API directory helps you start faster.
I would use it for:
- Finding APIs for side projects
- Practicing API integration
- Building frontend demos
- Exploring public data sources
Polypane
Polypane is a browser built for web development and responsive testing. It lets you view different screen sizes simultaneously and check responsiveness, accessibility, and site quality. For frontend work, this saves time because you don’t have to keep jumping between device sizes manually.
I would use it for:
- Testing multiple screen sizes
- Checking responsive layouts
- Reviewing accessibility issues
- Debugging frontend pages in a dedicated browser
Skills
Skills is a directory for reusable capabilities for AI agents. If you use coding agents, you know that instructions matter a lot. A good workflow can make the agent more useful, but writing the same instructions repeatedly is boring. Skills package that procedural knowledge so it can be reused.
I would use it for:
- Discovering agent skills
- Improving coding‑agent workflows
- Reusing common instructions
- Making repeated AI workflows more consistent
AI Directories
This GitHub repo is a curated list of AI directories where people can submit AI tools. Building a product is one thing; getting people to find it is another. If you’re building an AI‑related tool, directories can help with early discovery and launch distribution.
I would use it for:
- Finding AI directories
- Submitting an AI product
- Planning launch distribution
- Researching where similar tools are listed
Patterns.dev
Patterns.dev is a learning resource for design, rendering, and performance patterns in web apps. It isn’t a quick‑one‑minute reference; it’s a deeper resource for understanding frontend architecture. Good tools improve your workflow, but good resources improve how you think.
I would use it for:
- Learning JavaScript patterns
- Understanding rendering patterns
- Improving frontend architecture
- Studying performance techniques
An Introduction to Domain‑Driven Design
A concise introduction to Domain‑Driven Design (DDD). DDD can sound heavy, but the core idea is practical: understand the business domain and make the code reflect that domain clearly. It becomes especially useful when an app grows beyond simple CRUD and business logic spreads everywhere.
I would use it for:
- Understanding DDD basics
- Organizing business logic better
- Learning about entities, value objects, aggregates, and domain events
- Thinking beyond simple controller‑service‑database code
Software Engineering at Google
Software Engineering at Google is a free online book about building and maintaining software over time. It separates programming from software engineering: writing code is one part; keeping that code useful, maintainable, and adaptable for years is the bigger challenge.
I would use it for:
- Learning about software engineering at scale
- Understanding maintainable codebases
- Thinking about trade‑offs and cost
- Improving engineering habits
LLMTEXT.com
LLMTEXT.com is useful if you work with llms.txt and MCP servers. The install page turns any llms.txt URL into a dedicated MCP server, allowing an AI tool to use documentation in a structured way instead of copying and pasting the same docs repeatedly. This is especially valuable when you use AI coding assistants regularly—better context usually means better output.
I would use it for:
- Installing
llms.txtMCP servers - Connecting documentation to AI tools
- Avoiding repeated doc copy‑paste
- Improving context for Claude, Cursor, or other LLM workflows
Closing Thoughts
These are not the only developer tools out there, and I’m not saying everyone should use all of them. For me, the best tools are the ones that remove repeated friction. If a tool saves me from resizing the browser ten times, guessing which component is slow, drawing the same diagram from scratch, or waiting for an API before I can continue, then it is worth keeping in my workflow.
That’s why I like collecting tools like this—small improvements add up over time.
If you use any of these tools, or know a better alternative, share it in the comments. It will help others understand how these tools actually improve real development workflows.