Hello, I’m Shanyue

Writing code in Javascript, whether in a Node backend environment or a front-end single-page application, debugging is a step up for experienced programmers!

The only way a programmer can be prompted horizontally is to debug code for fun. Said yamayuki, a non-famous non-guru.

How to Debug

  • Resume: Executes to the next breakpoint
  • Step Over: Executes the next statement
  • Step Into: Executes the next statement, and if a function is encountered, enters function execution
  • Step Out: Jumps out of the current function

Elements of the above four points, like the five pieces of backgammon, simple rules but much evolution.

Many of the following questions, or debugging tips, can improve your debugging skills regardless of your debugging environment, whether you’re debugging in a browser or VS Code.

All of the following code is visible on my Github: shfshanyue/node-examples

Return Value

How do I get the return value of a function through debugging

When a function returns an expression, how do I get the return value from the current function in debug

Instead of getting a and b and adding them, how do you debug the sum function to get 7, as in the following example

const expansiveCompute = (a, b) = > a + b

function sum (a, b) {
  // How to get the result 7 in debugging
  return expansiveCompute(a, b)
}

sum(3.4)
Copy the code

Solution: Hit the breakpoint into the return statement, execute to the line, and Step Over again to get the return value in the variables panel of the debugging function.

Step Over

When multiple function expressions are called on a single line,Step OverSkip a line or an expression?

// Where does Step Over enter when this line has a breakpoint
const l = [1.2.3.4.5].map(x= > sum(x, 1)).filter(x= > x > 3)

const n = sum(sum(3.4), 1)
Copy the code

Solution: Skip the entire line when using Step Over. When normal code needs to be debugged, you can use Step Into to debug it expression by expression or in two lines, as shown in the next example.

Multilevel nesting and inline breakpoints

When we debug at an interrupt point on a line, we essentially break at the first breakpoint on that line. Yes, a line of code actually has multiple breakpoints, as shown in the red dot below.

How do I debug a particular function when multiple function expressions are called in a single line

(Not through the method of specifying the starting point of the function, because sometimes the specified function position is not known)

// How to enter the '.filter 'function for debugging
const l = [1.2.3.4.5].map(x= > sum(x, 1)).filter(x= > x > 3)

// How to enter the sub function for debugging
const n = sub(sum(2, sum(3.4)), 1)
Copy the code

Solution: You can use inline breakpoints at this point to make the break point at the correct location. However, convenient debugging, or more expression is more convenient.

How do I set conditional breakpoints when I call multiple function expressions on a single line

// How to break points when x === 3 in map function
const l = [1.2.3.4.5].map(x= > sum(x, 1))
Copy the code

Solution: Right click to edit breakpoints.

Promise/Async

Debugging for Promises is a bit different in Node than in the browser, where it is much easier because of async_hooks, which often get bogged down in irrelevant system source code.

How to get intopromise.thenDebug in function?

Promise.resolve(3).then(o= > {
  // How to StepOver/StepInto the current line to debug
  console.log(o)
})

console.log('hello, world')
Copy the code

Solution: Just cut to the point.

How to jump intoawaitDebug in the function of?

const sleep = (seconds) = > {
  // How to debug from await sleep(2000) to here
  console.log('DEBUG TO HERE')
  return new Promise(resolve= > setTimeout(resolve, seconds))
}

await sleep(2000)
Copy the code

The followingsumFunctions andasyncSumfunctionStep IntoAre the steps consistent?

function sum (a, b) {
  return a + b
}

async function asyncSum (a, b) {
  return a + b
}

async function main () {
  const r1 = await sum(3.4)
  const r2 = await asyncSum(3.4)}Copy the code

Solution: This is the same in the browser, but in Node you will get async_hooks internal code that can step out multiple times.

Error

When an exception occurs, how to directly break to the exception location debugging

This is probably the most effective way to debug a Bug.

Solution: In the left BreakPoints panel, check Uncaught Exceptions.

conclusion

I’ve covered a lot of basics and examples of Javascript debugging today, but future articles on debugging will cover two things

  1. What are some tips for debugging source code in React/Vue?
  2. How to debug in Node/VSCode?
  3. How to better debug Node/C++ cross-language code?

Finally, post all the code. You can also find it on my Github.

See code shfshanyue/node – examples

// Example 1: Return Value
{
  const expansiveCompute = (a, b) = > a + b

  function sum(a, b) {
    // How to get the result 7 in debugging
    return expansiveCompute(a, b)
  }

  sum(3.4)}// Example 2: Step Over
{
  const sum = (a, b) = > a + b

  // When there is a breakpoint on a change line, is the next Step of Step Over to skip a line or an expression?
  const l = [1.2.3.4.5].map(x= > sum(x, 1)).filter(x= > x > 3)

  // Same with this line
  const n = sum(sum(3.4), 1)}// Example 3: Step Into
{
  const sub = (x, y) = > x - y

  // How to enter the '.filter 'function for debugging
  const l = [1.2.3.4.5].map(x= > sum(x, 1)).filter(x= > x > 3)

  // How to enter the sub function for debugging
  const n = sub(sum(2, sum(3.4)), 1)}// Example 4: conditional breakpoints
{
  // How to break points when x === 3 in map function
  const l = [1.2.3.4.5].map(x= > sum(x, 1))}// Example 5: Promise
{
  Promise.resolve(3).then(o= > {
    // How to StepOver/StepInto the current line to debug
    console.log(o)
  })
  
  console.log('hello, world')}// Example 6: Promise
{
  async function main() {
    const sleep = (seconds) = > {
      // How to debug from await sleep(2000) to here
      console.log('DEBUG TO HERE')
      return new Promise(resolve= > setTimeout(resolve, seconds))
    }
    
    await sleep(2000)
  }

  main()
}

// Example 7: async/await
{
  function sum (a, b) {
    return a + b
  }

  async function asyncSum (a, b) {
    return a + b
  }

  async function main () {
    // What is the difference between the following two lines of breakpoint debugging
    const r1 = await sum(3.4)
    const r2 = await asyncSum(3.4)
  }

  main()
}

// Example 8: How can I quickly find problematic code
{
  const obj = null

  // There is a problem, how to catch it
  console.log(obj.a)
}
Copy the code