Get best of the week

My favorite Chrome developer tools



Good day, friends!

Chrome Developer Tools is a very powerful toolkit for developing web applications. Using these tools, we can navigate the DOM, check server requests, tune application performance, etc.

Among the many available features, there are several really interesting ones. These "features" help to make one or two clicks less - isn’t that why we gathered here?

JQuery style to access the DOM


jQuery is an awesome library. She has been managing the web for an entire era. According to some reports, more than 70% of the most popular websites in the world use this or that version of jQuery. This is an amazing achievement for a library written back in 2006.

The most popular API provided by jQuery is $, used to select DOM elements. In the Chrome developer tool console (hereinafter referred to as the console), it is possible to use the $ selector, which is an alias of document.querySelector ().

For example, to click on a button, you need to do the following:



$$ is a synonym for document.querySelectorAll ():



There are a couple more tricks for working with $. Sometimes the selector is too complex to type manually, or we simply cannot determine the sufficient specificity of the selector. If we select an element in the “Elements” tab, we can get it in the console using the $ 0 variable:



In fact, the console allows you to access the last 5 selected elements. These elements are available through the variables $ 0- $ 4, respectively:



Copy item properties


The Elements tab is very useful. It stores the DOM tree of our site, allows you to view the styles of elements and make changes to them on the fly.

The really cool thing that I discovered is the ability to copy the properties of an element (and not only) using the context menu.

For example, you can copy an element selector:



This selector may not be specific enough or too specific, but it helps in debugging the code anyway.

As you can see, we can also copy element styles, the "path" JS (document.querySelector (SELECTOR)) or XPath.

Network Request Filtering


Sometimes we have to work with a page sending a lot of requests to the server. I mean, a lot of requests.



Wading through these wilds in search of a specific request is not a pleasant occupation. Fortunately, you can filter out queries.

A set of filters allows you to display queries by type, for example, XHR / Fetch, style sheets, JS scripts, images, etc.:



You can also specify your own criteria in the input field located above the filters:



Emulating different network connection speeds


Using the “Network” tab, we can test our site in conditions of different connection speeds. The default is set to online, in which you fully enjoy the bandwidth of your connection.



In addition to online, such “presets” as Fast 3G, Slow 3G and offline are available, which differ in page load speed, file download speed and time delay. If you need to emulate something else, you can use the Add ... button to add your own profile:



Using Live Expressions in the console


What are Live Expressions?

Live Expressions are expressions that are constantly “evaluated” in the console. Suppose you want to track the value of a variable. You can enter it again and again:



Thanks to Live Expressions, you can focus on the code and allow Chrome to independently monitor changes:



This feature is available for both variables declared in the console and variables declared in the script.

Emulate various devices


Those who work with responsive applications are familiar with the feeling you experience when you work hard and long at the beauty of the page layout just to see how everything falls apart on the device with a different resolution.

I am not here to talk about media queries, but to show a way to test their work.



If you click on the button that looks like a tablet and a phone, you will see how the browser viewing area changes in accordance with the sizes of various devices.

You can select a device from the list of presets containing popular devices such as iPhone X, iPad Pro, Pixel 2, Pixel 2 XL, etc. This list is far from complete (not very relevant), but it is quite enough to solve most problems.

If the device you need is not listed, you can set the resolution manually. As you can see, I set my own permission to emulate OnePlus 6 (my everyday gadget):



Change item state


Have you come across a situation where you want to play with the styles applied to an element when you hover over it (: hover), but every time you move the cursor to the styles tab, the element loses hover?

Developer tools allow you to fix the state of an element. We can easily enable / disable states such as: active,: hover,: focus,: focus-within and: visited:



Here are my favorite Chrome developer tools. Thank you for attention.

Happy coding!

More articles:


All Articles