What can I do with the Debugger for Chrome?

Hello.
I have started using Gatsby and developing my own websites in it,
and so far I have been developing web apps with Live Servers, auto refresh with autosave on with Visual Studio Code and I am fixing issues/bugs/code just like that.
If I make a mistake I just read the Errors in Console.Log/Browser and fix them myself.

I have never used a debugger and I don't know how it would help me.

What is the Debugger, what it does?

And how do I configure Visual Studio Code, Gatsby and Chrome for the debugger?