If you are a developer, you probably should know that each Internet browser has its own set of developer tools. 

What is Chrome Developer Tools?

Keep in mind that developer tools are a tool number one, which basic functions must be mastered first. No matter where you are going in IT: whether you want to become a simple programmer or, for instance, a tester, specialists use it every day. It is always in quick access and it can be opened in two clicks in the browser menu or a combination of CTRL + Shift + I. Or you can just press F12.

The developer toolbar can be located at the bottom of the page or on the side, and it can also be unpinned in a separate window.

With the help of a developer tool: programmers can do the debugging, and testers can test their code. Of course, the specifics of use by testers will be slightly different, but still there is much in common.

What options do Chrome Developer Tools have?

• You can study the currently loaded pages, their HTML, CSS and JavaScript code, see in which resources the desired page is displayed, and how long it will be loaded.
• Sometimes, to activate an item on a test site, I use a small script on JS. The console tab allows you to run scripts.
• After performing some operations on the website, it is always useful to review the requests that are sent to the server as a result of your actions. Excessive requests are bad, you need to try to reduce them. To do this, see the Network tab.
• You can easily edit or delete cookies. You can do it with the help of the Resources tab.
• Slow down the connection to see how the content of the page will behave when the Internet is slow or non-existent.
• It is possible to substitute fake geolocation data, it is quite convenient when testing different services based on maps and routes. In this mode, you can test the usability of the mobile version of the site. And supporting the emulation of a couple of dozen devices for adaptability will make the test even more reliable – and much more. 

Now, let’s take a brief look at each tab in the Chrome Developer Open Panel.

1. Elements panel

So, the Elements panel shows the page layout exactly as it is rendered in the browser. It allows you to view visually invisible errors. As you have probably noticed, the HTML document is displayed in the left window, CSS in the right. By performing simple data manipulations, you can change the content and design of an open page. For example, you can change the text in the window if you edit it in the body of html, as well as change the font, colors, pseudo-classes on the page – by changing the value in the css field. But the entered data will not be saved, it will simply help to visually evaluate the applied changes.

In addition, you can view the code of a specific page element. To do this, right-click on the desired page element and select “View Code”.

Clicking on the phone icon to the left of the Elements tab brings up a window in which you can resize the intended screen, emulating a device and control the display of the page on it. It looks like this: when you click on the Select Model button, a dropdown with a huge selection in pixels will appear. Choose the size you need and voila! The page is displayed as if it were that gadget. Thus, the Elements panel can be used not only to view or edit the page, but also to emulate display devices. Everything is unified and available in the chrome browser by default!

2. The Console

The Console is the most popular tab for testers and programmers, because that’s where we see the code errors found when running the script. This panel also displays various warnings and recommendations

All messages displayed in the tab can be filtered. The errors also display its location and clicking on it will move you to the Sources tab, where the error will be displayed in the overall design of the page.

You can clear the Console tab box (if you need to delete previous error messages) by clicking the crossed-out icon. It has already been mentioned that in a clean console you will be able to practice learning JS.

You can filter messages in the console by type of error, warning, info, standard output, debugger message, fix – by selecting one of the available options in the console.

3. Source panel

In the source panel, as a rule, the code is debugged by programmers. It has 3 windows: 

• Source files area. It contains all the files connected to the page, including JS / CSS. 
• Text area. It contains the text of the files. 
• Information and control area. Interestingly, in the information and control area you can start or stop the configured code.

4. Network panel

Network panel – the main function of this tab is to record the network log. It gives an idea of requests and the page is loaded in real time. It shows the load and the process in general of which resources it takes more time to know where to optimize the page later. It is worth noting that in this tab in the Large request rows mode you can view the requests that are sent to the server, as well as the answers that come from it, their content and characteristics.

5. Performance panel

Performance panel – this tab is used when you need a complete overview of the time spent. What was it spent on, how much was needed for one or another process. It displays absolutely all activity, including resource downloads and Java Script execution.

6. Memory panel

The Memory panel allows you to profile the execution time and memory usage of a web application or page, thus helps to understand exactly where a lot of resources are spent and how, again, you can optimize the code.

• CPU profiler provides information on the time spent on Javascript.
• Heap profiler displays memory allocation.
• JavaScript profile details exactly what the time was spent for when executing scripts.

7. Application panel

The Application panel is intended for research of the loaded elements. It allows you to interact with HTML5 Database, Local Storage, Cookies, AppCache, etc. In this tab, you can clear cookies by opening this tab and clicking the crossed-out circle icon.

8. Audits panel

The Audit panel works as a page analyzer when it is loaded. As a result of the audit, there are recommendations for optimizing the page load, increasing the response speed. 

9. Security panel

Security panel shows the information on each request and highlights those through which the site does not receive the desired green icon in the status.

How to render HTML code in Chrome developer tools?

The web page that you are reading usually consists of the source code. This is information that your web browser downloads and converts into what you are currently reading.

Most web browsers provide the ability to view the source code of a web page without additional software, no matter what device you are on. Some even offer enhanced functionality and structure, making it easier to view HTML and other program code on the page.

Why do you need source code?

There are several reasons why you might want to see the source of a page. If you’re a web developer, you might want to see a specific style or implementation by another programmer. Maybe you are maintaining a website and trying to figure out why a certain part of a web page is showing or not behaving as it should.

You may also be a beginner trying to learn how to code your own pages and looking for real life examples. Of course, it’s possible that you don’t fall into any of these categories and just want to browse the source out of pure curiosity.

The desktop version of Chrome offers three different ways to view the source of a page. 

The first and the easiest one using the following keyboard shortcut: 

CTRL + U (Command + Option + U on macOS).

Clicking this combination will open a new browser tab with HTML and other code for the active page. This source is color-coded and structured to make it easy to highlight and find what you’re looking for. 

Second method. You can also get this by typing the following text into Chrome’s address bar, adding the highlighted portion to the left of the web page URL, and pressing Enter: 

view-source: (the link of the website)

The third method is to use the Chrome developer tools, which allow you to dive deeper into the code of the page and also customize it on the spot for testing and development purposes. The developer tools interface can be opened and closed using the keyboard shortcut: 

CTRL + SHIFT + I (COMMAND + OPTION + I on macOS).

You can also run them along the following path:

1. Select the Chrome main menu button located in the upper right corner and represented by three vertically aligned dots.
2. When the drop-down menu appears, hover your mouse over the More Tools option.
3. When the submenu appears, select Developer Tools.

Google Chrome on Android

Viewing the source of a web page in Chrome for Android is also easy: add the following text before the address (or URL) – view-source:… The HTML and other code of the page will be immediately displayed in the active window.

Google Chrome on iOS

While there are no native methods for viewing source code using Chrome on an iPad, iPhone, or iPod touch, the simplest and most effective is to use a third-party solution like the View Source app.

Conclusion

To sum everything up, If you’re going to hire HTML developer, he/she must have a must-have knowledge of Chrome developer tools. Their main advantage is that it is very easy to work with them. I hope that this article helped you with an issue about how to render HTML code in Chrome Developer Tools.