Chrome Developer Tools are debugging & Web authoring tools built into Google Chrome. The Chrome Developer Tools helps web developers to access the internals of their web application and helps to speed up debugging and optimization.

This article gives some tips on how to use Chrome Developer tools.

Open Dev Tools

  • Select the Chrome menu  at the top-right of your browser window, then select Tools > Developer Tools.
  • Right-click on any web page and select Inspect Element.

Chrome Developer Tools

Panels

  • Elements
  • Resources
  • Network
  • Sources
  • Timeline
  • Profiles
  • Audits
  • Console

Chrome Developer Tools

 

Editing

1.Double click:

Select the element in elements panel and double-click on that and edit. Below is the example where id is added to the h2 element.

Chrome Developer Tools

 

2. Style New Rule:

By Default if you open the dev tools it will be focused on elements panel and on the right side it will be on styles.

Click on right top + button to add New Style Rule. Below is the example of changing the background of the body.

Chrome Developer Tools

 

3. Scroll to view:

To go to the selected element’s viewport on the page, right-click on the selected element and click on scroll into view.

 

scrolltoview

 

4. Computed 

To know what all styles have been applied to the particular element just click on the Computed panel there it will show all the styles which are active for that element.

Chrome Developer Tools

 

5.  Color Formats

Press Shift and click on the small square box to see the color in different formats.

 

Chrome Developer Tools

 

Debugging

1. Step-Through

Click on the lines where you want to put the breakpoints (here it is 6 & 7 which are shown in blue) and refresh your page then you can see the execution get paused.

you can use watch feature of the Chrome Browser to watch variables (hi is the variable added to watch)

 

2. Debugger API

Just add debugger; statement in your code to stop the execution.

Note: Do not push your code to Production with debugger statement in your code it is not a good practice

Chrome Developer Tools

 

 

3. Conditional Breakpoints

If you wish to put the breakpoint for the desired condition say for example you want to stop execution based on the error (if and only if the errorCode is 501).

Chrome Developer Tools

 

4. XHR  Breakpoints

If you only want to put breakpoints on the specified URL say for example api/orders.json

 

Chrome Developer Tools

 

Hope these tips help to speed up your debugging!

Looking for AngularJS Development Company? Hire our dedicated developers!

Also, Read:

An overview of React Portal

How Diff Algorithm is implemented in Reactjs?

Hapi js, Mongoose, MongoDB, Angular.js: A quick way to work

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.