How To Debug JavaScript In Browser : Google Chrome

Are you a web developer? Or somewhat in to developing websites? If you work with websites and pages then you must be aware that all that renders on the screen is a mixture of HTML, JS and CSS. If you are fairly new to web development and need help regarding what happens on the client side then this post might interest you.

debugging javascript in browsers : google chrome

In this post, you will learn about the developer tools that are present in the web browsers which help you out in development of a webpage. Using these developer tools, you can debug your JavaScript code, check your site's performance, check it's functionality and many other things. In the end there's an explanatory video showing the usage of these developer tools. So let's begin.

What Are Developer Tools?

In every browser there are tools which aid you in development of your webpage. This toolkit includes different sections which serves specific functions. Shown below is an example of developer tools sections for google chrome browser

elements tab of developer tools chrome

Here as you can see there are multiple tabs present in developer tools. Let us introduce you to the most commonly used tabs.

Elements Tab:

Shown above is elements tab. It shows full html structure in tree-view form. You can get all the tags present in your webpage's html and try out specific styling for individual elements. From this tab you will get to know which element is rendered inside which other element. 

Console Tab:

console tab of developer tools chrome

This tab is used to evaluate expressions at run time, also all the logged messages from your code appear here. Also if your script has some run-time errors, this is the place where you see them.

Sources Tab:

sources tab of developer tools chrome

This tab shows up all the files that are downloaded for your webpage including css, js & images files. This tab helps you in debugging your script and resolve any error that you have encountered.

Network Tab:

network tab of developer tools chrome

This tab shows up all the network transactions be it html download, ajax call, css download, everything. It has all the information like size, format, headers of the request made. There are filters present to filter out requests data as per you requirement.

Application Tab:

application tab of developer tools chrome

This tab has all the information related to storage. It has information about localStorage, sessionStorage, cookies and other storage information.

How To Use Developer Tools?

Shown below is the video to demonstrate, how can you use these tools to help you develop your webpage better.

What you can learn from this video:

  • How to debug JavaScript in google chrome for windows machine?
  • What is breakpoint?
  • How to setup a breakpoint?
  • How to see call stack?
  • How to Step into a function definition?
  • How to Step out of a function definition?
  • What is console in chrome developer console?
  • What is watch in debugging?
  • How to change variable values at runtime?

If you are familiar with Hindi Language then there's another video too, to suit your mind :)


Post a Comment

Popular posts from this blog

Just Maths - Views, View Groups and Layouts

Create Dynamic Table In JavaScript Using WebMethod And jQuery AJAX Without Postback