Modern web browsers include more than just the ability to display the contents of a webpage. Many browsers include tools that you can use to evaluate a website's HTML, do performance tests, or even modify the contents of a page to view changes in context.
In most cases, you can display a browser's developer tools by pressing F12 in Windows or Command-Option-I in macOS, or by right-clicking the item that you want to examine and then clicking Inspect Element.
Available browser developer tools
The following browsers either include developer tools for your use or have separate plugins that integrate with the browser for that purpose:
|Google Chrome||DevTools||Integrated||product link|
|Mozilla Firefox||Developer Tools||Integrated||product link|
|Mozilla Firefox||Firebug||Plugin||product link|
|Microsoft Edge||F12 devtools||Integrated||product link|
|Microsoft Internet Explorer||Developer Toolbar||Integrated||product link|
|Opera||Opera Dragonfly||Integrated||product link|
|Apple Safari||Developer Tools||Integrated||product link|
Developer tools for iOS browsers
If you are developing for an iPhone or iPad, you can use a Safari browser on macOS to view webpages as presented on iOS devices. For information about this process, see Viewing the Source Code on iPhone and iPads using Safari Webkit Development Tools.
Other useful tools
There are many useful tools that are available beyond the general inspection tools offered by most browsers. For example, here are several tools for two of the most popular, current browsers: