为什么断点在nextjs类中永远不起作用？

问题描述

我遵循了文档https://nextjs.org/docs/advanced-features/debugging

中的nextjs调试指南

断点可以与功能组件一起工作，但绝不能在类内部工作。例如在这段代码中

import React from 'react'

class Index extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            number: 1
        }
        this.handeClick = this.handeClick.bind(this)
    }

    handeClick() {
        // breakpoint here
         debugger;
        this.setState({number: this.state.number + 1})
    }

    render() {
        return(
            <div>
                <button onClick={this.handeClick}>{'Click me!' + this.state.number}</button>
                <Test></Test>
            </div>
        )  
    }
    
}

export default Index

根本不会触发断点，为什么？我很抱歉是否已经有人问过

解决方法

您首先在节点服务器上完成绘制。因此您需要传递--inspect标志来调试应用程序。请参考：nextjs debugging，nodejs debugging

好吧，我很傻，vscode仅断点是服务器端节点断点，而不是客户端，因为我需要使用Firefox！

breakpoints debugging