Posted on Oct 11 • Originally published at byteminds.co.uk Chrome Devtools serves as a developer console, offering an array of in-browser tools for constructing and debugging websites and applications. These tools facilitate Code inspection, optimization of web page performance from a user interface perspective, and the testing of pre-built functionalities. While our focus will be on Chrome DevTools, it's worth noting that other browsers also provide similar developer console functionalities.Among the most valuable features within DevTools is the ability to capture a series of screenshots during page loading. This capability is immensely beneficial for detecting bugs and unexpected behavior in page elements during the construction process. It's also useful for identifying the appearance of spinners or progress bars upon loading, particularly if you possess such rapid internet connectivity that visual tracking becomes challenging.Steps to Capture a Series of Screenshots on Page Load:A sequence of screenshots will populate at the top of the window. Clicking on any of these screenshots enables sequential viewing, complete with timestamps. This allows you to track the appearance of each element on the page during the loading process.Another noteworthy and indispensable feature of DevTools, particularly for performance testing, is the identification of unused CSS and JavaScript code in layouts.Why is "extra" code problematic? Every instance of code, including the unused portions, undergoes examination by the browser upon page loading. The presence of excessive unused code can significantly extend page loading times. Moreover, for users accessing the site from mobile devices, this redundant code consumes additional mobile data, an undesirable outcome.DevTools allows you to identify all unused code and subsequently provide this insight to developers via bug reports. This process might lead to the discovery of unnecessary code segments. By eliminating these segments, developers can enhance the overall performance of the site. Steps to Identify Unused CSS and JS in LayoutUnused code is indicated by a red marker. On a specific project, this approach enabled us to identify excessive Google fonts, which were substantially burdening the page and causing performance issues. Consequently, the developers optimized the code by removing unnecessary fonts, leading to a more efficient website.Most people are aware that through DevTools, you can modify page styles, alter fonts, adjust colors, add or remove images, insert text, and more. Yet, not everyone knows how to make these changes persist beyond page reloads. This is where local overrides come into play, functioning effectively for most file types with some exceptions, which we'll address later in the "Limitations" section.Steps to Save Changes Locally:You can now make changes to the code that will persist even after reloading the page.Limitations: DevTools doesn't retain changes made to the DOM tree in the Elements tab. Only the page code file in the Sources tab is editable. However, if CSS is not embedded in the page code file, you can still edit and save it in the Styles tab.Returning to the "Finding Unused CSS and JS in the Layout" section of our article: Local overrides enable you to personally remove identified "extra code" and observe its impact on page loading speed. Furthermore, if you're somewhat skilled in development, you can attempt to optimize existing code. For instance, you could reorder blocks and gauge their effect on performance. We've already learned how to monitor page loading through screenshots (as detailed in the "Screenshots on Page Load" section). But what if certain content fails to load, like an image or a crucial animation? How can we assess this scenario?To investigate, you can utilize DevTools to block specific requests. This approach proves useful when checking if developers neglected to set alternative text for images, which should display in case a picture fails to load or is missing.Steps to Block Specific Requests:Open the developer panel using the F12 key and invoke the Command Menu using Ctrl + Shift + P.Enter "Show Request Blocking" and choose "Show Network Request Blocking." This action opens the Network Request Blocking panel below. DevTools offers the capability to override a user's location, allowing you to assess how the site appears to residents of various cities, countries, and time zones. Wondering if a visitor from Europe viewing the game schedule on the website of a Canadian hockey club factors in the correct time zone? With DevTools, you can override geolocation to find out.Attention! This method suits sites and services that determine visitor location through geolocation services, not, for instance, solely via IP addresses.Steps to Change Geolocation in DevTools:If your desired city isn't present, click the Manage button next to the available locations dropdown list. Then, opt for "Add Location" and input the city's name, coordinates, and time zone. This DevTools feature proved invaluable when we were developing a website for a British football club. We needed to verify if the visitor's geolocation was properly considered on the page displaying upcoming game schedules.User-Agent is a string that informs the site about the software the visitor employs. It records device details (PC, tablet, smartphone), operating system, and browser. Based on these factors, the site may present differently. Designers, for instance, adapt designs and styles for mobile versions, streamline animations to ensure content is accessible on smaller smartphone screens. To inspect whether site styles adjust according to various devices, OS, and browsers, you needn't be surrounded by a plethora of devices like Macs, iPhones, or tablets. Instead, you can modify the User-Agent within DevTools to examine the site from a single device.Steps to Change User-Agent in DevTools:If your needed User-Agent isn't available, you can manually input the data. To do so, select "Custom" from the dropdown list and enter the parameters in the line below.The six features we discussed in this article only scratch the surface of what DevTools can accomplish in the hands of a skilled QA specialist. There are countless other intriguing functionalities that prove invaluable for testing websites and applications.Article author: Egor YaroslavtsevTemplates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse dequ - Sep 4 '22 MrChoke - Jul 28 '22 Kailash P. - Jun 23 '22 Zevi Reinitz - May 31 '22 Once suspended, byteminds_agency will not be able to comment or publish posts until their suspension is removed. Once unsuspended, byteminds_agency will be able to comment and publish posts again. Once unpublished, all posts by byteminds_agency will become hidden and only accessible to themselves. If byteminds_agency is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Byteminds Agency. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag byteminds_agency: byteminds_agency consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging byteminds_agency will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.