Technical
Chrome Devtools
Chrome DevTools is a suite of web development tools built directly into the Chrome browser. DevTools provide a rich set of features such as inspecting and modifying HTML and CSS, profiling JavaScript, analyzing network traffic, and debugging errors. Developers can use DevTools to:
To open it, right-click on the blank space on your screen and click Inspect. Now you should see a panel opened at the bottom (or on the right side), which has tabs like Elements, Console, Sources, Network,…
Now, let’s see how can we utilize some of the most popular tabs.
The Element tab is one of the most commonly used features of Chrome DevTools. It provides developers with an in-depth view of the HTML and CSS code of a webpage, allowing them to easily modify and troubleshoot the website.
On the left-hand side of the Element tab, we have the source code of the website. On the right is the CSS that’s related to that HTML code. Clicking on the HTML code will show the related CSS for that particular element. However, it’s important to note that the HTML code displayed here actually has the JavaScript code embedded, and is written in DOM structure. To view the HTML code only, right-click on the screen and select View Page Source.
One of the most helpful features of the Element tab is the ability to hover over an element and see the corresponding section of the UI highlighted. We can also right-click on the element on the page and click Inspect to show the HTML code related to that particular element.
In the CSS part of the Element tab, we can see the link of the file that the CSS comes from. There’s a checkbox next to the style that we can uncheck to remove it. This feature allows developers to quickly experiment with different styles and see the changes in real-time.
As both the HTML and CSS codes are downloaded locally, we can temporarily change them. For example, we can change the text on the page, remove or hide elements, and even move things around. This feature is particularly useful when we need a quick demo or a new design iteration.
In the CSS section of the Element tab, we can view the Computed tab with the box model. This is an essential feature that allows developers to understand how the padding, border, and margin of an element are calculated.
Finally, If we click on the icon at the top right corner of the Element tab, we can simulate the screen size of the mobile devices. This feature makes it possible to test the responsiveness of a website on any mobile screen size, allowing developers to ensure that their website looks great on all devices.
It’s where developers can run JavaScript commands and view error messages.
One of the primary uses of the Console tab is to run JavaScript commands, also known as the REPL (Read-Eval-Print-Loop) interface. This is a feature that allows developers to write JavaScript commands on the fly and see the results immediately. The REPL interface is an essential tool for testing complex functions and commands that might not be easy to write in the code directly.
Another essential feature is the ability to use the console.log function to debug. We can use this function to log values and variables to the console, making it easy to troubleshoot issues and understand how the code is working.
Additionally, the Console tab is where the browser sends the error messages. If there’s an error in the code, it will be displayed in the Console tab. It’s important to check the Console tab frequently to ensure that there aren’t any errors that need to be addressed. Error messages can also be seen in the Network tab, where it’s possible to view details about the type of error and its location in the code.
The Sources tab in Chrome DevTools is a feature-packed tool that allows developers to view and modify the source code of a web page.
One of the primary functions of the Sources tab is to allow developers to view the source code of a web page. It provides a clear and organized view of the code, making it easy to identify script errors, understand the sequence of execution, and troubleshoot issues related to the code.
Additionally, the Sources tab has a set of features for debugging asynchronous code, including the ability to pause on exceptions, catch promises and error messages, and inspect XHR and fetch requests.
One of the most exciting features of the Sources tab is the code snippet feature that allows developers to write and execute code snippets directly in the console. This feature is particularly useful for testing out complex functions and code snippets that can’t be easily written in the text editor.
The Network tab allows developers to monitor and optimize website performance.
One of the primary functions of the Network tab is to show all the files that are loading when a webpage is requested. The Network tab provides a detailed view of each request, including the type of request, size of the file, and the response time. This feature makes it easy to identify potential bottlenecks and optimize website performance.
Another helpful feature is to temporarily disable the cache (the Disable Cache button at the top). By disabling the cache, developers can see how the website behaves when it’s requested for the first time,.
Additionally, the Network tab allows developers to simulate different network conditions. Developers can change the network throttling to simulate real-life scenarios, such as slow internet connection, limited data plans, and other network conditions. This feature is essential when optimizing website performance for users with different network capabilities.
Finally, the Network tab provides detailed information about each request, including the timing and the response status. This information makes it easy to identify any errors or slow-loading resources, and optimize website performance.