Js active timer debugging code#
Use -inspect-brk to pause your app immediately after starting, giving you the opportunity to debug code that executes at launch, and set new breakpoints before executing. First add a debugger statement somewhere in your code, then: The built-in debugger is probably the easiest to launch. The Next.js server is fundamentally a Node.js process, so it can be debugged like any other Node.js process. getServerSideProps, getStaticProps, and getStaticPaths. Some of this code is executed only on the server, so it's not possible to debug it in the browser at all, e.g. By default, the app is rendered on the server before being sent to the browser. The browser is only half the story with Next.js apps. Then it becomes clear that webpack renamed the module at run time: In Chromium-based browsers, go to your DevTools settings and uncheck "Enable JavaScript source maps": Luckily, you can disable source maps to view the compiled code that's actually executing. For example, you want to run util.inspect, but util is not defined as a run-time name:
Next.js has source maps enabled by default in dev mode, so you'll see your uncompiled source code, and you can navigate to a specific source file in the sidebar, or by using the "Go to source" shortcut: Cmd+P on Chrome for macOS.īut sometimes you're debugging an issue with your compiled code, and the source code doesn't give you enough information to understand what's going on. Go to the "Sources" tab, then click on a line number to set a breakpoint:įrom here, you can execute code in the JS console, navigate the call stack, and step through your code. To debug your Next.js app in the browser, simply: You're not sure which values or functions you want to inspect prior to starting your app.You want to know how a function is being called, by looking up and down the call stack.You have complex control flow and/or many variables, which makes it cumbersome to add console statements everywhere.It's often more effective to use a step-through debugger to pause and inspect your code as it executes. More advanced console functions are also available, such as console.table for tabular output, or console.error to output to stderr instead of stdout.Ĭheck stdout of your next dev process for server logs, and check your browser's JS console for client logs: The 'util' lib even works in the browser, thanks to built-in polyfills. Using JSON.stringify or require('util').inspect can be useful to control the format of your logged values, for enhanced readability. Enter fullscreen mode Exit fullscreen mode
0 kommentar(er)
