Debugging SAPUI5 in Chrome DevTools

Use Chrome DevTools to set JS breakpoints in SAPUI5 controllers, inspect the binding context, and read OData network requests.

Debugging SAPUI5 in Chrome DevTools

Chrome DevTools is the main debugging environment for SAPUI5 apps.

Enable SAPUI5 Debug Mode

Add ?sap-ui-debug=true to the URL:

http://localhost:8080/index.html?sap-ui-debug=true

This loads the non-minified source files, making breakpoints and stack traces readable.

Set a Breakpoint in a Controller

1. Open DevTools (F12) → Sources tab
2. Expand the localhost:8080 origin in the left file tree → your webapp/ folder appears with all your .js and .xml files

SAPUI5 uses @ui5/cli, not webpack — there is no webpack:// virtual filesystem.

1. Open a controller (e.g. webapp/controller/Main.controller.js)
2. Click the line number in the gutter to set a breakpoint
3. Trigger the action in the UI — execution pauses at your breakpoint

Quick way — add debugger in code

onPress: function (oEvent) {
  debugger; // ← DevTools will pause here
  var oItem = oEvent.getSource();
  // ...
}

Remove debugger statements before committing.

Inspect the Binding Context

In DevTools Console, reference any SAPUI5 control by its ID:

// Get the model data bound to a list item
sap.ui.getCore().byId("myList").getBinding("items").getModel().getData()

// Get a specific control and its binding context
var oCtrl = sap.ui.getCore().byId("myInput");
oCtrl.getBindingContext().getObject()

Inspect OData Network Calls

1. Open DevTools → Network tab
2. Filter by XHR or type odata in the filter box
3. Click a request to see:
4. Headers — URL, method, auth token
5. Response — JSON payload returned by the service
6. Timing — how long the request took

Simulate network errors

In the Network tab, right-click a request → Block request URL. This lets you test how your app handles service failures.

SAPUI5 Support Tool (built-in debugger)

Press Ctrl+Alt+Shift+S while the app is running to open the built-in SAPUI5 Support Tool. It shows:

• Model state
• Binding issues
• Performance timeline
• Control tree

Common errors and what they mean