Why Do Web Developers Write Code in an Editor Instead of Directly in a Browser?

Why do web developers use code editors instead of writing code directly in the browser?

Aron tilahun, at StackOverflow

This is an unexpected question from a humble beginner. I never thought about this. Since the beginning, I just installed a code editor and started from there. I never questioned the workflow.

I have read the question and skimmed some of the answers on the page, and here are my reasons for writing code in code editors instead of in a browser:

• With a code editor, you can edit your code with the right interface and the most needed functionality that you need to edit your code quickly and efficiently.
• You can add other files such as images, favicons, and so much more.
• You can use modern tools such as Eleventy to develop a static blog post or JavaScript frameworks in a browser.
• You will work in a code editor as a professional because you are not going to just have one HTML file with inline CSS, HTML code, and JavaScript.
• You can not use Git, a version control system.
• Once you know Markdown, you will wish that you could write things in Markdown without having to write HTML manually.
• You may work with someone else's codebase. So you need to use a code editor to make changes in the codebase.
• Remember that you will not only work with HTML, CSS, and JavaScript. A website can be developed in different ways and programming languages that are not understood by any mainstream browsers.
• Code editors like VS Code (or VS Codium) have plugins or extensions to help you write code faster and better.
• A browser is used as a debugging tool and to show what you have written so far.
• In the end, you will use a code editor. Try your best to write code with the browser's tools only to develop an e-commerce website.
• One of the workflows for a frontend web developer is that you get a design file, such as a Figma or Sketch file. Then you write code in a code editor. You use your browser to view every change you have made. Simultaneously, you open the DevTools to test the responsiveness of your website. When everything looks right, you publish the first version of your website to a hosting provider.
• As a beginner, you may not find yourself using TypeScript, JAMStack, or any great tools to develop your website. But you will use one of those great tools. Believe me.
• You need Node.js to use npm so that you can use someone else's code to help you develop powerful websites. Know that you don't need to write everything by yourself.
• Try developing a blogging website with browser tools only. Imagine now you have 100 posts. Each post is in one HTML file. Now you want to add a link to your social media account on all pages. How do you do that with the browser's tools? Whatever you do, just know that using a browser is not the most efficient and is one of the slowest ways to make changes.
• Remember that you will be developing a website. You are not just writing code once, and that's it. No. You need to keep coming back and improving the website you are working on.
• Working with others through the browser's tools is impossible.

You do not need to understand every reason that I have mentioned here for now. Just understand that a browser is for trying and checking things out, and a code editor is where you have all the necessary tools to write code efficiently and quickly.

Great question. Happy coding!