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 11.

Excellent test description right there! But for the more complex challenges, they can get pretty abstract:

“The remove method 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!”

And sure enough, you can just go over to their repository and view the source code for all the challenges in a human-readable markdown:

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

Bookmarklets are browser bookmarks that run JavaScript instead of going to a page. To make a bookmarklet:

  1. Click “Add new bookmark” in your browser’s bookmark manager.
  2. In the “URL” field, paste the JavaScript you want to run in the following format:
javascript: (() => {
// 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 javascript: function call and escape any invalid characters. Here is the result, which you can take a turn into a bookmark:

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store