Debugging Fiori and UI5 – Materials
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!
Here are the materials, organised by the year in which they were created.
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.
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“.
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!.
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.
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!