Start backend using Debugging
Set break point at the beginning of endpoint code. I set up a break point before the JSON data reponse was sent to the frontend.
Start in frontend with split screen loading source for an API fetch using GET. I stepped through the code to see how the data was being processed. In the first picture, I was able to see the houses data being fetched from the backend. In the second picture, I was able to see the data being processed and the data being sent to the frontend. Here, I could see the house data being displayed on the frontend.
Set break point on fetch, inside .then, inside .fetch In the first picture, I set up a break point right before the backend url was being fetched. The second break picture shows the response from the backend url. This picture shows all my house data, which inlcudes a pictue of the house, its price, square feet, number of bedrooms, number of bathrooms, and most importanly, the address of the house. In the third picture, the data is displayed and users can see all the house data displayed.
Run frontend, screen capture break at fetch while examining Body. These pictures show break points in the code that allow me to see the data being processed.
Press play on frontend, observe stop inside of backend.
Press step over on backend until you have obtained data from database, screen capture Python Object.
Press play button to end backend debugging session.
Return to frontend debug session and step in until you see data, screen capture capturing break point and Data.