• Crow@lemmy.world
    link
    fedilink
    arrow-up
    8
    ·
    1 year ago

    Ten years into casual programming and I still don’t know how to use a debugger.

    • Atiran@lemm.ee
      link
      fedilink
      arrow-up
      2
      ·
      1 year ago

      It’s easy, you just step, step, step, step in, or wait, over, or, oops.

        • erogenouswarzone@lemmy.ml
          link
          fedilink
          English
          arrow-up
          1
          ·
          1 year ago

          Yes, but only because it gives you a link to where that was run. Click the link to the right with filename:lineNumber, and it will open the sources tab to that line. Set a breakpoint and rerun to pause there, then step through the code’s execution.

          Of course, if you’re using minified or processed code, this will be more difficult, in that case figure out how to do it in VS Code.

    • erogenouswarzone@lemmy.ml
      link
      fedilink
      arrow-up
      1
      arrow-down
      1
      ·
      1 year ago

      Watch a Video or read something because it really is an invaluable tool. But here’s a crash course:

      Debuggers, or IDEs, let you step through your code in slo-mo so you can see what is happening.

      1. Set a breakpoint - Click to the left of a line of code so a red dot appears. Run your program, and the IDE will execute to that line, then pause.
      2. Look at variables’ values - While the execution is paused you can hover over variables before that line to see their value.
      3. Step through the code - See what happens next in slo-mo.
        • Use “Step Into” to enter into a function and see what that code does.
        • Use “Step Over” to not go into a function and continue in the current spot after the function has done its business.
        • Use “Step Out” to exit a function and pick up the execution after it has run. Use this when you’re in too deep and the code stops making sense.
      4. See whats in the heap - The heap will list all the functions that you’re currently inside of. You can jump to any of those points by clicking them.
      5. Set a watch - Keep a variable in the watch so you can see what its value is at all times.
      6. Set a condition on the breakpoint - If the breakpoint is inside a big loop, you can right-click on the red dot to create a conditional breakpoint, so you write something like x===3 and it will only pause when x is 3.

      There are many other things an IDE can do to help you, so def look into it more if you want to save yourself a lot of insanity. But this is a good starting point.

      If you’re developing for the web use F12 to open web tools, and when an error happens, click the file/line number to see that point in the Sources tab, and you can debug there.