Debugging Web Apps with Browser Dev Tools: 6 Amazing Tricks

Kunal Singh

Jul 13, 2023

Debugging web applications can be a challenging task, with errors like "undefined" or syntax bugs often causing frustration. However, knowing the right set of tools and tricks can greatly enhance your debugging process. In this blog post, we will explore seven amazing tricks that can help you debug your web apps effectively. While we will focus on general web apps, these examples and tricks can be applied to any frontend application.

What are Browser Dev Tools

Browser Dev Tools, short for Browser Developer Tools, are a set of built-in tools that come with web browsers and are used by developers and web designers to inspect, debug, and analyze websites or web applications.

####1. Using the Browser Console Effectively

Logging with Context: Instead of simply logging data, consider using the console.log({ data }) syntax to log with context. This provides more information about the logged data. This method although might look simple but it comes in handy when we want to search our logs in the console with the key.

console.log(data) // instead of this 
console.log({ data }) // use this

2. Using Shorthands in Browser Console

When using Browser Console, Instead of using document.querySelector or document.querySelectorAll we can use jquery like shorthands $('.selector') or $$('.selector') to quickly select and manipulate elements on the page. Some other examples of browser shorthands are $0 which is a reference to the last selected element in the Element Section. Also $_ can be used to refer the value returned by the last expression in the browser console.

3. Leveraging Browser Command Palette

We can take advantage of the browser's command palette to open files or execute browser commands directly from the console. We can use the Shortcut Cmd + Shift + P for Command Mode to run commands and Cmd + P for File mode to open any of the source files.

4. Live Expressions

Ever tried logging the same value like the window.screenY in the console multiple times, This can be avoided with the amazing Live Expression Feature. Instead of repetitive logging, we can use live expressions to check the value of any variable or expression in real-time in the Browser Console

5. Using Debuggers to Understand Code Flow

Rather than relying on console logs, you can set breakpoints in your code using the browser's debugger. This allows you to pause and inspect variables and the program's execution flow during runtime. Advantages of Debugger: Real-time value inspection during code execution. No need for multiple console.log statements. We can add a debugger to the code by simple adding the debugger statement in the code wherever we want to pause the code execution or we can inpect a source file in the browser and click on the line number to add a breakpoint to the file. There are also conditional debuggers which we can add which pauses the execution only if a condition is met, this can be a very useful feature while debugging.

You can check the following example and open the dev tools before the clicking the button to see how it stops the code execution and we can see see the code extension state with the variables state and other details. https://codepen.io/singhkunal2050/pen/qBQxRPN?editors=1010

6. Streamline Development with Browser Overrides 🤯

When making changes to your app's UI or logic, constantly switching between the IDE and the browser can be tedious. Instead, leverage browser overrides for CSS and JavaScript. This way, you can instantly see the changes in the browser and later update your source code accordingly.

Remember, debugging is an essential skill for developers, and with the right tools, you can squash bugs more efficiently and deliver high-quality web apps. Happy debugging!

Recommendations

How to Publish Your First npm Package: Creating Rainbow Highlight with Utilities

#npm

,

#npm-package

,

#web

,

#javascript

Learn how to create and publish your first npm package. This step-by-step guide...

Sep 22, 2024

Google Dorking: Unlocking Hidden Search Capabilities & Insights

#seach

,

#seo

,

#research

Explore 16 advanced Google Dorking techniques to uncover valuable data, security...

Aug 8, 2024

This One HTML Attribute Could Save Your Web App from a Security Nightmare

#web-security

,

#cdn

,

#web

Web security is a critical concern for developers, yet some of the most...

Jun 29, 2024

Are You Still Using Basic CSS? Here Are 7 Tricks to Get Ahead of the Curve

#css

Bored of the same old CSS? Unleash 7 hidden gems to take your designs to the...

Dec 27, 2023

Easiest way to store your logs in a file WITHOUT chaging the source file(node)

#productivity

Often, developers face challenges when dealing with a flood of logs in the...

Dec 21, 2023

Build Your Own Pinterest-Style Masonry Grid: A Step-by-Step Guide

#css

,

#web

,

#layout

Create a masonary grid layout with left to right content flow, supporting...

Dec 10, 2023

Using git diff and git apply to Share Local Changes with Peers

#git

,

#productivity

,

#software_engeneering

,

#dev

git diff and git apply are two powerful Git commands that can be used to share...

Nov 12, 2023

React Portals: Render Components Outside the current DOM Hierarchy

#react

,

#web

The createPortal API in React allows you to render child elements into a...

Jul 27, 2023

Cloning Made Easy: Try degit and Clone Directories within Repos.

#git

,

#productivit

Have you ever faced the dilemma of wanting just a small portion of a repository,...

Jul 19, 2023

Controlled Versus Uncontrolled Components in React

#react

,

#forms

Understanding State Management Within Forms Comparing controlled and...

Nov 5, 2022

Format Numbers, Dates and Currencies with the Intl Object in Javascript

#javascript

,

#html

,

#web

Intl object can be used to format data into commonly used formats of dates,...

Sep 13, 2022

Image Masking on Hover Using CSS Clip Path and Javascript

#javscript

,

#css

,

#html

Image Masking can be used to add fancy hover highlight effects to images for...

Jul 23, 2022

Recreating CSS Tricks Fancy Grid Hover Effect

#html

,

#css

,

#UI

,

#recreation

CSS Trick had a simple yet cool grid layout which I found dope. So lets try to...

May 21, 2022

File Explorer Recursive React Component

#react

,

#javascript

,

#web

How to create a recursive folder Component using react.

Apr 16, 2022

Add Google Fonts to Your React & NextJS + TailwindCSS Project (Next 14)

#css

,

#tailwindcss

,

#react

,

#nextjs

,

#tailwind

,

#design

Use Google Fonts in Your TailwindCSS Projects

Apr 6, 2022

Event Delegation in Javascript

#javscript

,

#css

,

#html

,

#web

,

#performance

Handling multiple Events in Javascript with minimal CPU Usage

Mar 6, 2022

A Simple Web Accessibility Trick that you most probably missed!

#html

,

#css

,

#web-accessibility

,

#user-experience

Imagine that you cannot use the mouse and have to Navigate a Website with the...

Dec 23, 2021

Top Terminal Commands I Use For Productivity

#linux

,

#cli

,

#terminal

The whole point of development is solving problems. But very often we Developers...

Nov 3, 2021

CSS Logical Properties

#css

,

#html

CSS logical properties are properties which are used to design element on the...

Oct 5, 2021

Fluid Typography in CSS 💧

#css

,

#html

,

#typography

CSS Best Practices in Fluid Typography

Aug 15, 2021

CSS Units in a Nutshell 🐚

#css

,

#html

Are you still writing your css units in pixels and percentages? if you are then...

Aug 8, 2021

Master Markdown in 5minutes ⌚

#markdown

,

#documentation

Markdown is a lightweight markup language for creating formatted text using a...

Aug 1, 2021

What is JAMStack ✨

#jamstack

Jamstack stands for Javascript APIS and Markup and it is based on this idea of...

Jul 31, 2021

+

Check my latest Blog Post

How to Publish Your First npm Package: Creating Rainbow Highlight with Utilities

Read Now
Oh My Gawwdd!!!!!!!

Wow you have been viewing my site since 20 seconds!

+
+