Chrome DevTools is every developer’s ideal choice for solving different issues on Google Chrome’s website. This tool lets the developers diagnose the problems and make necessary changes on the webpages, leading them to create better and faster websites. One can use it for troubleshooting, debugging, and monitoring tools. It also finds loopholes and shows how a website looks on different screens. However, the changes made via DevTools are temporary, and it only displays an expected outcome.

If you want to access the Google Chrome DevTools, press the Cmd + Opt + I keys together, and it will open the developer tools. You can also visit the homepage of Google Chrome and click on the three dots appearing on the top-right corner. From there, click on More Tools and select Developers Tools. After accessing the DevTools, here is how you can use it for website diagnosis:

Check Website as on a Smartphone

After switching your browser to the Developer mode, it will show you a half-sized version of the web page you are working on, but that’s not the real view of the webpage as you will see it on a smartphone. Fortunately, you can set a web page’s screen size and switch between different mobile screen types within seconds. To use this option, switch on the toggle for Inspect Mode and from the top-left corner of DevTools, click on the Responsive option. Then, select your preferred smartphone screen. The webpage will automatically squeeze and adjust to fit in the smartphone screen you chose.

Access Source Files

Using the DevTools, you can access the files used in creating a particular webpage by clicking on the Sources option given on top of the DevTools menu. Doing so will show you the website’s file system and lets you edit it accordingly. Similarly, you can also access the source files, which will prove beneficial to deal with web pages with multiple resources. To find the source file, click on the Search option or press Ctrl + Shift + F (on Windows) & Cmd + Opt + F keys (on Mac).

Check Security Issues

The Chrome DevTools also lets you check and determine the security level of a web page based on multiple significant parameters. You can also measure if the connection is secure or not. Select Security from the top menu of DevTools to use this benefit. This Security tab will provide a synopsis of your website’s security details, and you can also check for potential threats.

Check the Website’s Performance

You can also check and measure the overall performance of your website based on different parameters by clicking on the Lighthouse option given on top of the DevTools window. Then, choose the parameters and select the devices (or platforms) for which you want to check the performance of your website. To get a detailed analysis, click on the General Report. Click on the Performance option to check the loading time of the webpage. If you want to test the run-time and get an analysis about it, click on the icon below the Click the Record Button option. To conclude the analysis, click on Stop.

Live Edit Your Website

You can easily edit different elements, including HTML of a webpage, after switching to the developer’s tool and selecting the Elements option. When you want to tweak anything, give a right-click on it and click on the ‘Edit as HTML’ option. You can also edit CSS properties by clicking on Sources. You can then select the CSS file you want to edit and place the cursor on any line to start live editing. This will also bring you instant feedback on the changes you make. Remember that any changes you make on the webpage via DevTools will go back to its original state after hitting the reload button, and only you would be able to check the edits.

Apart from the uses mentioned above, you can also make changes in the JavaScript Code, monitor resource loading, and more. To unlock more benefits, you can install framework-specific extensions that support the Chrome DevTools. Since DevTools is easy to understand, anyone can use it and make the most of it.

Source : https://citysearchwiki.com/blog/chrome-devtools-an-easy-troubleshooting-guide-for-developers/