10 tips using Chrome DevTools
Debugging is an essential part of a developer’s work and that makes it vitally important that you know how to debug. Sometimes debugging can be hard because you don’t know where to look or it becomes a little more difficult than you expected. To make it easier for each developer, here are some tips and tricks you can use to debug faster and better. Here are the 10 tips you can use in Chrome Devtools.
Sometimes you want to see a hover or a focus effect but you don’t want to manually focus or hover over it. You can simulate this easily and this also works with: active, focus, visited.
When styling a page you can use CSS. When everything is bundled in one file, it’s sometimes difficult to find which line specifically defines that CSS rule. You can just click and go to the files but sometimes it opens the complete file and not the rule you needed. Instead, you can ctrl + click on a CSS rule and directly go to that rule.
You want to debug a DOMelement (for example: add a class ). Then you will use document.querySelector to get that item. If it is just an ID, then that is easy but sometimes you need the third item of a row. You would then have to write some extra code to get all rows and take the third item of that array to have the correct item. In conclusion, you wasted some more time on debugging, and that’s why you can use $0. $0 is always the same as the item you selected with your mouse in the Elements tab of Devtools. Really handy when you don’t want to write extra code.
Do you know that feeling when you are debugging, you make a selector but forget to assign the selector to a variable and in the next function you need that selector again. You have to start over and assign your variable. But did you know that you can get your previous return value back with $_? The previous return value will be equal to $_. Var test= document.querySelector(‘.mark’) hideDiv(test) document.querySelector(‘.mark’) hideDiv($_)
The customer says that he wants a screenshot from a part of the website. Or you want to discuss the UI and show the different styles of a button. First option is to take a screenshot, open Photoshop and cut the correct parts. Second option (using a Mac) is a cutting tool where you can manually select the correct part of the screen but it’s not perfect (borders and pixels can be lost). And then you have the third option: inside Chrome Devtools there is a screenshot method that will screenshot the DOMelement that you have selected.
Imagine you’re working on a feature but your class’s names are different than when you coded them: how do you know where in the code (other libraries maybe) it has changed? You can go through the code and look for that class. You cannot find where the issue is so you keep debugging and you waste a lot of time. What if you could break on a modification of a DOMelement? That’s possible for a change of attributes (class,..), also for child modification and removing a DOMElement.
On Chrome Canary (version 59.x) you now have Intelligent code completion, for example when you have a DOMElement, you would now see all the extra functions you can access. Handy if you forget a function you need. Also the autocomplete will show when it’s a function that you have to add as parameters to make it work. Really handy!
A really small tip but when you log an array it’s really difficult because the console.log will return a list so you have to open each item and check. To make it easier there is also a function console.table that will show the array in a table (like Excel) and that would make it easier to read and find which item you need.
Did you know:
That when you place comments with a name as a color it will be replaced by the exact color and name. So when you type ‘blue’, blue will be replaced by the color blue.