Web development tools are the programs a team uses to design, build, test, launch and watch a website or a web app. There are eleven kinds, one for each stage of a project: design hand-off, the code editor, version control, package managers, frameworks, build tools, testing, browser developer tools, speed and accessibility checks, CI and hosting, and monitoring. If you are paying, brand names matter less than two questions: does every stage have a tool, and is every account behind those tools in your company's name?
I have been building software for 18 years, and since 2017 my team has grown to 70+ specialists and delivered 150+ projects. Below are the tools for web development stage by stage, what each protects for you, a table to forward to your team and this site's own stack.
Why lists of web development tools age so fast
Lists rank brand names, and names change faster than the work. In 2020 our blog published one itself: 21 tools, Grunt and Backbone among them. I would not start a project on either today. In October 2026 I read five guides from the top of Google's results for this search:
- Visual Studio Code and GitHub are on all five.
- None names an error tracker, the tool that reports a live site's crashes to the team, and none mentions backups.
- Two still recommend AngularJS, whose support ended in January 2022, and the Atom editor, which GitHub archived in December 2022.
Five pages are a small sample, but they show the trap: a list says what to install, not what each tool protects. Stages age slower than names.
The toolbox, stage by stage
Eleven stages, eleven sets of tools. Each set protects something different for you.
Before the code: design hand-off and the editor
1. Design hand-off. The design lives in a design tool such as Figma, where developers measure sizes, colors and spacing instead of guessing them from a picture. Figma's Dev Mode, on its paid plans, is made for this hand-off: developers inspect each layer, copy generated code and see which screens are ready for development.
It protects the agreement, because "it looked different in the mockup" now has one file to settle it. Where design ends and development begins is covered in web design vs web development.
2. The code editor. This is the developer's own choice: Visual Studio Code or an IDE such as WebStorm or PyCharm. The rules should not depend on one person's editor: formatting and code checks belong in the repository, so the code reads the same whoever writes it.
AI now writes much of the routine code right in the editor. On our projects a person works in a pair with AI agents: we do not train AI on our clients' code, we build into our agents the best practices my team has arrived at over the years, and an engineer reads the code before it goes further.
The code and its past: version control and packages
3. Version control. Git records every change to the code: who made it, when and why. Every Git clone holds the whole repository with its full history, so the past survives a lost laptop or a closed account. That record answers the questions you will have later:
- When did this break?
- What changed, and who changed it?
- Can we go back to last week's version?
Clients often ask me who owns the code: whoever paid for it. The repository is where that ownership lives, so keep it in your company's own account on GitHub, GitLab or Bitbucket. GitHub advises no fewer than two organization owners, each with complete administrative access. For a small site that rarely changes, an archive with the code and a data export at handover is a fair minimum; an application you keep developing needs the repository itself.
4. Package managers. A modern site stands on open-source packages, installed by npm for JavaScript, pip for Python or Composer for PHP. A lock file records their exact versions, so every install, from a laptop to the server, gets the same set. This site's package.json names 11 packages, and the lock file in its repository pins 85, counting what they depend on.
That protects the site you approved from surprise upgrades on the next rebuild. Vulnerability checks sit next to the package managers:
- npm audit asks the registry for known vulnerabilities in your JavaScript packages;
- pip-audit does the same for Python packages;
- GitHub's Dependabot alerts you when a dependency is vulnerable.
Someone has to act on those reports after launch. That is part of web application maintenance.
The foundation: frameworks and build tools
5. Frameworks. A framework is the ready-made foundation the rest is built on, and it comes in two halves:
- Frontend technologies such as React or Vue shape what runs in the browser.
- Backend technologies such as Django, Laravel or FastAPI run the server, the data and the admin.
The most popular web frameworks are not automatically the right ones: we pick the stack for a web application by its job and by who will maintain it. A maintained, widely used framework protects two things: hiring, because the next developer already knows it, and security, because the fixes keep coming. That second part has a date: Django 5.2, which runs this site, gets security fixes until April 2028. Languages come before frameworks and have a guide of their own.
6. Build tools. The code developers write is not what a phone should download. A build tool such as Vite or webpack turns it into small, optimized files, and Vite also runs a development server that shows each change at once. It protects speed and the ability to rebuild, because a site that builds only on one developer's laptop belongs to that laptop.
Proof it works: tests and web developer tools
7. Testing. Automated tests are small programs that check the site after every change:
- Unit tests check one piece of logic at a time; Django runs them with Python's unittest module on a separate, blank database.
- End-to-end tests click through the site in a real browser; Playwright drives Chromium, Firefox and WebKit, the engine behind Safari.
Tests protect what earns money, the form, the booking and the payment, from next month's change. Somatic Reset, a booking site that takes the payment before the slot, has 157 automated tests, and in our pipeline a tester still checks every site last.
8. Browser developer tools. Every browser has them built in: Chrome DevTools, Firefox Developer Tools, Safari's Web Inspector. To open DevTools in Chrome, press F12 or Ctrl+Shift+I on Windows and Linux, or Cmd+Option+I on a Mac; the Console tab lists the page's errors and failed requests, a check you can run yourself. Chrome's own documentation calls its phone emulation a first-order approximation, so what protects you here is a real phone: on Build Wise Investments, the timelapse video stayed black on iPhones in Low Power Mode.
Speed and access: performance and accessibility checks
9. Performance and accessibility checks. Google's Lighthouse audits a page for performance, accessibility, best practices and SEO, and runs in Chrome DevTools, from the command line or inside PageSpeed Insights. PageSpeed Insights adds what real Chrome users experienced over the previous 28 days, judged by the Core Web Vitals at the 75th percentile of page loads:
- the main content appears within 2.5 seconds (Largest Contentful Paint);
- the page answers a tap or a click within 200 milliseconds (Interaction to Next Paint);
- the layout shift score stays at 0.1 or less (Cumulative Layout Shift).
These checks protect the visitors who leave a slow page and the people a site shuts out. On Build Wise Investments, the phone scores went from 77 and 74 to 100 in all four categories (PageSpeed Insights, October 5, 2026): the loading screen had been the largest element painted, and the first picture was 3,840 pixels wide. Accessibility tools only assist, though, and the W3C says human judgment is required. If accessibility is a legal question for you, see ADA website compliance.
Shipping and watching: CI, hosting and monitoring
10. CI and hosting. Continuous integration builds and tests the code on every change, before anyone can ship it. GitHub Actions, GitLab CI and Jenkins do this; our case pages list GitLab CI on PBM Source and Jenkins on RxPhoto, a platform we worked on. Docker packs the app with everything it needs, so it runs the same on a laptop and on the server.
This stage keeps untested code away from your customers. A staging copy, a private twin of the live site, lets you approve a change on a real site rather than on a screenshot. Ask where the backups go and when a restore was last tried: a backup nobody has restored is a hope.
11. Error monitoring and uptime. An error tracker such as Sentry captures crashes on the live site, groups repeats into one issue and alerts the team; an uptime monitor opens the site every few minutes and raises the alarm if it does not answer. Without them, you learn about a failure from a customer, or never.
Watching starts at launch, because a new site draws uninvited visitors from its first hour: on Muzychko Vocal School, an hour after the certificate was issued, a bot was trying the admin 102 times a minute, having found the domain in the public logs of new certificates. While our support plan runs, we watch your uptime and your domain's renewal date, as website maintenance describes.
The table to send your team
Forward this to whoever builds or maintains your site. A team that works well answers each row in a sentence or two.
| Stage | Typical tools | What to ask your team |
|---|---|---|
| Design hand-off | Figma, Dev Mode | Where does the design file live, and can I open it? |
| Code editor | Visual Studio Code, WebStorm, PyCharm | Are the code rules in the repository, and which AI tools see our code? |
| Version control | Git on GitHub, GitLab or Bitbucket | Is the repository in our company's account, and am I an owner? |
| Package managers | npm, pip, Composer | Is the lock file committed, and who reads the vulnerability reports? |
| Frameworks | React, Vue, Next.js, Django, Laravel, FastAPI | Which version, and until when does it get security fixes? |
| Build tools | Vite, webpack | Can a new developer build the site from the README? |
| Testing | Django tests, Jest, Playwright, Cypress | What do the tests cover, and do they run on every change? |
| Browser developer tools | Chrome DevTools, Firefox, Safari Web Inspector | Which real phones and browsers do you test on? |
| Performance and accessibility | Lighthouse, PageSpeed Insights, axe | What are the phone scores, with the date, and who checks accessibility by hand? |
| CI and hosting | GitHub Actions, GitLab CI, Jenkins, Docker | Is there a staging copy, how do we roll back, and where do the backups go? |
| Error monitoring and uptime | Sentry, an uptime monitor | Who gets the alert at 2 a.m. on a Saturday, and how fast do they answer? |
No answers for a site you already have? Start with web development consulting, a second look at the code before you spend more.
What this site is built with
This site runs on Django and a 3D front end of our own. Its stack, from package.json and requirements.txt:
| Layer | Tools | Their job here |
|---|---|---|
| Server and data | Django 5.2, Gunicorn, PostgreSQL through psycopg | The pages, the admin, the content and the form requests |
| Admin | django-unfold | The look of the admin where we edit every page |
| Pictures | Pillow | Every upload in the sizes and formats browsers ask for |
| Static files | WhiteNoise, Brotli | Scripts and styles, compressed and cached |
| Articles | markdown-it-py | Articles like this one, from Markdown to a page |
| Front end | TypeScript, Vite, three.js, postprocessing, GSAP, Lenis | The code and its build, the 3D scene and its effects, animation, smooth scrolling |
| Fonts | Mona Sans and JetBrains Mono from Fontsource | Served from our own server, not a font service |
It runs in a Docker container behind the Caddy web server, which shows our own page instead of a raw error while the application restarts. Every tool in the table is free to use and widely documented, so another team could take the site over. The footer even counts the site's own lines of code: more than 57,000 as I write this. Build Wise Investments, a 63-page contractor site, runs on Django, Tailwind CSS and SQLite with no 3D at all: the tools follow the job.
Mistakes few avoid
The tools are rarely the problem; the accounts and habits around them are. Six to check on your own project:
- The repository, the design file or the hosting in a freelancer's personal account. The day you part ways, you have to ask for your own business back.
- Tools picked from a "best of" list. A list ranks names; your project needs tools that fit the job and that the next team knows. That is how a framework more than four years past its end of support still gets recommended.
- A desktop score taken as proof. Ask for the phone run with its date, and for field data once real visitors arrive.
- Alerts that reach nobody. Monitoring that emails a developer who left two years ago is no monitoring. Check the alert list whenever the team changes.
- Updates that never happen. "It works, don't touch it" holds until a vulnerability in one of your packages is published.
- Changes tested on the live site. Without a staging copy, your customers are the testers.
When you do not need this toolbox
If you build and edit a simple site yourself, you need almost none of this: web development platforms like Wix or Squarespace keep the hosting, the updates and the uptime on their side. The trade-off is control, because on most builders the site lives on the platform and cannot move elsewhere whole. And no toolbox saves a team without the habit of code review, so ask how a team works as much as what it uses.
Bring the table to your next call with a developer, ours included. Everything we build for the web starts on our web development page: a website from $499, paid upfront, and web applications from $5,000.
Questions
What are the best web development tools?
No single set is best: the right tools fit the job and the people who will maintain the result. For most business sites, Git in your own account, a maintained framework, tests and monitoring matter more than the editor.
Are free web development tools good enough?
Mostly, yes: Git, Visual Studio Code, Lighthouse, Playwright, Django and React cost nothing. The money goes to hosting, paid design seats, services past their free tiers and the people.
How do I open DevTools in Chrome?
Press F12 or Ctrl+Shift+I on Windows and Linux, or Cmd+Option+I on a Mac. The Console tab then lists the page's errors and failed requests.
What are front end development tools?
They shape what runs in the visitor's browser: frameworks such as React or Vue, build tools such as Vite, CSS tools such as Tailwind CSS and the browser's developer tools. Back-end tools run the server, the database and the admin.