Debug like a pro

Amnah khatun
Oct 14 · 3 min read

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

  • log()
  • error()
  • warn()
  • table()
  • count()
  • time() and timeEnd()

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 ✌️.

Happy coding.

Frontend Weekly

It's really hard to keep up with all the front-end…

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Amnah khatun

Written by

Coder | Blogger | Cosmology enthusiast

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co