Previously, on “Beyond console.log”
I will try in this article to give you some tips regarding the elements panel in DevTools.
Conventional wisdom says that a bad workman always has bad tools. But a good web developer will never use the Internet Explorer console, except to debug bugs specific to this browser, which is more reminiscent of Titanic than Queen Mary II.
Enough jokes.
Find an element's Event Listeners
Here's how devTools saved my day a while ago when a button called a function that was hidden somewhere in a few thousand lines of jQuery family code:
This will display the event listeners of the inspected element. I recommend checking the "Framework listeners" box, which was recently added to DevTools. This will allow you to access your function and not the framework's function (if you are using jQuery, for example).
Only, we can observe that there is a listener for each ancestor. We can fix this by unchecking the “ancestors” box:
Sometimes we want to know how and by which function an element is modified/deleted/changes attributes. That's what the “DOM breakpoints” menu is for.
When you have chosen which type of event to listen to, a blue dot appears:
If you select the node, you will be able to see what types of events you have attached to it:
Mastering Elements: Some CSS Tips
When a CSS rule has several selectors (separated by a comma), the selectors that correspond to the targeted element are displayed in black, and the others in gray. Moreover, if you pass the cursor over a selector, the elements affected by it will appear highlighted on the page.
Inherited properties
You can also see which rules are inherited from parent elements: in inherited rules, you can see that inherited properties are displayed normally, while properties that are not passed down from parent to child, such as flex or display, s are displayed in gray:
Calculated properties
Devtools sorts CSS rules by descending priority. This makes it fairly easy to understand why a rule isn't being applied. But sometimes, there are so many rules that it becomes difficult to find which one overridden the property you wanted to assign. It's like finding a needle in a haystack … That's why you shouldn't hesitate to take a look at the "Computed" tab in the Styles panel. Here, there are no rules, just a list of the element's properties that have been modified by you, a framework, or the browser's styles.
Expand a property and you will see the list of rules that affect it. Clicking on the link takes you on a tour of the sources panel. If, on the contrary, you click on the arrow that appears when you hover the cursor, you will be taken to the styles tab of the elements panel, right in the right place.
Last tip (which seems obvious to me, but you never know):
if you want an element to be styled as if it were hovered, you can click on “Toggle Element state” (“:hov” button in the styles tab):
One more thing ...
Animations
Describing how the animation editor works would take too long, so I just show you an image:
You can replay an animation, change offsets, each animated element has its own timeline… It's magic. Note that you can also edit the Bézier curves which determine the speed of a transition or animation:
That's it, I'll stop here. For real. Devtools also has a shadow editing tool for the box-shadow and text-shadow properties! Thank you for taking the time to read this, and please come back in a few days for episode 3.
Julien, JS-Republican @JSRepublic
[actionbox color=”default” title=”” description=”JS-REPUBLIC is a service company specializing in JavaScript development. We are an approved training center. Find all our technical training on our partner site dedicated to Training” btn_label=”Our training” btn_link=”http://training.ux-republic.com” btn_color=”primary” btn_size=”big” btn_icon=”star” btn_external =”1″]
