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:

/wp-content/uploads/2016/03/clipboard1_908521.png

Destination reached:

/wp-content/uploads/2016/03/clipboard2_908546.png

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.

/wp-content/uploads/2016/03/clipboard3_908547.png

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

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

/wp-content/uploads/2016/03/clipboard4_908548.png

only its direct children node will be expanded:

/wp-content/uploads/2016/03/clipboard5_908549.png

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.

/wp-content/uploads/2016/03/clipboard6_908550.png

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

It is then done:

/wp-content/uploads/2016/03/clipboard7_908551.png

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:

/wp-content/uploads/2016/03/clipboard8_908552.png

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

/wp-content/uploads/2016/03/clipboard9_908553.png

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

/wp-content/uploads/2016/03/clipboard10_908554.png

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,

/wp-content/uploads/2016/03/clipboard11_908555.png

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

/wp-content/uploads/2016/03/clipboard12_908556.png

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

/wp-content/uploads/2016/03/clipboard13_908557.png

For sure you can use both in chained style:

/wp-content/uploads/2016/03/clipboard14_908558.png

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.

/wp-content/uploads/2016/03/clipboard1_908521.png

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

/wp-content/uploads/2016/03/clipboard2_908546.png

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:

/wp-content/uploads/2016/03/clipboard8_908552.png

 

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

/wp-content/uploads/2016/03/clipboard9_908553.png

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:

/wp-content/uploads/2016/03/clipboard1_908521.png

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

More options are listed below:

/wp-content/uploads/2016/03/clipboard2_908546.png

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:

/wp-content/uploads/2016/03/clipboard3_908547.png

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

/wp-content/uploads/2016/03/clipboard4_908548.png

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:

/wp-content/uploads/2016/03/clipboard_923673.png

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:

 

/wp-content/uploads/2016/03/clipboard1_908521.png

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

/wp-content/uploads/2016/03/clipboard2_908546.png

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

/wp-content/uploads/2016/03/clipboard3_908547.png

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

/wp-content/uploads/2016/03/clipboard4_908548.png

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. 🙂

/wp-content/uploads/2016/03/clipboard5_908549.png

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.

/wp-content/uploads/2016/03/clipboard1_908521.png

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.

/wp-content/uploads/2016/03/clipboard2_908546.png

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”.

https://cloud.githubusercontent.com/assets/5669954/15602084/bbc08932-2425-11e6-86be-44b375fa61c5.png

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

https://cloud.githubusercontent.com/assets/5669954/15602085/bbc0b48e-2425-11e6-83dc-94086cad1633.png

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

https://cloud.githubusercontent.com/assets/5669954/15604477/38fec06e-2433-11e6-9241-33a82e8f418f.png

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.

https://cloud.githubusercontent.com/assets/5669954/15820394/bfc707b0-2c1b-11e6-9b49-ffffcd477d72.png

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

https://cloud.githubusercontent.com/assets/5669954/15820390/bfc25724-2c1b-11e6-8401-4f6b332ae835.png

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:

https://cloud.githubusercontent.com/assets/5669954/15820392/bfc3fed0-2c1b-11e6-98c8-3885d3469538.png

 

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.

https://cloud.githubusercontent.com/assets/5669954/15820389/bfc1c5f2-2c1b-11e6-8b06-cc0dee4a9158.png

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”.

https://cloud.githubusercontent.com/assets/5669954/15820393/bfc58516-2c1b-11e6-989e-24f732ae8ff7.png

This is just what I am looking for 🙂

https://cloud.githubusercontent.com/assets/5669954/15820391/bfc2ab52-2c1b-11e6-8bdb-bba53b727b82.png

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.

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?

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.

More tips to be added …

Further Reading

See the list of real incidents processed by Jerry in his daily work and finally root cause is found by debugging in Chrome development tool.

To report this post you need to login first.

7 Comments

You must be Logged on to comment or reply to a post.

Leave a Reply