Using Google Chrome Inspect element to measure the new Unified Rendering Light Speed in Web Dynpro ABAP

[fabio_dimicco2]

After working on several WDA projects based on NW 7.0, I'm finally involved in a new one based on NW 7.01. A lot of new features have been released and they are described in the OSS note "1107662 - Web Dynpro ABAP: Unified rendering light speed (7.01, 7.11)" and in the documentation chapter "Unified Rendering Light Speed in Web Dynpro ABAP".

In this weblog I want to present avery powerful feature of Google Chrome called Inspect element that I used to measure the benefits of the Unified Rendering Light Speed in Web Dynpro ABAP introduced in NW 7.01.

I measured the standard Web Dynpro application WDR_TEST_EVENTS with Inspect element both in NW 7.0 and NW 7.01.

This is the page that I measure with Google Chrome. 

 

To open Inspect element you must click (right mouse click) in the bottom of page or select this button  (in the top of page) .

Chrome opens in pop-up the developers tool (see the following pictures).

This is the inspect of the resources of NW 7.0:

 

And this is the inspect of the resources of the NW 7.01 Unified Rendering LightSpeed:

 

In yellow we can see that NW 7.01 takes advantage of the Ajax technology indeed XHR means "XMLHttpRequest".

Here you can measure the time spent to download each CSS, JS, Image, Ajax call and all the object insidethe web page.

The differences between NW 7.0 and NW 7.01:

1.  In NW 7.01 there is a lot of Ajax that for sure decreases the bandwidth usage, since it does not require the pagewith all its content to be reloaded, content is loaded on demand.

2.  In NW 7.0 there are all images, stylesheets and more scripts to load.

Selecting an object (for example wda_ls_main.js) you can also directly open the source code.

 

In the first tab, instead, you can see all the elements of the web page (frameset, Iframe, scripts etc… ) 

 

And last but not least, there is a Profile.

To activate this, you must start the registration with a button in bottom of page (start Profiling  ). 

Now select another link in the view and stop Profiling. Like in our dear SE30, the execution time of each JavaScript function is reported. 

 

This is a great tool to inspect and verify how web pages are rendered especially to check the used mimes objects.

Best Regards and Chrome for all!

Fabio Di Micco 

Google Chrome blog series:

                Running Web Dynpro for ABAP on Google Chrome before NetWeaver EnhP1