• Date

  • By

    • Nicky Meuleman
  • Tagged

    • Howto
    • DX
  • Part of series

    • 1. Setting up a fresh development environment, part 1
    • 2. Setting up a fresh development environment, part 2
    • 3. Setting up a fresh development environment, part 3
  • Older post

    Setting up a fresh development environment, part 2

  • Newer post

    Reviving my laptop

Table of contents
  1. Useful browser extensions for (web)dev
    1. React Developer Tools
    2. Redux Developer Tools
    3. Apollo Client Devtools
    4. aXe
    5. Refined Github
    6. Wappalyzer
    7. JSON Formatter
  2. Other setup not directly related to dev
    1. f.lux
    2. ShareX
    3. KeePass
    4. Reddit Enhancement Suite
    5. HWiNFO64

Setting up a fresh development environment, part 3

Setting up a fresh development environment, part 3

This is part 3, please also check out part 1 and part 2

Useful browser extensions for (web)dev

Most of the time I spend sitting behind a computer is dominated by 2 applications, the code editor and the browser. The browser I use for development is often Chrome (canary), so this list will be entirely filled by chrome-extensions

React Developer Tools

A must-have for anyone coding in React. React Dev Tools allow you to select a component like an HTML-tag. You can view/manipulate it’s props or state.

More info

Redux Developer Tools

What the React Dev Tools are to React, the Redux Dev Tools are to Redux. You will be able to see the store, the actions and even dispatch actions.

More info

Apollo Client Devtools

Continuing in the same direction, the Apollo Client Devtools supplies you with lots of Apollo-GraphQL goodies, including the awesome GraphiQL

More info


Checking for accessibility issues is made easier by the aXe extension. Tip: use alongside the Chrome Lighthouse accessibility check.

More info

Refined Github

I love Github, that doesn’t mean it can’t be better. Refined Github does that. It adds to and tweaks the default Github-site, making your experience/workflow smoother.

More info


Wondering what technology was used to make an awesome site you are on? Wappylyzer attempts to answer that question.

More info

JSON Formatter

Often times the data you are working with is presented in the JSON format. Without formatting, finding what you are looking for in a large JSON-object feels like looking for a needle in a haystack. JSON Formatter displays JSON in a very readable way. It is now much easier to get to MRData.RaceTable.Races[0].QualifyingResults[0] in that giant object the Ergast F1 API gave me to see my boy Danny Ric crushed qualifying in Monaco.

More info

Over the course of 3 posts I told you what I did to setup my dev environment the way I like. I didn’t tell you everything. Here are some programs I use that aren’t directly related to programming.


I’m a night owl, f.lux helps me reduce the eyestrain from looking at a monitor at night. F.lux adapts your display to the time of day, warming the colors at night. The yellow color on your screen at night might seem a bit hash at first. Give it a fair shot, it’s fantastic.


A great tools for taking screenshots. No matter if you onoly want to capture an area, your whole screen or the entire webpage, ShareX can handle it. You can configure the tool to automatically upload your screenshot to a multitude of online services. It’s also a handy tool to make small video’s/gifs, has an eyedropper-tool, can check MD5/SHA/… hashes, and much more (I think the developer made this for himself, adding features he could use and the users of this piece of software benefit from it!)


An excellent open source password manager.

Reddit Enhancement Suite

A browser extension that makes changes and additions the reddit site. I didn’t add it to the browser-extension list because it’s not really webdev related. It can be. Here are some subreddits you can follow: r/webdev, r/reactjs, r/frontend, r/javascript


Do you like to keep an eye on your CPU-temperature at all times? I do and HWiNFO can also show me whatever other hardware information I would like to know about this machine.

Series navigation for: Fresh environment, 2018

1. Setting up a fresh development environment, part 1

Designed and developed by Nicky Meuleman

Built with Gatsby. Hosted on Netlify.