调试vscode中的JSX

Question

我正在创建一个React应用，我需要在特定位置查看JSX，所以我开始使用VSCode进行调试，我的代码如下：

 render(): JSX.Element {
        let result =  (
            <div className="footerComponent">
                <DefaultButton className={commonStyles.defaultButton} onClick= {() => this.props.saveAllSettings()} >Save Changes</DefaultButton>
                <DefaultButton className="" onClick = {() => this.setState({ dialogOpened: true})}>Discard Changes</DefaultButton>
                { this.state.dialogOpened && this.props.discardChangesDialog }
            </div>
        )
        return result
    }

我在以下行上设置了一个断点：return result，并在vscode的调试控制台中记录了该值，但这显示了这一点：

Object {$$typeof: Symbol(react.element), type: "div", key: null, ref: null, props: Object, …}

如何查看确切的JSX？基本上，我想知道表达式{ this.state.dialogOpened && this.props.discardChangesDialog }返回什么。

这是我在“监视”窗口中看到的内容：

谢谢。

Answer 1

render(): JSX.Element {
debugger;
this.state.dialogOpened;
this.props.discardChangesDialog
let result =  (
    <div className="footerComponent">
        <DefaultButton className={commonStyles.defaultButton} onClick= {() => this.props.saveAllSettings()} >Save Changes</DefaultButton>
        <DefaultButton className="" onClick = {() => this.setState({ dialogOpened: true})}>Discard Changes</DefaultButton>
        { this.state.dialogOpened && this.props.discardChangesDialog }
    </div>
)
return result
}

只需添加一个调试器，然后打开控制台即可。