Setting Up Your Environment

Web Browser

Web Components are a native web technology, so the most important tool will be your web browser. Pick a browser you're comfortable using, but it's a good idea to make sure you pick one with a good set of developer tools built in. A good set of devtools makes it much easier to debug your application. A lot of developers use Google's Chrome browser. Mozilla Firefox is another great option. There's also Mozilla Firefox Developer edition which has extra features, like an Integrated Development Environment. Microsoft Edge is another great browser, built on the same technologies as Google Chrome. If you're on macOS then Safari can be a good choice.

To test your applications, it can be useful to install all four browsers. Running your application in a variety of browsers can uncover cross browser bugs, or missing features. Getting comfortable with using the devtools in each is a good idea.

Web Browser devtools

A good set of browser developer tools which will enable you to inspect your web applications under the hood and see how it all operates. They can be quite intimidating at first, but some great resources are out there to learn how to make the most of them.

If you're using Google Chrome, check out the Chrome Developers documentation on the Chrome devtools. It's a great resource for learning exactly how the developer tools inside Google Chrome work. Mozilla has a similar guide on Firefox Developer Tools. Microsoft have a smaller but still useful guide on the Edge developer tools. Apple's Safari has a useful five minute walk through of their Web Inspector.

Here's a handy guide on how to quickly access the developer tools, depending on your browser and OS:

While the built-in web developer tools offer excellent features that make it easy to work with Web Components, to add some extra functionality you can make use of some excellent browser extensions which add even more tools to help develop Web Components:

• Web Component devtools by Matsuuu

Development Environment

To get started writing web components you'll need a development environment. While you can use any text editor to develop, using an Integrated Development Environment (IDE) will give you lots of features that can make for a much better developer experience. One of the most popular IDEs today is VS Code, and with good reason. It comes with excellent support for writing HTML, JavaScript and CSS out of the box as well as some great plugins that you can install. It can hook directly into web browsers like Chrome or Firefox using the allowing you to debug your applications without leaving your editor. All these features make it ideal for writing Web Components and websites that use them.