Did you know that every browser provides tools to help the development of web applications? Whether it’s Chrome, Firefox, or Internet Explorer, they all have the “developer tools” option. Even if you might not be a web developer, it can be helpful to know the developer tools to better understand what’s going on your sites and the ones you visit. This article will be limited to tools in Chrome and Internet Explorer 11, but be aware that most options are also available in Firefox in other forms.
If you want the best Services of Web Design and Development, contact us.

Access Development Tools

For Chrome and Internet Explorer, use the F12 key on the keyboard in the browser.

On Chrome, the window will appear as follows:

Exploring Page Content

The Document Object Model (DOM) exploration tool allows you to select a single click an element on the page to see the HTML markup and the styles applied. This can be very useful for testing changes to the content and styles of the page in real-time. We can therefore use it to display or hide elements and even to change content, whether it is images, texts, or links. Note that the changes will not be kept if you refresh the page.

Network Activity

Tracking network activity can be very helpful in finding the reason behind a sluggish page. We see in detail each request made by the browser. It also contains information such as the weight of the downloaded element, its type, the download time, and the response status, the list of the different statuses is available here:  http://wikipedia.org/wiki / List_of_HTTP_codes. We can thus discover if certain images are too heavy or if certain calls do not work.

To access the network activity tool, we use the “Network” option on Chrome.

Emulation

An emulation is a powerful tool that allows you to view your site in different versions of browsers or to see the appearance of pages in different resolutions, for example, to simulate a smartphone screen.

As Chrome and Internet Explorer have a very different adaptation of these tools, they will be presented separately.

Emulation on Chrome

On Chrome, the tool is mainly used to simulate a mobile device. It can be accessed by selecting the “Emulation” tab at the bottom of the developer tools window. You can then select from a list of devices the one you want to test. The screen will be resized correctly, and we will be able to navigate on the site as on the device.

Emulation on Internet Explorer

On Internet Explorer, we use the icon access the emulation tools. Once in the interface, it is possible to simulate the navigation of the site by changing the document mode to use an earlier version of Internet Explorer. You can also simulate screen resolutions as needed with the resolution drop-down list. By choosing a smaller resolution, we can recreate the look of our pages on mobile devices.

Whether it is by changing the document mode or the resolution, it is important to know that this is an emulation and that sometimes the result is not the same as on the target platform through simulation.

Console and “Debugger”

The last tools that can be used are the console and the “debugger”. These tools are mainly aimed at advanced developers but can help you “pinpoint the problem” if you have a minimum of knowledge.

Most of the time, the console will display, if there are any, the JavaScript errors that occurred during navigation. You can also see here warnings relating to unsupported “CSS” styles or elements that would not have loaded correctly. While the information in the console is not necessarily meaningful to you, it could be very helpful for the support team to better target an issue.

As for debugging, it allows you to insert breakpoints during the execution of the JavaScript code, thus allowing you to see the execution context of the code and test the changes in real-time.

Conclusion

Developer tools are primarily intended for developers but are relatively easy-to-use tools that validate and increase the effectiveness of your site and your changes. They can provide information that will help you better understand the load times, visual differences, and execution steps of your pages.