Skip to Content
Author's profile photo Nabheet Madan

F12 Three Magic Dots – #ChromeDeveloperTool

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.

Assigned Tags

      4 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo DJ Adams
      DJ Adams

      Nice post. Glad I'm not the only one who likes to have the Chrome Developer Tools open most of the time, to see what's going on behind the curtain šŸ™‚

      Author's profile photo Nabheet Madan
      Nabheet Madan
      Blog Post Author

      ThanksĀ DJ AdamsĀ ! #DebuggerRocks

      Author's profile photo Nigel James
      Nigel James

      Great Post.

      I have been Profiling and Heap Snapshotting a lot recently.

      The debugging tools have great doco .

      Cheers,

      Nigel

      Author's profile photo Sandra Rossi
      Sandra Rossi

      Note that to run the Edge/IE Developer Tools for HTML contents displayed inside a SAP GUI window (CL_GUI_HTML_VIEWER), you may runĀ C:\Windows\SysWOW64\F12\F12Chooser.exe orĀ C:\Windows\System32\F12\F12Chooser.exe orĀ C:\Windows\SysWOW64\F12\IEChooser.exe orĀ C:\Windows\System32\F12\IEChooser.exe (okay, it's not Chrome but well it does the job)