调试vscode中的JSX

Question

I am creating a react app, and I need to see JSX at a specific point, so I started debugging using VSCode, I have my code like this:

 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
    }

I set a break point on the line : return result and I log the value in the debugging console of vscode, but it's showing this:

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

How do I view the exact JSX? Basically, I want to know what the expression { this.state.dialogOpened && this.props.discardChangesDialog } returns.

Here's what I see in the Watch window:

thanks.

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
}

Just add a debugger, and open the console.