Site Specific Devtools Reactjs

Recently I've been working on a web-based tool for finding suitable products based on answers from a 4 step questionnaire. It's built with ReactJs using create-react-app. Once I had coded it up, I found I was wasting a lot of time clicking through the steps to get to the product page, just to check a simple change. This is when I realised I could skip all the steps by updating the component state with a default set of answer IDs, and serve up a product page instantly.

Below, I'll show you a couple of ideas I had for this 'site-specific dev tools' and how you can use it in your Reactjs projects, to make some of the repetitive tasks faster.

Config.js

First of all, your site-specific dev tools should be available only while developing. We use environment variables to determine if the site is local or on a public facing server by adding these lines to a config.js file in your src folder:

const config = {
    isDev: process.env.NODE_ENV !== 'production',
}

module.exports = config

Import these variables into your application like so:

import config from './config'

and you now have access to a boolean value using config.isDev which is true when viewing the site on localhost. Now comes the fun part..

dev-tools.js

Create dev-tools.js in your src folder and create a simple functional component:

import React from 'react';

import './dev-tools.sass'

function DevTools(props) {
    return (
            <div className="dev-tools">
                <div className="dev-tools__title">DEVTOOLS</div>
            </div>
    );
}

export default DevTools;

and import that inside app.js: import DevTools from './dev-tools'.

If you want a nice looking dev tools bar, add some styling like so:

.dev-tools
    background: #000
    color: #fff
    width: 100%
    padding: 20px
    height: 50px
    box-sizing: border-box
    width: 100%
    display: flex
    align-items: center

    &__title
        margin-right: 20px

Now you have dev tools set up for your individual project! The next step is setting up some options and helpers to speed things up.

Start adding your helpers

I added three helpers to my toolbar for this project:

• A button which updated the state to serve the product page
• A button to reset the state to take me back to the beginning
• A list of IDs for each step to see what options had been selected

Enable dev tools in production

Of course the dev tools shouldn't be available in production, but sometimes you'll get some QA feedback of something weird happening and you'll want to have quick access to these tools to see what's going on.

All you need to do is check the URL for a query string we can toggle the tools:

const urlParams = new URLSearchParams(window.location.search)
const devTools = urlParams.get('dev-tools')
console.log(devTools) // true when `?dev-tools=true` is in the URL

Wrapping up

Now you know how to build dev tools on the frontend of the site, your options for testing, debugging and saving time are limitless. If you have ideas for more things you can do with personalised dev tools, let me know!