If you are new to building websites, writing, code or just React JS you will need to know how to debug your code. This post shows you the basics on how to debug JavaScript using the Chrome Developer Tools.
Open VS Code (or your editor of choice) and run your code – npm start – so that you have your website running and ready to debug. I use Chrome for all of my development and debugging, and mostly work on a PC, so I’ll focus on that browser only. Once you are in Chrome, press Ctrl + Shift + I (PC) or Option + Shift + I (Mac). To be more precise, hold down the Ctrl key, and at the same time hold down the Shift key, and at the same time hold down the I key (I for India). You’ll see the Chrome Developer Tools open open up in your browser, either next to your website, or below it, depending on your browser settings. Here’s what mine looks like, with the dev tools show to the right hand side:
Whilst I am focused on how to debug React in Chrome in this blog post, all of the debug techniques described here can be used to learn how to debug for any Javascript based website. The website shown in all of the images are from my Using Bootstrap with React Forms post.
What to use the Chrome dev tools for
Most of the time I use the Chrome dev tools to :
Inspect elements in the browser using the Chrome element inspector
Instantly switch css styles on and off
View debug messages in the console
Put breakpoints in the JavaScript to help me develop and debug
Find any JavaScript errors
Inspect elements in the browser using the Chrome Element Inspector
With the dev tools open, click the Elements tab at the top of the Dev Tools area, then click the icon which is top left that shows an arrow in a square – once this has been clicked you can move your mouse over your website and clicking on an element will allow you to inspect it, rather than interact with it. You’ll see the relevant markup highlighted in the html, and you’ll see the appropriate css shown also. I often use this to switch style properties on and off from css classes to check the styling of an element. This short screen recording shows me using the developer tools to do just that.
Using debug messages in the Chrome debug console
Another way to debug React Js in Chrome is to use console log messages in your JavaScript to see a message in the console window in Chrome Developer Tools. This is a quick and dirty way to see what’s happening in what order, or to see how a value changes through your code.
How to debug JavaScript in Chrome using breakpoints
Breakpoints provide a similar benefit to using console messages but are more useful, because whenever a breakpoint has been hit, you can view the Scope at that moment. By Scope, you can see the value of any variable that is ‘in scope’ at that point.
Chrome have a really useful tutorial about the Chrome dev tools too which I’d recommend reading.
Debug a React Native App
If you are working in react Native, rather than React JS, then you’ll want some debug information specific to that, as it is slightly different.
Bootstrap is a front end open-source toolkit which makes it really easy to build responsive UIs quickly. With comprehensive documentation and a library of examples it’s a wise choice if you want to build a React app with a tidy front end quickly. In this post I’ll show you how to use Bootstrap in a React app, and specifically how to build and style a form.
You’ll already need to have Node and npm installed on your machine (read this blog post if you need help installing and running node js). To build an app that has a working form in it using React and Bootstrap, follow these steps.
Navigate to where you want your code to be located in your folder structure using your preferred command line tool, and create your React app in the normal way (I’m presuming that you already have a basic understanding of creating and editing a React app). I’ll call my project ‘react-bootstrap-forms’.
npx create-react-app react-bootstrap-forms
Install the React Bootstrap package in your React app
The best way to use Bootstrap in a React app is to use the npm package React Bootstrap. On the command line type:
npm install react-bootstrap bootstrap
Then type npm start and make sure the app runs ok in the browser – you should see the default React app template screen.
Start editing the React code
Now open App.js and replace the contents of the whole file with this code:
import React, { useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Button from "react-bootstrap/Button";
import "./App.css";
function App() {
const [message, setMessage] = useState("");
return (
<div className="App">
<header className="App-header">
<p>
React Bootstrap <code>Form Examples</code>.
</p>
</header>
<p>We will build a form here....</p>
<Button onClick={() => setMessage("You clicked the button")}>
Click Me
</Button>
<p>{message}</p>
</div>
);
}
export default App;
And open App.css, find .App-header and change the min-height value from 100vh to 20vh.
Now on your command line, run your app:
npm start
… and you should see this:
Try clicking the button
… after you click the button you’ll see a message appear. So this is using a Bootstrap button, along with some of the basic styles that are set up with the React app. You can do away with those (App.css) altogether if you want, or use them side by side.
Add more Bootstrap components to the form
Adding a few more Bootstrap elements into the mix (Container and Jumbotron) and you can see we start to build up a nicely styled form, with a couple of Text Inputs and some layout detail using Rows and Columns. You can find all the information you need about them here.
Now replace the contents of App.js with this code:
import React, { useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Button from "react-bootstrap/Button";
import Jumbotron from "react-bootstrap/Jumbotron";
import Form from "react-bootstrap/Form";
import Alert from "react-bootstrap/Alert";
import "./App.css";
function App() {
const [showMessage, setShowMessage] = useState(false);
return (
<div className="App">
<header className="App-header">
<p>
React Bootstrap <code>Form Example</code>.
</p>
</header>
<Container className="p-3">
<Container>
<Row>
<Col>
<Alert show={showMessage} variant="success">
<Alert.Heading>Success</Alert.Heading>
<p>
This is an alert, and these can be shown in a variety of
styles provided by Bootstrap. Our form submit button simply
shows this alert. Another post will go through form validation
and errors.
</p>
<hr />
<div className="d-flex justify-content-end">
<Button
onClick={() => setShowMessage(false)}
variant="outline-success"
>
Close this alert
</Button>
</div>
</Alert>
</Col>
</Row>
<Row>
<Col>
<Jumbotron>
<h1 className="header">Our form</h1>
<p>
We will build a form here. You may want to use this as
login instructions, or some kind of product intro.
</p>
<p>
This is an h1 tag and paragraph in a Jumbotron, which is the
first column in a row of two columns.
</p>
<p>
Here is a selection of buttons showing some of the different
styles available from Bootstrap. You can
<a href="https://react-bootstrap.github.io/components/buttons/">
read more here
</a>
.
</p>
<hr />
<Button variant="outline-primary">Primary</Button>{" "}
<Button variant="outline-secondary">Secondary</Button>{" "}
<Button variant="outline-success">Success</Button>{" "}
<Button variant="danger">Danger</Button>{" "}
<Button variant="info">Info</Button>{" "}
</Jumbotron>
</Col>
<Col>
<Form>
<Form.Row>
<Form.Group as={Col} controlId="formGridEmail">
<Form.Label>Email</Form.Label>
<Form.Control type="email" placeholder="Enter email" />
</Form.Group>
<Form.Group as={Col} controlId="formGridPassword">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Password" />
</Form.Group>
</Form.Row>
<Form.Group controlId="formGridAddress1">
<Form.Label>Address</Form.Label>
<Form.Control placeholder="Street Name" />
</Form.Group>
<Form.Group controlId="formGridAddress2">
<Form.Label>Address 2</Form.Label>
<Form.Control placeholder="Apartment, studio, or floor" />
</Form.Group>
<Form.Row>
<Form.Group as={Col} controlId="formGridCity">
<Form.Label>City</Form.Label>
<Form.Control />
</Form.Group>
<Form.Group as={Col} controlId="formGridState">
<Form.Label>State</Form.Label>
<Form.Control as="select" defaultValue="Choose...">
<option>Choose...</option>
<option>...</option>
</Form.Control>
</Form.Group>
<Form.Group as={Col} controlId="formGridZip">
<Form.Label>Zip</Form.Label>
<Form.Control />
</Form.Group>
</Form.Row>
<Form.Group id="formGridCheckbox">
<Form.Check type="checkbox" label="Check me out" />
</Form.Group>
<Button
variant="primary"
size="lg"
onClick={() => setShowMessage(true)}
>
Submit
</Button>
</Form>
</Col>
</Row>
</Container>
</Container>
</div>
);
}
export default App;
As a result of those changes, when you save your file you should see this in your browser:
So you have built a form using React Bootstrap, including different styles of buttons, a text input, a dropdown menu, and an alert message that you can dismiss. I’ll cover how to handle the form submission and form errors in my next post.
