Skip to Content

There’s a new openSAP course starting today: Understanding SAP Fiori Launchpad. I’m looking forward to participating, as it has the ingredients to make a very interesting set of units. Reading the overview page we can see that some debugging is involved, and specific mention of the excellent Chrome Developer Tools (“devtools” for short) is made.

Debugging as a pastime

I find debugging an enjoyable activity, especially when looking at UI5 powered apps and infrastructure with those very devtools. Over the last few years I’ve created material in this area, and thought it would be worthwhile gathering a reference to it here to welcome the openSAP course and serve as a starting point for those wanting to learn more about debugging UI5. I’ve created blog posts, recorded videos and produced worksheets to accompany presentations and workshops I’ve given. I like debugging UI5 so much I even went so far as to write a book on the subject.

Writing about debugging is hard, there’s always a lot to describe. It’s often better to just show debugging, which is why there are more videos than any other material type. I’ve gathered them together in a YouTube playlist: Fiori & UI5 Debugging; the individual videos are described here.

If you like the videos, please head on over to my channel and hit the red Subscribe button!

Materials

Here are the materials, organised by the year in which they were created.

2017

Worksheet: At UI5con@SAP I gave a hands-on workshop “Functional Programming for your UI5 Apps”, where I took the participants through some functional techniques in JavaScript, using UI5 apps as sources of inspiration. By necessity the hands-on exercises made use of the Chrome devtools, where we modified running UI5 apps on the fly. There’s a detailed worksheet that accompanied the workshop here: http://bit.ly/qmacro-ui5con-funcprog.

Video: In Using jq to parse out SCP destination information I make use of the HTTP archive (HAR) format to save information on the resources loaded when looking at the destinations in the SCP cockpit.

Post: While at Bluefin I wrote Debugging SAP Fiori apps – the fifth “D” which looks at how debugging is a core part of development and is in fact a conversation.

Video: Setup for E-Bite “SAP Fiori and UI5: Debugging the User Interface” refers to the SAP Press book described later in this post and shows you how to set up the app that accompanies it, which we debug throughout the book.

2016

Book: At the end of 2016 I wrote an E-Bite book for SAP Press: SAP Fiori and SAPUI5: Debugging the User Interface which is all about, well, debugging Fiori and UI5 apps using the Chrome devtools and more.

Video: openSAP UI5 Course W4 Bonus – in a nice circular reference (to another openSAP course) this is a recording of my work on the bonus exercise from week 4 of the excellent course “Developing Web Apps with SAPUI5“.

2015

Post: A Short UI5 Debugging Journey – as part of the 30 Days of UI5 series of posts, I wrote this post which takes a look at the UI5 Support Tool and the devtools to debug a feature in the UI5 Explored app.

Video: Fixing up a nicer HCP Destinations table – from when SCP was called HCP. One of the sessions I gave at SAP Inside Track Sheffield (SITsheff) in 2015 was “Learning to Drive Fiori Apps from Underneath – Fixing up a nicer HCP Destinations table”. It’s described on the SITsheff page, and there’s a link to an accompanying document. I thought it might be useful to record a screencast of what I did during that session.

Video: Fiori Apps Reference Data into a Spreadsheet. In the early days of the SAP Fiori Apps Reference Library I looked into where the data was coming from, and used the devtools to find out and get the apps info into a spreadsheet. I wrote a post on this here: Fiori App Data into a Spreadsheet? Challenge Accepted!.

2014

Video: In SAP Fiori & UI5 Chat, Fri 17 Oct 2014, my friend and erstwhile Bluefin colleague Brenton OCallaghan chat about Fiori and UI5 topics, and naturally we can’t resist breaking out the devtools, this time to explore the Fiori Apps Reference Library app.

Video: Creation & Reload of UI5 UIs in the Chrome Developer Console – at SYD airport returning from the SAP Architect and Developer Summit, I recorded a quick screencast to show the creation of a quick UI, using the manual Chrome Developer Console techniques we learned there.

Worksheet: At the SAP Architect & Developer Summit I gave a workshop on driving Fiori apps from underneath, i.e. from the Chrome devtools. I wrote a comprehensive worksheet to accompany that workshop: Learn to Drive Fiori Applications from Underneath and Level Up!

Video: In a precursor to other longer “manipulation-with-devtools” pieces, the video “Manipulating UI5 Controls from the Chrome Dev Console” is a short demonstration of how easy it can be to find, grab, manipulate and create controls in a UI5 app from the devtools.

Video: One of the webinars in which I participated at Bluefin was “Understanding SAP Fiori”. Brenton OCallaghan and I followed up on this with a video Understanding SAP Fiori Webinar Followup, wherein we dive into a transactional app to see how it’s put together.

Next steps

This is just material from more or less a single individual; there’s plenty more out there on the web. So what are you waiting for? Grab an unsuspecting Fiori app, open the Chrome devtools, and off you go!

To report this post you need to login first.

6 Comments

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

  1. Mike Doyle

    Thanks DJ. The Chrome dev tools are one of the reasons I love writing ui5 apps. A significant proportion of the time we spend ‘programming’ is actually spent debugging

    (2) 
  2. Michelle Crapo

    Thank you! More tools.

    I just finished the course. It showed how to get to the debugger. Some basic tricks. Just enough to make me want more.

    This will help a lot!

    Michelle

    (1) 
  3. Martin Schlegel

    Hello DJ, thank you for recommending the openSAP course Understanding SAP Fiori Launchpad. I have just finished Unit 2 and I am really overjoyed about the introduction to Fiori debugging.

    I come from ABAP and ABAP debugging and now I have an entry point for Fiori. Of course, I will have to learn a lot more, but I am really excited to go ahead.

    Kind regards

    Martin

    (2) 

Leave a Reply