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
- Visual Studio Code
https://code.visualstudio.com/docs/editor/debugging
- Chrome
DevTools
https://developer.chrome.com/docs/devtools?hl=zh-cn
demos
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-2025
www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!
原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/18322101
未经授权禁止转载,违者必究!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
2023-07-25 URL.canParse API All In One
2022-07-25 Linux file system All In One
2022-07-25 开元路土魠鱼羹 bug All In One
2021-07-25 webpack Public Path All In One
2020-07-25 Chrome blocked third-party cookies
2020-07-25 JavaScript 中如何使用 setTimeout 模拟实现 setInterval All In One
2019-07-25 Service Workers