Browser Developer Tools
What are Browser Developer Tools ?
Additionally, they come pre-installed in all popular browsers and are totally free. This course on browser developer tools is the best option if you want to understand more about their value.
The things which should be included in your browser development tools is listed below:
How to use Browser Developer Tools?
You should be aware of the fundamentals of how to use your browser's developer tools and what to expect to help you? We'll go into more detail about the benefits of each tool function in the sections that follow.
Since Chrome has the largest market share among browsers, we will use it for this example. However, if you use a different browser, your experience ought to be comparable.
1. Check the HTML of the Page
Any dev tools will typically open with a representation of the HTML page structure as the first thing you see.
You can then examine the page's elements, their classifications and ids, how they are nested, as well as any scripts, style sheets, or other resources that have been fetched in the header and footer sections.
The browsers will also highlight any CSS layout variables like border or spacing when you mouse over any element on the page.
Right-click any element and select Scroll into view to make something visible if it isn't already. You can also select any element on the page to view it in the site code by using the selector tool, which can be found in the dev tools window's upper left corner or by pressing Ctrl+Shift+C. The same result can be obtained by selecting Inspect from the right click menu.
2. Changing HTML Elements
You have the option to edit the HTML of the page in addition to viewing it. To change practically any portion of the code, simply double click on it. In this manner, you can alter class names, add line styling, update text just on page, change entry from H3 to H2, and hide and eliminate case includes from the DOM. Additionally, you may use your mouse to drag and drop components from one location to another.
Additionally, you may set items to always be hovered over, focused, active, visited, etc. by choosing right-click > Force State. You can see what happens to the page in your browser window.
3. Explore Around With CSS
The next thing you'll see is that every element's associated CSS is displayed to the correct side of the HTML. You can comprehend their stylistic and layout markup in this manner. This is a terrific way to discover the methods used to create a design that you like on another website.
Additionally, you may alter it in real-time to test out design concepts or debug CSS that isn't working. To change any class or iCSS d's property, just click on it to the right.
The same is true for CSS properties, which can be altered or added, as well as selectors. It contains a search box at the top, just like HTML, to let you look for specific information.
The + sign in the upper right corner (or right-click > New rule in some browsers) can also be used to add new style rules. Through.cls in the top right corner, you can even create classes here without tampering with the HTML tree. The element will immediately receive the class you enter for it.
4. Utilise the Box Model
One more thing about CSS: A box model representation can be found in the Style section. Here, you may quickly and easily check the element's height, width, spacing, border thickness, and margin. Any of the variables can be seen in the DOM by hovering over them.
Additionally, by just double-clicking any component and entering a number, you can modify any of the characteristics. As a result, you can easily alter the bottom margin and see the results on the page.
Here, you can utilise built-in debugging tools, view and change code, and browse site files. But inserting breakpoints is one of the most crucial things you can do here. This, for instance, enables you to pause code execution at particular events to check for errors. Using the icons in the top right corner, you can then move through the script one line at a period until you locate the problem. You can also modify the code directly inside the browser's tools, resume the script, and/or reload it to see if that resolves the issue.
7. Site Performance Analysis
The Chrome browser's capabilities also let you examine webpage speed. Although we have a comprehensive lesson on speed testing that focuses entirely on third-party tools, you can also perform this task using the built-in browser capabilities. Visit the Audit tab to do that.
8. Mobile Device Simulation
We probably don't need to tell you how crucial mobile traffic has become or how many more people use their phones to access the Internet than they do desktop computers.
When the developer tools are open, you may access this by pressing Ctrl+Shift+M or by clicking the tiny mobile device symbol in the top left corner.
9. Other Options
Although we've already covered the most crucial functions of the browser developer tools, here are some more features that you could find useful:
Observe how and if resources are being downloaded or uploaded across the network. View a waterfall diagram, examine resource and file attributes, and experiment with various network connection rates.
Examine animations – If your page has animations, you can study the source code, slow them down, and more.