June 27, 2018

How to use Google Chrome debugger(Break point)

Google Chrome debugger line number

Open the Google Chrome developer mode(F12) and click "Sources" tab.

At the left side, you will find some HTML files.

Select the HTML file to debug. If the source code is invisible, refresh the page(F5).

When you click a line number, It is checked. It is called the breakpoint. The breakpoint is recorded right side's "Breakpoints" list.




Google Chrome debugger resume button

When refreshing the page, the breakpoint will work.

But if you don't want to debug anymore, click the resume button(F8).




Google Chrome debugger step over button

If you want to run a line of source code, click the step over button.




Google Chrome debugger step into button

If you want to go into a function, click the step into button.




Google Chrome debugger step out button

If you want to exit a function, click the step out button.


※ I personally don't recommend you the step button(→). Because this runs every single source, debugging can be disturbed by moving to an unintended location. So I will not introduce it here.