Learn chrome devtools debugging according to the official tutorial, which is different from the tutorial?

tutorial link https://developers.google.com.

clipboard.png1
clipboard.png figure 2

do step 2 of the lesson: use the breakpoint pause code, return to the demo page, and click Add Number 1 and Number 2 again. DevTools pauses the demo and highlights a line of code in the Sources panel. DevTools highlights the following line of code: figure 1

however, on my browser, there is a screenshot of figure 2, which is completely different. I don"t know what"s going on.

Sep.23,2021

there is a saying in the tutorial, have you noticed

If you're paused on a different line of code, press Resume Script Execution Resume Script Execution until you're paused on the correct line.

that means you may need to press the execute button to keep running, usually once or twice you can stop at the location you want, because some plug-ins in your browser may also grab the click event, and the breakpoint comes first, so just execute more.

Menu