Отладка реагирует JSX в vscode

Question

Я создаю приложение реагирования, и мне нужно увидеть 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 }.

Вот что я вижу в окне Watch:

спасибо.

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
}

Просто добавьте отладчик и откройте консоль.