Using Your Browser’s Toolkit to Debug Front-end Issues

A user of Jupyter’s Notebook noticed a fairly strange occurrence. When they wished to download their session, otherwise known as a .ipynb file, they were prompted with two downloads. While it’s not a app-breaking fault in the code , it’s certainly something that would confuse a user.

In my opinion, the easiest way to go about malfunctioning javascript, is to see what exactly occurs during ‘runtime’ or I suppose in this case — when the user clicks to download their session.

Browsers like Chromium and Firefox both come with tool kits which allow you to do just this. I will cover Firefox 64’s tools, but I am sure that the equivalent can be found in Chrome. Under the Tools menu > you will notice a link to ‘Web Developer’ which then > links to an array of items to choose from. By toggling this, you’ll be able to access quite a bit of power… For instance, you can test the performance of your site, see which styles are being applied to which elements, and even have access to a Console to view things such as error messages. It pops up at the bottom of your browser, like such:

Screenshot from 2018-12-14 23-56-56
For the purposes of fixing the issue at hand, I need to use the Inspector tool. The reason for this is, I want to follow what happens to an element on the page after a user clicks on it. While you can manually use the Inspector tab, and select elements by hovering over them with your mouse, I find the easier way to right click -> Inspect Element (Q) while hovering over exactly what you want. A lot of times HTML elements are hidden behind tags, and this way you can bypass that nuisance.

In my case, I hovered over the list of available download options, and chose the correct one. And this is what I saw:

Screenshot from 2018-12-14 23-33-51

There are two jQuery calls when this item is clicked. And the amazing part is, the browser can pinpoint exactly which file and which lines these calls are made! So sure enough, I powered up my editor and found the code.

I noticed an anonymous function call specific to only this item list. I compared it to the other call found on line 66 as well. Line 66 actually handles downloading too. And this line is also called by every other list element, whereas the other was only called by #download_ipynb . Perhaps this was an over-site by the developers. Either way, removing the function fixed the problems, as well as passed all the test. This probably means there was no unit test for the function in the first place.

Either way, I have made an attempt to contribute to an application that I use regularly (but I guess not regularly enough to have spotted this bug – ha).


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s