Chrome Debugger

Pankhuri Nigam
Sep 8, 2018 · 3 min read

If you have ever felt the need to see what is happening behind the scenes for the webpage rendered on your browser(for example you want to see the amount of load a webpage is putting on the browser in terms of memory or network) or if you wish to develop an application and are looking for a basic UI debugger, or want to track the impact a web page is having on your browser then chrome debugger is an easy place to start. In this write-up I will be covering 5 commonly usable features of Chrome Debugger.

How to launch?

Ctrl+shift+I on google chrome browser Or use F12 to launch it.

It will look something like this:

Various Options available and their usage:

  1. Console: Any kind of javascript logging(if done in code) will happen here.

On this Tab the options include:

  • Preserve Log: you can preserve log messages in between page reloads and navigation.
  • Hide Network and Log XMLHttpRequests: Log XMLHttpRequests will log All XHR Requests made during navigation on this webpage(Hide Network is opposite of it)
  • We can filter log messages based on their log types(Verbose, Info, Warning, errors and fatal)
  • We can also search for a specific log message by typing search pattern in Filter box.

2. Sources: This can be used to view the javascript files used by this web page.

If you are developing a javascript application, then this can be used to debug the webpage using this code. But if you are visiting a professional website then most likely the Javascript files are minified, in that case the content will look something as shown in the snapshot above, use can click on {} icon to pretty print this minified javascript, this will make js code readable.

On this panel debugging points could be set in javascript code. We can also observe Javascript call stack or watchers on specific variables using this tab.

3. Elements: This can be used to view the HTML rendered on this web page:

You can right click on any element and view CSS applied on this element or the computed value, link pointed to by any hyperlink on this page by using Inspect element.

4. Network: This can be used to track and analyze various URLs used by this web page

This can be used to see the time taken by this web page to load various components and get response.

It can be used to see what requests have completed and how much time each request took for completion.

5. Memory: This is another useful tab, it can be used to view javascript objects.

We can take a heap snapshot of the current web page, it will track all the Javascript objects and the amount of space taken by those javascript objects.

It is again useful in case the browser is crashing, then we can take a heap snapshot(or load a snapshot previously taken by browsing your local computer) and see which javascript object is consuming maximum amount of space.

Happy starting to debugging using Chrome Debugger. Will add more info in another write-up.

Pankhuri Nigam

Written by

Yet Another Tech Enthusiast

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade