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:
|Windows/Linux||Chrome||Ctrl++I||More ToolsDeveloper Tools|
|macOS||Chrome||++I||More ToolsDeveloper Tools|
|Windows/Linux||Edge||Ctrl++I||More ToolsDeveloper Tools|
|macOS||Edge||++I||More ToolsDeveloper Tools|
|Windows/Linux||Firefox||Ctrl++I||More ToolsWeb Developer Tools|
|macOS||Firefox||++I||More ToolsWeb Developer Tools|
|macOS||Safari||++I||DevelopShow Web Inspector|
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:
This section is incomplete! You can help out by contributing documentation here !