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:
