Skip to content

Commit

Permalink
Update lesson2.md - embed links, capitalization, punctuation
Browse files Browse the repository at this point in the history
  • Loading branch information
Patrick-Mulvanny authored Dec 11, 2024
1 parent c352607 commit 9ad566f
Showing 1 changed file with 8 additions and 8 deletions.
16 changes: 8 additions & 8 deletions src/pages/resources/debugging/lesson2.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,32 +11,32 @@ title: 'Lesson 2: Debugging Application Code'

# 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.
To address the error from the previous lesson, 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 may 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 will be on top.

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

![exc-invoke](assets/exc-invoke.png)

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.
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:

```javascript
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.
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:

![set-breakpoint](assets/set-breakpoint.png)

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.
Back in the Chrome Debug window, access the action inside ExC Shell if you haven't already: https://experience.adobe.com/?devMode=true#/apps/?localDevUrl=https://localhost:9080. Select the `hello` action and invoke. Your debugger should stop at the breakpoint you set, so you can inspect values of the variables in your code.

*Note: If your code uses App Builder [State](https://github.com/adobe/aio-lib-state) or [Files](https://github.com/adobe/aio-lib-files) SDKs, you cannot use this debugging method. More details about it [here](../../getting_started/common_troubleshooting.md#debugging-errors-with-state-and-files-sdk).*
>Note: If your code uses App Builder [State](https://github.com/adobe/aio-lib-state) or [Files](https://github.com/adobe/aio-lib-files) SDKs, you cannot use this debugging method. There are more details about it [here](../../getting_started/common_troubleshooting.md#debugging-errors-with-state-and-files-sdk).
![debugger-action](https://raw.githubusercontent.com/AdobeDocs/adobeio-codelabs-debugging/master/lessons/assets/debugger-action.gif)

You can debug your UI code in the `web-src` folder in the same way as [debugging action code](lesson2.md). However, almost every browser comes with handy built-in debugging capabilities, you should leverage these to get the most out of it.
You can debug your UI code in the `web-src` folder in the same way as [debugging action code](lesson2.md). But since almost every browser comes with built-in debugging capabilities, you may want to use them instead.

Below is an example ran on Firefox.
This is an example run on Firefox:

![debugger-ui](assets/debugger-ui.png)

0 comments on commit 9ad566f

Please sign in to comment.