2018/07/29

Front-end

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.

Tip 1:

Tip 1 gif

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.

Tip 2:

Tip 2 gif

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.

Tip 3:

Tip 3 gif

You can use jQuery or Vanilla javascript to add an event listener to a DOM element and check what is happening but javascript also has another function: monitorEvents (DOMelement,type). This function will listen to events and log them in the console. In this example we also used $0 to take the current DOMElement.

Tip 4:

Tip 4 gif

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.

Tip 5:

Tip 5 gif

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($_)

Tip 6:

Tip 6 gif

You know the struggle: you have a long object that you want to copy, you have to select all of it but it’s hard because you have to scroll, or you missed one line. Or you just want to do a fetch, and copy that data to a file to save as a JSON. In Chrome Devtools there is a copy function, where the parameter is an object/array and copy will add this to your clipboard. Goodbye to struggling with your mouse and just use a Javascript function to copy to your clipboard.

Tip 7:

Tip 7 gif

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.

Tip 8:

Tip 8 gif

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.

Tip 9:

Tip 9 gif

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!

Tip 10:

Tip 10 gif

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:

Tip 10 gif

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.