How to use VS Code to debug Next.js applications All In One

How to use VS Code to debug Next.js applications All In One

difficulty: Medium / 難度: 中等

debug your Next.js frontend and backend code

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: debug server-side",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev"
    },
    {
      "name": "Next.js: debug client-side",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000"
    },
    {
      "name": "Next.js: debug full stack",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev",
      "serverReadyAction": {
        "pattern": "- Local:.+(https?://.+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      }
    }
  ]
}

https://nextjs.org/docs/pages/building-your-application/configuring/debugging

1. Visual Studio Code

https://code.visualstudio.com/docs/editor/debugging

2. Chrome DevTools

https://developer.chrome.com/docs/devtools?hl=zh-cn

demos

(🐞 反爬蟲測試！打擊盜版⚠️）如果你看到這個資訊, 說明這是一篇剽竊的文章，請訪問 https://www.cnblogs.com/xgqfrms/ 檢視原創文章！

js guard clause

const nToS = (number) => {
  // guard clause 保護條款 / 守衛條款
  if(!Number.isInteger(number)) return;
  return `${number >= 0 ? number : `(${Math.abs(number)})`}`;
}

console.log(nToS())
console.log(nToS(undefined))
console.log(nToS(null))
console.log(nToS(7))
console.log(nToS(-7))

// undefined
// undefined
// undefined
// 7
// (7)

https://youtu.be/g2nMKzhkvxw?si=lyuL44Y2GKwwZwqC&t=474

const nToS = (number) => {
  // guard clause 保護條款 / 守衛條款
  if(number === null) return;
  return `${number >= 0 ? number : `(${Math.abs(number)})`}`;
}

/* 

undefined == null
true
undefined === null
false

*/

/* 

isNaN(undefined)
true
isNaN(null)
false
isNaN(false)
false
isNaN(-5)
false
isNaN({})
true
isNaN([])
false

*/


/* 

Number.isInteger(-5)
true
Number.isInteger(5)
true
Number.isInteger(null)
false
Number.isInteger(undefined)
false

*/

refs

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 釋出文章使用：只允許註冊使用者才可以訪問！

原創文章，版權所有©️xgqfrms, 禁止轉載 🈲️，侵權必究⚠️！

---