March 28, 2020
Nood tidbits are a series of short posts that cover a range of things that I've discovered in my first few years of engineering that have been game changers for me. Each tidbit it something that I wish I wish I had known about when I first entered this industry.
Even if you're pretty new to programming, you've most likely played around with Chrome DevTools. I know that I was introduced to them pretty early on, however, after playing around with a bunch of the features, I quickly settled on the ones the ones that gave me the most value at that time. Of course, by not going back and re-exploring the features that were on offer, I missed out on a really cool feature: Google snippets.
You'll find Snippets in the options listed to the left after clicking on the Sources tab. If you can't see it you might need to click on the >> to open the dropdown.
Snippets are really handy for anyone who finds themselves running the same code in the console all the time. This wasn't a huge selling point for me but they became one of my most frequently used Chrome DevTool features the day I realized I could use them to dispatch Redux actions by running
window.store.dispatch and passing in the action I was I trying to test along with its payload.Prior to this discovery, if I'd been working on state management for a feature while somewhere was working on the UI, I didn't have a good way to test that my implementation was working effectively. When I reached the point where I wanted to test that a user action would fire the right action, be handled by the correct saga, and that state was then updated in the way I had hoped it would, I would take the clumsy solution of temporarily adding a random button somewhere in the app. This button would allow me to kick of the Redux side of things so I could make sure everything was working correctly.
Now, with Google snippets, all I need to do is click '+ New snippet', give my file a name with the JavaScript extension, and then dispatch my action on the window and hit play in the bottom right.
This has been an absolute lifesaver for me because, even after features have been implemented, when I need to test various parts of the app, I no longer have to manually type anything into the UI. I simply have multiple snippet files saved for different actions that I can fire one after the other, with minimal effort on my part.
...