为什么断点永远不会在 nextjs 类中工作？答案

【问题标题】：Why are breakpoints never working in nextjs class?为什么断点永远不会在 nextjs 类中工作？
【发布时间】：2021-02-14 09:36:36
【问题描述】：

我已按照文档 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

断点根本不会被触发，知道为什么吗？对不起，如果之前已经问过这个问题

【问题讨论】：

标签： debugging next.js breakpoints

【解决方案1】：

您的第一次绘制是在节点服务器上完成的。所以你需要传递--inspect 标志来调试应用程序。参考：nextjs debugging,nodejs debugging

【讨论】：

我正在使用命令cross-env NODE_OPTIONS='--inspect' next dev
连接到 chrome 开发工具或 vs 代码调试器。您现在应该可以调试了。
断点仍然适用于功能组件
我的问题是断点不适用于类

【解决方案2】：

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

【讨论】：