- Quickly navigate to the given line of code in source file
- Quickly find the source file you want
- Alt + Click to expand all children nodes in Elements tab
- Alt+Drag to select multiple lines
- Use $0 to get reference of currently selected html element in console tab
- copy and values command in console tab
- Quickly execute a block of codes in console
- console.trace()
- 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
- document.body.contentEditable=’true’
- 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:
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
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.
