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.
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.
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.
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.
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.
5. Color Formats
Press Shift and click on the small square box to see the color in different formats.
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
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).
4. XHR Breakpoints
If you only want to put breakpoints on the specified URL say for example api/orders.json
Hope these tips help to speed up your debugging!
Looking for AngularJS Development Company? Hire our dedicated developers!