F12 Three Magic Dots - #ChromeDeveloperTool

[nabheetscn]

A developer does not matter which language he/she uses to program always has one thing in common which is debugging. I normally like to have my F12 window open most of the time when I am surfing to understand how different sites etc. work. This blog is result of one of such adventure.



While changing the docking position of the debugger tool by clicking on the three dots in console, i saw more tools options. So that is from here the journey of discovering some cool tools started. For all the demonstrations I am using SAPUI5 Walkthrough code

Changes

Imagine you have an app loaded in browser and you make some changes in debugger in multiple files. Now you see things are working as need and you want to incorporate the same changes in your code. Most of the times it gets tough to recall what all changes have we done in JS/CSS files. So this tool helps in knowing all the changes done in the browser.

Coverage

Another handy tool which shows when a page loads which all code was used/triggered and which was not. I wish this feature was available in ABAP, as most of the time we are using breakpoint to understand what all code has been triggered in this iteration.

Network Conditions

This is great tool which actually simulates how our app will load under different type of conditions like Fast 3G, 2G and even custom network speeds.

Request Blocking

Another great feature which you can use to block certain kind of request to concentrate better on the things to be focussed.  In the below screenshot you can see i can block the SAPUI5 core calls and page does not load. We can add wildcards also to block the request

Search

Search is one of the great feature which i like which performs a global search in the files. Earlier i used open the file do a Cntrl+F then find in each file. Using this feature you can search globally.

What is next

I have covered few of the tools, will explore further. Important thing for us to understand is to keep a close tab on the below mentioned button called as What is new. This is where all the recent enhancement/features added in the browser are documented. One shall check them once a month to understand the recent stuff.



Looking forward to hear from you about your favorite debugging tips and the feedback if any.