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

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+O, type “:<the line number which you want to navigate>”, press enter key:

Chrome Development Tool tips used in my daily work

Destination reached:

Chrome Development Tool tips used in my daily work

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.

Chrome Development Tool tips used in my daily work

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

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

Chrome Development Tool tips used in my daily work

only its direct children node will be expanded:

Chrome Development Tool tips used in my daily work

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.

Chrome Development Tool tips used in my daily work

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

Chrome Development Tool tips used in my daily work

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:

Chrome Development Tool tips used in my daily work

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

Chrome Development Tool tips used in my daily work

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

Chrome Development Tool tips used in my daily work

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,

Chrome Development Tool tips used in my daily work

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

Chrome Development Tool tips used in my daily work

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

Chrome Development Tool tips used in my daily work

For sure you can use both in chained style:

Chrome Development Tool tips used in my daily work

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.

Chrome Development Tool tips used in my daily work

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

Chrome Development Tool tips used in my daily work

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:

Chrome Development Tool tips used in my daily work

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

Chrome Development Tool tips used in my daily work

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:

Chrome Development Tool tips used in my daily work

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

More options are listed below:

Chrome Development Tool tips used in my daily work

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:

Chrome Development Tool tips used in my daily work

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!”);

Chrome Development Tool tips used in my daily work

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:

Chrome Development Tool tips used in my daily work

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:

Chrome Development Tool tips used in my daily work

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

Chrome Development Tool tips used in my daily work

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

Chrome Development Tool tips used in my daily work

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

Chrome Development Tool tips used in my daily work

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

Chrome Development Tool tips used in my daily work

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.

Chrome Development Tool tips used in my daily work

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.

Chrome Development Tool tips used in my daily work

Leave a Reply

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