Place a breakpoint on the line with the for loop by clicking to the
left of the line number. The breakpoint now appears
in the Breakpoints section to the left of the window.

Trigger the breakpoint.
In the running app, click one of the text fields to gain focus.
The app hits the breakpoint and pauses.
In the DevTools screen, you can see on the left
the value of progress, which is 0. This is to be expected,
since none of the fields are filled in.
Step through the for loop to see
the program execution.

Resume the app.
Resume the app by clicking the green Resume
button in the DevTools window.

Delete the breakpoint.
Delete the breakpoint by clicking it again, and resume the app.

This gives you a tiny glimpse of what is possible using DevTools,
but there is lots more! For more information,
see the DevTools documentation.

Step 3: Add animation for sign in progress