Top 5 Page Inspection Tools Built into Browsers
1. Chrome Developer Tools
Chrome Developer Tools is a toolkit for web developers built into Google Chrome. It helps developers edit pages very quickly and fix issues that occur over time, making site building faster. DevTools can be opened in several ways, so developers can quickly access different parts of the DevTools UI interface.
Ctrl + Shift + J for Windows, Chrome OS and Linux to get to the console panel. If you want to work with the CSS or DOM tree instead, then you must right-click the item on the page you want to inspect, and select Inspect (also with F12). Or, you can press
Ctrl + C for Windows, Chrome OS and Linux or
Command + Option + C for Mac.
Take some time to familiarize yourself with each tab because there are many tabs, but in the end, you will see how the page inspector can be useful.
2. Microsoft Edge Developer Tools
If you are a developer, then it is often necessary to view the source code of your web pages. You might also want to inspect an item to find a particular section of a web page.
Note, if you run Microsoft Edge and want to get to Inspect Element or View Source, then you should know that they are not enabled by default.
3. Firefox Developer Tools
4. Safari Web Development Tools
Safari has a Web Inspector that is a macOS and iOS development tool for the web, a tool that helps troubleshoot, modify, and optimize a website for compatibility on both platforms and for maximum performance. With Responsive Design Mode, you can preview your web pages for different screen resolutions, dimensions, and orientations. To benefit from these extremely useful tools, enable the Develop menu in the advanced Safari preferences.
Web Inspector can give you easy and fast access to the richest sets of development tools ever included in a web browser. It helps you inspect all existing resources on a web page, making it more efficient in iOS, macOS, and tvOS. Also, in macOS Sierra, you can use memory-based troubleshooting methods using TimeLine and tweak styles, using multiple CSS properties widgets. Web inspector includes elements, network, resources, timelines, debugger, storage and console.
5. Opera Developer Mode
Opera Developer Mode can be activated by going to the Opera page after Extensions and clicking on Developer Mode. The developer mode gives you more options. At the top, you can see the options Load Unpacked Extensions, Update Extensions Now, and Pack Extension.
You can create a new directory for your extension, and once you've installed all the files, you can load the extension into Developer Mode just by clicking on Load Extensions, after you select the directory of that extension. You will find the usual buttons such as Disable and Permissions buttons on the left and the Reload button on the right, along with Options.
As you make changes to your extension, the results will be instantly visible by clicking on the Reload button. You can also discover different resources in an extension in the address bar, you just need to know the Extension ID and use the
chrome-extension: //. For example, typing
chrome-extension // <extensionID> manifest.json in the address bar will load the file of that extension into the tab. Web inspector includes elements, resources, network, sources, timelines, profiles, audits, console.
As we have seen, developer tools give you more power when it comes to debugging because you can set interrupt points, analyze and modify different variables on the page to see what it looks like.