Jerry Wang

March 15, 2016 12 minute read

Chrome Development Tool tips used in my daily work

1. Quickly navigate to the given line of code in source file
2. Quickly find the source file you want
3. Alt + Click to expand all children nodes in Elements tab
4. Alt+Drag to select multiple lines
5. Use $0 to get reference of currently selected html element in console tab
6. copy and values command in console tab
7. Quickly execute a block of codes in console
8. console.trace()
9. More feature of console.log
- print output in console with colored text
- print output in console with rainbow text
- A trick to make text displayed in console as opaque
10. document.body.contentEditable=’true’
11. Async checkbox in Sources tab
12. Forget your password? No worry, you have Chrome development tool!
13. Element attribute breakpoint
14. “set breakpoint” on native function
15. Useful Chrome Tool chrome://net-internals to monitor http request detail
16. Use Throttling to simulate request with long response time
17. Use Chrome development tool to do self-study on some JavaScript function native implementation
18. An example of using Chrome Development Tool to analyze JavaScript garbage collector
19. A useful Chrome extension useful for developers to be allowed to you request any site with ajax from any source
20. Export the content of variable into a local file
21. jQuery style command in console
22. Identify the very HTTP request you are looking for via Regular expression
23. A small tip about using Object.defineProperty to efficiently find code location
More tips to be added …
Further Reading

I would like to use this blog to record the tips of using Chrome development tool in my daily UI5 application development life.

The version of my Chrome is: 49.0.2623.54 beta-m (64-bit).

1. Quickly navigate to the given line of code in source file

In Source tab, select the source file, for example “jquery.sap.act-dbg.js”, press Ctrl+G, type “:<the line number which you want to navigate>”, press enter key:

Destination reached:

2. Quickly find the source file you want

Click Sources->Sources, press Ctrl+O and type the file name character by character. Automatic completion is supported and thus very convenient to search.

3. Alt + Click to expand all children nodes in Elements tab

By default when you click the small triangle icon in Elements tab,

only its direct children node will be expanded:

Use Alt + Click to expand ALL its children.

4. Alt+Drag to select multiple lines

Suppose you only want to select the content after “||” in line 1476 ~ 1477. By default it is not possible.

You can first press Alt, and then perform your selection as usual ( by dragging mouse ).

It is then done:

5. Use $0 to get reference of currently selected html element in console tab

Suppose you use “Elements” tab to inspect the html tag of a given UI control instance:

You can simply type “$0” in console tag to get its reference:

And could directly modify its attribute in console and change will immediately take effect after enter key is pressed:

6. copy and values command in console tab

Still use the $0 in tip #5 for example. In console tab the command copy($0) will put all the source code of this html tag to the clipboard in your laptop,

so that you can just click Ctrl + C to get it in other place:

And command values will get all the attributes values of current object and display it as array:

For sure you can use both in chained style:

7. Quickly execute a block of codes in console

Suppose for trouble shooting, or research or whatever other reasons you would like to execute several lines of code, you could select them and press Ctrl+Shift+E. I just use line 107 ~ 11 below as an example.

Once pressed, those codes will automatically be pasted to Console tab and executed. The result is also displayed there.

8. console.trace()

Suppose you are debugging your code and you could like to save the callstack how your function is called for further research,

for example you would like to save the following callstack information into a text file:

You can just type “console.trace” in Console tab and then you can export the callstack information via Ctrl+C and Ctrl+V .

9. More feature of console.log

For trouble shooting purpose UI5ers like to use console.log to print useful traces however the trace printed by ourselves can easily be lost in the huge ones printed by jQuery.sap.log.debug when the application is running under debug mode. Have you ever considered to make your console.log generating completely different layout so that they could be identified at a first glance?

Paste the following source code into a local test.html file:

<html>
<script>
function myLog(text){
var textWithFormat = "%c" + text;
console.log( textWithFormat," text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em")
}
myLog("Hello, World!");
myLog("Have fun!");
</script>
</html>

And you will get this output:

The format option “%c” tells the console.log to use the CSS style passed in via the second parameter.

More options are listed below:

print output in console with colored text

Another example:

function myLogWithColor(text) {
console.log("%c" + text,"background: rgba(252,234,187,1);background: -moz-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%,rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: -webkit-gradient(left top, right top, color-stop(0%, rgba(252,234,187,1)), color-stop(12%, rgba(175,250,77,1)), color-stop(28%, rgba(0,247,49,1)), color-stop(39%, rgba(0,210,247,1)), color-stop(51%, rgba(0,189,247,1)), color-stop(64%, rgba(133,108,217,1)), color-stop(78%, rgba(177,0,247,1)), color-stop(87%, rgba(247,0,189,1)), color-stop(100%, rgba(245,22,52,1)));background: -webkit-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: -o-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: -ms-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: linear-gradient(to right, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#f51634', GradientType=1 );font-size:5em");
}
myLogWithColor("Hello, World!");
myLogWithColor("Have fun!");

Output:

print output in console with rainbow text

