Lesson 2: Debugging Application Code

To overcome the error that you got in the previous lesson, now open your app inside Adobe Experience Cloud (ExC) Shell on the same Chrome Debug window: https://experience.adobe.com/?devMode=true#/apps/?localDevUrl=https://localhost:9080. You might be asked to log in using your Adobe ID. When opened, the UI is almost similar to that when you access it on localhost, except the ExC Shell on top.

At this time, the action runs successfully, and you can see the response body of hello action in the browser console.

Let's try debugging this action. Go back to the Explorer View in VSCode, open the file actions/hello/index.js. At line 40, it makes a request to the Adobe I/O Runtime API docs at https://adobeioruntime.net/api/v1/api-docs.

Copy
const apiEndpoint = 'https://adobeioruntime.net/api/v1/api-docs'
const res = await fetch(apiEndpoint)
Copied to your clipboard
const apiEndpoint = 'https://adobeioruntime.net/api/v1/api-docs'
const res = await fetch(apiEndpoint)

You may want to debug what is returned from this API call to decide what to do next. To debug, you first need a breakpoint at line 40.

Go back to the Chrome Debug window, access the at inside ExC Shell if not already done: https://experience.adobe.com/?devMode=true#/apps/?localDevUrl=https://localhost:9080. Select the hello action and invoke. Your debugger would stop at the breakpoint you set earlier, which allows inspecting values of the variables in your code.

Note: If your code uses App Builder State or Files SDKs, you cannot use this debugging method. More details about it here.

You can debug your UI code in the web-src folder in the same way as debugging action code. However, almost every browser comes with handy built-in debugging capabilities, you should leverage these to get the most out of it.

Below is an example ran on Firefox.

Last updated 6/25/2024

Was this helpful?

Yes

No