How to use VS Code to debug Next.js applications All In One
<h1 id="how-to-use-vs-code-to-debug-nextjs-applications-all-in-one">How to use VS Code to debug Next.js applications All In One</h1><blockquote>
<p>difficulty: <code>Medium</code> / 难度: <code>中等</code></p>
</blockquote>
<h2 id="debug-your-nextjs-frontend-and-backend-code"><code>debug</code> your <code>Next.js</code> frontend and backend code</h2>
<blockquote>
<p><code>.vscode/launch.json</code></p>
</blockquote>
<pre><code class="language-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"
}
}
]
}
</code></pre>
<p><img src="https://img2024.cnblogs.com/blog/740516/202407/740516-20240725010753795-1203546811.png" alt="image" loading="lazy"></p>
<p>https://nextjs.org/docs/pages/building-your-application/configuring/debugging</p>
<ol>
<li>Visual Studio Code</li>
</ol>
<p><img src="https://img2024.cnblogs.com/blog/740516/202407/740516-20240725010455793-1566239062.png" alt="image" loading="lazy"></p>
<p>https://code.visualstudio.com/docs/editor/debugging</p>
<ol start="2">
<li>Chrome <code>DevTools</code></li>
</ol>
<p><img src="https://img2024.cnblogs.com/blog/740516/202407/740516-20240725010538826-1195831143.png" alt="image" loading="lazy"></p>
<p>https://developer.chrome.com/docs/devtools?hl=zh-cn</p>
<h2 id="demos">demos</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/l8knG0BPr-o?si=Vx62JJRBe1nEXoq1&start=327" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen=""></iframe>
<h2 id="--反爬虫测试打击盗版️如果你看到这个信息-说明这是一篇剽窃的文章请访问-httpswwwcnblogscomxgqfrms-查看原创文章"><div id="anti-crawler" style="color: rgba(255, 0, 0, 1)"> (🐞 反爬虫测试！打击盗版⚠️）如果你看到这个信息, 说明这是一篇剽窃的文章，请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章！</div></h2>
<h2 id="js-guard-clause">js <code>guard clause</code></h2>
<pre><code class="language-js">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)
</code></pre>
<p>https://youtu.be/g2nMKzhkvxw?si=lyuL44Y2GKwwZwqC&t=474</p>
<pre><code class="language-js">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
*/
</code></pre>
<h2 id="refs">refs</h2>
<hr>
<div>
</div>
<hr>
<blockquote style="display: flex; flex-flow: column; align-items: center; justify-content: center; text-align: center; border: none">
<h3><strong><span style="font-size: 16pt; color: rgba(0, 255, 0, 1)">©xgqfrms 2012-<span data-uid="copyright-aside">2021</span></span></strong>
<p><span style="font-size: 18pt; color: rgba(0, 255, 0, 1)"><strong>www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！</strong></span></p>
<p><span style="font-size: 18pt; color: rgba(0, 255, 0, 1)"><strong>原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！</strong></span></p>
</h3></blockquote>
<hr>
</div>
<div id="MySignature" role="contentinfo">
<div style="display: flex; flex-flow: column nowrap; align-items: center; justify-content: center;">
<p>本文首发于博客园，作者：xgqfrms，原文链接：https://www.cnblogs.com/xgqfrms/p/18322101</p>
<p style="color: red; font-size: 23px; margin-top: 5px; margin-botom: 5px;">未经授权禁止转载，违者必究！</P>
</div>
<hr/><br><br>
来源：https://www.cnblogs.com/xgqfrms/p/18322101
頁:
[1]