Git Product home page Git Product logo

Comments (12)

santanuyogi avatar santanuyogi commented on June 29, 2024 8

I spent many hours searching for an answer to this because I was running into the same problem. I finally found the solution for my set up here.

Here’s what did the trick for me:

Create a file in the root of your frontend called next.config.js and put the following code:

module.exports = {
  webpack(config) {
    config.devtool = 'eval-source-map';
    return config;
  },
};

Now you should be able to set breakpoints on client side functions like onChange callbacks or onSubmit, etc.

For reference, my launch.json file...

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Next: Chrome",
      "url": "http://localhost:7777",
      "webRoot": "${workspaceFolder}"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Next: Node",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/next",
      "runtimeArgs": [
        "-p",
        "7777"
      ],
      "port": 5622,
      "env": {
        "NODE_OPTIONS": "--inspect=5622"
      }
    }
  ],
  "compounds": [
    {
      "name": "Next: Full",
      "configurations": [
        "Next: Node",
        "Next: Chrome"
      ]
    }
  ]
}

from vscode-recipes.

delingren avatar delingren commented on June 29, 2024 2

I'm having the same issue.

Versions of node, npm, and next:

$ node --version
v10.15.3
$ npm --version
6.9.0
$ npm list next
[email protected] /Users/delingren/scratchpad/next-exercise
└── [email protected]

I took a look at node_modules/.bin/next (it's just a js file without the extension), and it explicitly throws when passed --inspect:

if (args['--inspect'])
    throw new Error(`Use env variable NODE_OPTIONS instead: NODE_OPTIONS="--inspect" next ${command}`);

So I modified launch.json and the following works for me:

    {
      "type": "node",
      "request": "launch",
      "name": "Next: Node",
      "program": "${workspaceFolder}/node_modules/.bin/next",
      "runtimeArgs": ["--inspect"],
      "port": 9229,
      "console": "integratedTerminal"
    }

from vscode-recipes.

wiesys avatar wiesys commented on June 29, 2024 2

It works on backend, but no on frontend for me.

from vscode-recipes.

stoplion avatar stoplion commented on June 29, 2024 1

Is there any update to this? I'm not able to debug my app...

from vscode-recipes.

auchenberg avatar auchenberg commented on June 29, 2024

What version of Node and Next are you using @ahoyahoy? Looks like you are running node --inspect koa and not next

from vscode-recipes.

jjm340 avatar jjm340 commented on June 29, 2024

I have this same problem while using express and yes we have to run node server.js --inspect instead of next. I'm using node version 10.4.1 and next v6.0.3. I'm be happy to open a bug on next.js if that's where the problem lies.

from vscode-recipes.

auchenberg avatar auchenberg commented on June 29, 2024

We are tracking an issue with Next 6 here vercel/next.js#4571

from vscode-recipes.

fnpen avatar fnpen commented on June 29, 2024

I have same error with cross-env NODE_ENV=development nodemon --inspect server/server.js

from vscode-recipes.

myasul avatar myasul commented on June 29, 2024

Me too. It's working for Next: Node but not kicking in for Next: Chrome.
Please see my config below:

    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Next: Chrome",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "node",
            "request": "launch",
            "name": "Next: Node",
            "program": "${workspaceFolder}/src/server.js",
            "runtimeArgs": [
                "--inspect",
            ],
            "protocol": "inspector",
            "port": 9229,
            "console": "integratedTerminal",
            "autoAttachChildProcesses": true,
        },
        {
            "type": "node",
            "request": "attach",
            "name": "Attach",
            "port": 9229,
            "stopOnEntry": false,
            "restart": true
        }
    ],
    "compounds": [
        {
            "name": "Next: Full",
            "configurations": [
                "Next: Node",
                "Next: Chrome"
            ]
        }
    ]
}

from vscode-recipes.

vvo avatar vvo commented on June 29, 2024

Hey there, I created a PR on Next.js docs to have Next.js debugging working in either Chrome DevTools or VSCode, appreciate any feedback you have when trying it out on the PR: https://github.com/zeit/next.js/pull/10807/files?short_path=bfcc096#diff-bfcc096377efef455dd348d059704209

I choosed to only attach to the debugger from VSCode instead of trying to completely launch next from VSCode because in many occasions your Next.js application might be loaded by docker/overmind/foreman/heroku local... Let me know what you think!

from vscode-recipes.

Naxos84 avatar Naxos84 commented on June 29, 2024

Well I am using nextjs 9 and I was able to debug my app in vscode/chrome.

I installed the "Debugger for Chrome" extension.

I'm still struggeling to use Firefox cause "Debugger for Firefox" tells me that it can't find the files...

Launch.json

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "firefox",
            "request": "launch",
            "reAttach": true,
            "name": "Firefox",
            "url": "http://localhost/",
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "chrome",
            "request": "launch",
            "name": "Chrome",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "node",
            "request": "attach",
            "name": "Server",
            "port": 9229
        }
    ],
    "compounds": [
        {
            "name": "FullChrome",
            "configurations": ["Server", "Chrome"]
        },
        {
            "name": "FullFirefox",
            "configurations": ["Server", "Firefox"]
        }
    ]
}

I am starting my app with cross-env TS_NODE_PROJECT=tsconfig.server.json nodemon --exec node --inspect-brk -r ts-node/register server/index.ts

Maybe this helps someone and maybe someone knows how to do this for firefox.

from vscode-recipes.

connor4312 avatar connor4312 commented on June 29, 2024

The next.js recipe has been updated

from vscode-recipes.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.