【React】Debugging for Next.JS
<p><strong>1.Create a file named <code>.vscode/launch.json</code></strong></p><div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">{
</span>"version": "0.2.0"<span style="color: rgba(0, 0, 0, 1)">,
</span>"configurations"<span style="color: rgba(0, 0, 0, 1)">: [
{
</span>"name": "Next.js: debug server-side"<span style="color: rgba(0, 0, 0, 1)">,
</span>"type": "node-terminal"<span style="color: rgba(0, 0, 0, 1)">,
</span>"request": "launch"<span style="color: rgba(0, 0, 0, 1)">,
</span>"command": "npm run dev"<span style="color: rgba(0, 0, 0, 1)">
},
{
</span>"name": "Next.js: debug client-side"<span style="color: rgba(0, 0, 0, 1)">,
</span>"type": "chrome"<span style="color: rgba(0, 0, 0, 1)">,
</span>"request": "launch"<span style="color: rgba(0, 0, 0, 1)">,
</span>"url": "http://localhost:3000"<span style="color: rgba(0, 0, 0, 1)">
},
{
</span>"name": "Next.js: debug client-side (Firefox)"<span style="color: rgba(0, 0, 0, 1)">,
</span>"type": "firefox"<span style="color: rgba(0, 0, 0, 1)">,
</span>"request": "launch"<span style="color: rgba(0, 0, 0, 1)">,
</span>"url": "http://localhost:3000"<span style="color: rgba(0, 0, 0, 1)">,
</span>"reAttach": <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
</span>"pathMappings"<span style="color: rgba(0, 0, 0, 1)">: [
{
</span>"url": "webpack://_N_E"<span style="color: rgba(0, 0, 0, 1)">,
</span>"path": "${workspaceFolder}"<span style="color: rgba(0, 0, 0, 1)">
}
]
},
{
</span>"name": "Next.js: debug full stack"<span style="color: rgba(0, 0, 0, 1)">,
</span>"type": "node"<span style="color: rgba(0, 0, 0, 1)">,
</span>"request": "launch"<span style="color: rgba(0, 0, 0, 1)">,
</span>"program": "${workspaceFolder}/node_modules/.bin/next"<span style="color: rgba(0, 0, 0, 1)">,
</span>"runtimeArgs": ["--inspect"<span style="color: rgba(0, 0, 0, 1)">],
</span>"skipFiles": ["<node_internals>/**"<span style="color: rgba(0, 0, 0, 1)">],
</span>"serverReadyAction"<span style="color: rgba(0, 0, 0, 1)">: {
</span>"action": "debugWithEdge"<span style="color: rgba(0, 0, 0, 1)">,
</span>"killOnServerStop": <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
</span>"pattern": "- Local:.+(https?://.+)"<span style="color: rgba(0, 0, 0, 1)">,
</span>"uriFormat": "%s"<span style="color: rgba(0, 0, 0, 1)">,
</span>"webRoot": "${workspaceFolder}"<span style="color: rgba(0, 0, 0, 1)">
}
}
]
}</span></pre>
</div>
<p> </p>
<p><strong>2.Terminal</strong></p>
<div class="cnblogs_code">
<pre>yarn add win-node-<span style="color: rgba(0, 0, 255, 1)">env</span></pre>
</div>
<p> </p>
<p><strong>3.Terminal</strong></p>
<div class="cnblogs_code">
<pre>set NODE_OPTIONS=--inspect</pre>
</div>
<p> </p>
<p><strong>4.update the dev script on your package.json:</strong></p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">{
</span>"scripts"<span style="color: rgba(0, 0, 0, 1)">: {
</span>"dev": "NODE_OPTIONS='--inspect' next dev"<span style="color: rgba(0, 0, 0, 1)">
}
}</span></pre>
</div>
<p> </p>
<p>5.Open a new tab and visit chrome://inspect<br>6.Click inspect to open a separate DevTools window.<br><br>Configuring: Debugging | Next.js</p>
</div>
<div id="MySignature" role="contentinfo">
<br /><p><table><tr><td><img style="border-top-width: 0pt; border-left-width: 0pt; border-bottom-width: 0pt; border-right-width: 0pt" alt="Creative Commons License" src="http://i.creativecommons.org/l/by-nc/2.5/cn/88x31.png" /> </td><td>本作品采用 知识共享署名-非商业性使用 2.5 中国大陆许可协议进行许可。 </td></p><br><br>
来源：https://www.cnblogs.com/sekihin/p/18558619
頁:
[1]