function myLogWithRainbow(text) {
console.log('%c' + text, 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');
}
myLogWithRainbow("Hello, World!");
myLogWithRainbow("Have fun!");

A trick to make text displayed in console as opaque

Inject the standard console.log with the code below:

var _log = console.log;
console.log = function() {
_log.call(console, '%c' + [].slice.call(arguments).join(' '), 'color:transparent;text-shadow:0 0 2px rgba(0,0,0,.5);');
};

And now the normal “Hello world” will be displayed as below:

10. document.body.contentEditable=’true’

This tip is especially useful for those guys if they need to make mockup based on existing Webpages but lack of needed html knowledge. For example, if a mockup is needed which contains only a small modification on the post date of this blog, a technical guy will open Chrome development tool, locate the corresponding DOM element which represents the blog post date:

And change the year from 2016 to 2015 in HTML source code, and that’s done.

Now another convenient approach is, type document.body.contentEditable=’true’ in console type and press entry key.

Have you noticed the ” | ” prompt after “in SAPUI5 Developer Center”? It means the current page is switched to edit mode.

Now Chrome works as a normal text editor, you can change any text you see in the page, without knowing the html source code under the hood. Using this approach I just made this blog as one of the most popular ones ever since SCN is founded. 🙂

Jerry update on 2017-02-11

This line in console also works ( make the current html page editable ), see example below:

11. Async checkbox in Sources tab

As promise programming pattern is used more and more heavily used in latest version of UI5, it becomes difficult to debug asynchronously executed function. For example, if you set breakpoint on line 185 below, when the breakpoint is triggered, there is no available callstack information so you cannot know which function triggers the call of load() at all.

Fortunately we have Chrome. You can simply click “Async” checkbox and refresh application.

This time callstack is available, you can clearly know it is ODataAnnotations._loadFromUrl which triggers the callback load() asynchronously.

12. Forget your password? No worry, you have Chrome development tool!

You have forgotten the password? There are lots of tips introduced in the internet telling you how to retrieve this password back. Fortunately we are developer, we are able to use the most efficient approach: open Chrome development took, find the id of password control in Elements tab. In my case it is “password”.

Then use jQuery-like grammar in console: password is displayed!

13. Element attribute breakpoint

Have you even used this context menu? If not, so this example about the detail how I have troubleshooted one real issue by using this tip: A quick way to find which code has changed the UI5 application page title by debugging

14. “set breakpoint” on native function

It is actually impossible to set breakpoint on native function ( you never have chance to see the source code of those native function ), this is the reason I use quotes here.

I am learning Angular recently and for the html page rendered by Angular, there is some automaticaly generated comment as highlighted below.

For self study purpose I am eager to know in which line of code in angular.js those comments are created, however I cannot set breakpoint on the native function createComment.

How to proceed then?

1. Set a breakpoint on the first line of angular.js, launch the html page, breakpoint is triggered:

2. Copy the following JavaScript code into console and type enter to execute it. Now the native function createComment is injected by these source code: every time it is called in Angular.js, the injected source code will be executed instead.

3. All the left task for me is to continue debug and debugger is triggered automatically when Angular.js calls createComment with a value containing string “ngRepeat”.

This is just what I am looking for 🙂

15. Useful Chrome Tool chrome://net-internals to monitor http request detail

Updated on 2017-02-06: although I have been using Chrome for two years, I didn’t know this tool until today…

Although it is actually not part of development tool, nevertheless I think it is still worthy of a recommendation. It provides far more useful information regarding http request & response information compared with the tab “Network” in Chrome development tool.

See one of my example that how I use this tool to trouble shoot a real issue in my development.

Updated on 2018-04-13: how to leverage this feature to figure out a JavaScript source code map related question which once makes me confused for a while:

16. Use Throttling to simulate request with long response time

If you need to simulate a request which has long response time, for example if you would like to test whether you application works still well under not so good network connection, you can use Chrome development to simulate the network delay.

Below is an example that it only takes me 1.9s to receive a image file with size 1.2 MB in my laptop with Wifi connection.

When I switch from “No throttling to Regular 4G”, the response time increases to 9.74s.

17. Use Chrome development tool to do self-study on some JavaScript function native implementation

Are you curious about this “native code”? Would you like to figure it out by yourself? Use Chrome development tool to do self-study on some JavaScript function native implementation.

18. An example of using Chrome Development Tool to analyze JavaScript garbage collector

Are you curious about how JavaScript garbage collection works?

An example of using Chrome Development Tool to analyze JavaScript garbage collector.

19. A useful Chrome extension useful for developers to be allowed to you request any site with ajax from any source

See this blog Cross domain request in ABAP and Java with two workaround about more details how to use it.

20. Export the content of variable into a local file

In case you are doing trouble shooting and there is a variable which is a huge json object and you could like to export its content into a local file for further analysis, you can simply:

Paste the following JavaScript code to your Development tool console and execute it:

(function(console){
console.save = function(data, filename){

    if(!data) {
        console.error('Console.save: No data')
        return;
    }

    if(!filename) filename = 'console.json'

    if(typeof data === "object"){
        data = JSON.stringify(data, undefined, 4)
    }

    var blob = new Blob([data], {type: 'text/json'}),
        e    = document.createEvent('MouseEvents'),
        a    = document.createElement('a')

    a.download = filename
    a.href = window.URL.createObjectURL(blob)
    a.dataset.downloadurl =  ['text/json', a.download, a.href].join(':')
    e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
    a.dispatchEvent(e)
 }
})(console)

This script will inject a function named save to console object. Now you can use console.save(<variable name>, <local file name>) to export the variable.

In my example, I have exported the content of oConfig to local file oConfig.json and open it with my json editor:

The script used is found from this github.

21. jQuery style command in console

It is supported to use jQuery-like selector in Development tool console. For example, if I would like to figure out how many buttons are there in this UI5 page, I can simply type $(‘button’) in console, and the result shows there are 15 buttons.

Expand the result array and click one, then the corresponding button will automatically be highlighted:

22. Identify the very HTTP request you are looking for via Regular expression

Suppose there are lots of HTTP request involved in your scenario and there are only slight difference, and you could like to identify the very request efficiently. Here below is the solution:

23. A small tip about using Object.defineProperty to efficiently find code location

This tip introduces a way how to leverage the power of Object.defineProperty in Chrome development tool, to dynamically inject a getter / setter hook to a JavaScript variable to accelerate your debugging process.