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 :)



Comments

Post a Comment

Hey there, liked our post. Let us know.

Please don't put promotional links. It doesn't look nice :)

Popular posts from this blog

Create Android Apps - Getting Started

Image
Cheezy Code - Just Maths App Want to build Android Apps really fast? With Android Studio and a blend of Java and XML, you will be up and running and coding Great Android Apps in no time.  Let's get started. We will be creating a very simple app named Just Maths that will ask user a Maths question. User either presses (✔) or (X) to answer the question. This is going to be a project based learning wherein you will have something concrete in the end.
Read more >>

Polymorphism in Kotlin With Example

Image
Polymorphism is one of the most important topics in Object-Oriented Programming. It goes hand in hand with Inheritance . Poly means many and morph means forms i.e. the same method behaves differently based on the object. Here we have different forms of the method that exhibits different behavior based on the object. To define Polymorphism in simple words - A parent can hold a reference to its child and can call methods which are provided by the parent class. Let's understand this with an example -  fun main() { val circle : Shape = Circle(4.0) val square : Shape = Square(4.0) } open class Shape{ open fun area() :Double{ return 0.0 } } class Circle(val radius:Double) : Shape(){ override fun area(): Double { return Math.PI * radius * radius } } class Square(val side:Double) : Shape(){ override fun area(): Double { return side * side } } Explanation -   Here we have defined a Shape class which is a base class and open for i
Read more >>