Being a web developer one must be aware of some awesome debugging techniques. To be honest I have been using console.log() along with debugger to debug my code, but debugging is not limited to these two. I have came across some great articles informing there is so much more. Now I use combination of many techniques which I have explained below, and believe me my life has become easier 😇
Let’s start with showing message in the console
- time() and timeEnd()
Few keyboard shortcuts that come handy
To clear console ctrl L(Windows) or cmd K(Mac OS)
Show console ctrl `
While inspecting an element, select the element and press f2 to Edit as HTML
While logging multiple variables, keeping track of individual variables can become difficult. Either we have to write them with different console.log() or give them specific strings.
Using object literal comes in handy here
Few Developer tools settings which I personally use
CSS Overview — This will show the summary of all the colors, fonts, media queries all in one place.
- On Google Chrome, open Developer Tools.
- Open Settings.
- Click on Experiments Tab.
- Enable the CSS Overview.
- Reload the DevTools.
- A new tab will appear in DevTools as CSS Overview.
Font editor tools — This feature lets us try different fonts without writing a single line of code.
- Go to Experiments Tab through Chrome DevTools.
- Check Enable New Font Editor Tools within Styles Pane.
- Reload the DevTools.
- Select the HTML element, which includes the font properties you want to change.
- You will notice the Font Editor icon in the Styles pane.
Few shortcuts which I always use
Get currently selected tag
Go to chrome dev tools and type $0 in the console. This will give the reference to the currently selected node.
Get the last evaluated value in the console
Go to chrome dev tools and type $_ in the console. This will always print the last evaluated value.
Copy request as cURL from the network tab
Directly copy the request as a cURL from the network tab
Edit whole page by turning designMode to on
Go to chrome dev tools and type document.designMode=”on”. This will let you modify without refreshing the page.
I hope this has helped you as it has helped me.
In case if you know other tricks or shortcuts and want to help the community, do let me know in the comment section ✌️.