What you'll learn

Debugging SAPUI5 / UI5 / FIORI Applications in Chrome
Debugging explained with Chrome Developer Tools
Core concepts of SAPUI5/FIORI Debugging explained with examples
Chrome Developer tools, Diagnostic Tools, Technical POP UP, Sources Panel, network Panel, Console, Elements Panel, UI5 Inspector extension tool and much more

Course content

3 sections • 18 lectures • 2h 50m total length

Introduction4:45

Create BTP Trial account, access Dev Spaces4:20
Introduction to Dev Spaces2:40
Launch BAS1:00
Launch BAS to access the development environment, manage spaces, and note trial account limits on running spaces as the business application studio loads for the selected space.
Explore BAS7:34
Create and Execute SAPUI5 Application9:34
Create Application based on Northwind ODATA Service16:39
Connecting to S4HANA System, Migrating Project from WEBIDE to BAS10:08
Deploying Application to SAP Cloud Platform or Business Technology Platform16:20

Introduction to Chrome Developer tools11:16
Network Panel15:42
Network Panel when using FIORI Launchpad Service, Component-preload.js8:59
Debug Mode ON/OFF4:35
Debug Tools- Diagnostic tool, technical POP Up, UI5 Inspector, extensions11:12
Explore SAPUI5 debugging tools: the diagnostic tool, technical information popup, and UI5 inspector, plus extensions. Learn to inspect XML views, properties, and binding details with JSON and XML extensions.
Call stack in Network Panel, finding JS Files, understanding the flow8:01
Finding UI5 Controls from DOM Elements8:58
Understanding Models, how data is set to controls in debugging15:31
Retrieve ODATA URL debugging, understand Aggregation binding-absolute & relative12:49

Requirements

SAPUI5 / UI5 / FIORI Developers or Students who are learning SAPUI5 / UI5 / FIORI

Description

To be a successful developer you need to be a successful debugger. Without debugging Skills a developer cannot succeed well.

Core concepts of debugging SAPUI5 / FIORI / UI5 Applications are explained in this course in chrome developer tools.

The prerequisite for this course is that you need a basic understanding of SAPUI5/FIORI application Development.

I have another course published- "SAPUI5/Fiori FullStack on BTP | RAP/ABAP Cloud& SAP BTP CAPM", Course is top-rated for covering in-depth concepts of SAPUI5. Please either complete that course or enroll in any other SAPUI5 Course, you can learn this course in Parallel with any other SAPUI5 course.

The following topics are covered in this course:-

UI5 developer tools/debugging tools:-

Chrome developer tools - Inspector tool, Elements Panel, Sources Panel, Network Panel to understand the call stack and performance load of Applications
Technical POP UP and Diagnostic tool
UI5 Inspector extension available for chrome browser
XML and JSON View extensions for easily viewing XML and JSON Data in the browser
Understanding component-preload.js or Minification/Uglification of code in SAPUI5/FIORI

Additional content covered in this course for environment setup:-

How to set up a free Business Technology Platform/ SAP Cloud Platform trial account.
How to use Business Application Studio
How to import Applications to Business Application Studio
How to export Applications to SAP Business Technology Platform/ SAP Cloud Platform
How to run applications deployed to SAP Business Technology Platform/ SAP Cloud Platform
Create FIORI Application using Business Application Studio based on Northwind OData Services

Who this course is for:

SAP Developers

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 5min

Additional Content: Environmental Set Up-BAS IDE(Optional)8 lectures • 1hr 8min

Main concept of course- SAPUI5/FIORI Debugging9 lectures • 1hr 37min

Requirements

Description

Who this course is for: