Debug FreeCodeCamp Challenges Faster With This Bookmarklet
FreeCodeCamp is a fantastic non-profit platform for learning and improving your coding skills. They break things down into individual challenges that are covered by automatic tests. Clear the tests, pass the challenge. The one thing that used to bug me is that sometimes they don’t describe their test cases very well.
For simpler challenges, they are usually specific and useful:
pairwise([1, 4, 2, 3, 0, 5], 7)should return
Excellent test description right there! But for the more complex challenges, they can get pretty abstract:
removemethod should remove leaf nodes from the tree.”
If this test is failing and you don’t know why, it sure would be useful to see the testing data and the expected result. But you can’t access these anywhere inside the interface, so your debugging options are limited. You can look at the solution or give up and have a beer. I was already reaching for the bottle opener when I thought of the third, retrospectively super-obvious option:
“FreeCodeCamp must be open-source! I can dig up the test cases somewhere on GitHub!”
I also wanted to save myself the 5 seconds of digging through folder structure every time I want to debug a test. So I made a bookmarklet that opens the source code of the currently open challenge.
Make a bookmarklet
- Click “Add new bookmark” in your browser’s bookmark manager.
// Your code
Our script is very simple. We need to:
- Read the current URL and check that we are on FreeCodeCamp
- Parse the curriculum, section, and challenge from the URL
- Open a new tab with the corresponding markdown file on GitHub
If your bookmarklet is longer than a line, it’s a good idea to write it in a code editor. Then you can use a tool like Bookmarklet Maker to wrap it inside a
And that’s it! Test cases of any* FreeCodeCamp challenge are now always just one click away (instead of, like, five).
Of all the code I write, it’s silly things like these that spark the most joy sometimes ¯\_(ツ)_/¯
* Actually, a few challenges (irritatingly) split words in the URL differently than their markdown files. So you might rarely get a 404, but most of the time it works fine.