Add browser console logs to your UI5 development using an elegant option
But first, why do you need a log? Some times we want to avoid a debug we can use the famous command console.log that allows us to display messages in the browser console (typically by pressing F12).
First we will create an application in SAP WEBIde. For example, we will create an “SAPUI5 application “. We do not need more for now:
Once we have the application, we go to the controller that we want to add the log and we instantiate the log libraries (“sap / base / Log”):
Once the libraries are added, we can add the different log types. These logs can be info, debug, warning, error, fatal.
Depending on the added code we can see the different stitch message in the browser console or filter by message types.
For now we will add them all to see their effects in the console, for this, we will add them in the same controller where we have put the library, in the onInit event:
Log.info("Aquí una Información"); Log.debug("Aquí una información de debug"); Log.warning("Aquí un warning"); Log.error("Aquí un error"); Log.fatal("Aquí una catástrofe");
So we will have something like this:
We still have to enable the log at the application level, for this we will add in the file index.html the instruction:
data-sap-ui-logLevel = "debug"
So we have a file like this:
We execute our application and look at the Log. To do this, execute the application with the run button and once loaded our application press F12:
The first thing we can see is that depending on the type of message in the console appears in one color or another, error in red, warning in yellow, rest without color.
It also allows us to show only errors by level, in this case warnings and errors:
For more information