使代码仅在调试期间运行的最佳实践

Question

我使用 VSCode 学习 Reactjs，但我找不到任何关于此的信息，但我希望拥有component 在发布构建期间不会运行的代码。

我有这个组件：

import React from 'react';
import { connect } from 'react-redux';
import { Navbar, Nav, Form, FormControl, Button, Container, Col } from 'react-bootstrap';
import '../../styles/navbar.scss';

class NavBar extends React.Component {
    constructor() {
        super();
        this.state = { showMenu: false, height: 0, width: 0 };
        this.handleMenuClick = this.handleMenuClick.bind(this);
        this.window = React.createRef();
        window.addEventListener('resize', this.update);
    }

    componentDidMount() {
        this.update();
    }

    update = () => {
        this.setState({
            height: window.innerHeight,
            width: window.innerWidth,
        });
    };

    handleMenuClick() {
        const { showMenu } = this.state;
        this.setState({ showMenu: !showMenu });
    }

    render() {
        const { toggle } = this.props;
        const { visible } = this.props;
        return (
            <div>
                <>
                    <Navbar
                        expand="false"
                        bg="dark"
                        variant="dark"
                        fixed="top"
                        collapseOnSelect
                        className={`navbar ${!visible ? 'navbar--hidden' : ''} d-flex justify-content-between align-items-center`}
                    >
                        <div
                            style={{
                                position: 'absolute',
                                top: 0,
                                left: 0,
                                right: 0,
                                bottom: 0,
                                alignItems: 'center',
                            }}
                        >
                            <p>(1200px-)</p>
                            <p>H: {this.state.height}</p>
                            <p>W: {this.state.width}</p>
                        </div>
                        <Form inline className="flex-nowrap">
                            <Navbar.Brand href="#home" className="img-container">
                                <img alt="" className="logo" />
                            </Navbar.Brand>
                            <FormControl type="text" placeholder="Search Title, Events or Dates" className="mr-sm-2" />
                            <Button variant="primary" size="huge" href="#articles">
                                Articles
                            </Button>
                            <Button variant="primary" size="huge" href="#timeline">
                                Timeline
                            </Button>
                            <Button variant="primary" size="huge" href="#aboutMe">
                                About
                            </Button>
                            <Navbar.Toggle className="toggle-button" aria-controls="responsive-navbar-nav" onClick={toggle} />
                        </Form>
                    </Navbar>
                </>{' '}
            </div>
        );
    }
}

const mapStateToProps = state => {
    return { articles: state.rootReducer.remoteArticles };
};

const Aaa = connect(mapStateToProps, null)(NavBar);
export default Aaa;

在代码中你会看到这样的内容：

<div
    style={{
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        alignItems: 'center',
    }}
>
    <p>(1200px-)</p>
    <p>H: {this.state.height}</p>
    <p>W: {this.state.width}</p>
</div>

我只需要在调试运行期间运行它，这样我就可以实时看到屏幕尺寸。

是否有一些最佳实践如何做到这一点？