Forem: Jack Fisher

10 tips for debugging

Jack Fisher — Mon, 24 Jun 2019 16:49:48 +0000

I spend an awful lot of my time debugging my applications. As a result, I decided to draw up a list of common ways I’ve solved my bugs and I now use it as a reference/reminder of steps to take when I am debugging. I’m going to share the 10 steps I have in this article along with some explanations for each. This article is aimed at beginners or those who are in the early stages of their development career.

Break down the problem into manageable chunks
This is the most important piece of advice when it comes to debugging/problem-solving. I’m sure you’ve heard it countless times, but it never hurts to be reminded of the value in this. If you’re trying to tackle a bug then you have to be methodical about it, take things one step at a time in manageable steps. For example, if you are trying to debug a click event in your application then start by adding a console.log(“clicked”) into the function that your click event should be calling to ensure that it is being called.

Console.log()
That leads nicely into my second tip, utilise console.log(). Some developers like to mock those that rely too much on console.log() for debugging, but I would argue that it is one of the most effective methods to quickly work out what your application is actually doing. If you’re retrieving some data from an API and manipulating it within your app, stick a console.log(data) in there to ensure that what you have retrieved is definitely what you think it is.

Read the error message
This is one that beginners sometimes struggle with. Sometimes the answer to your problem is right there in front of you, within the error message. Your error message will tell you the line of code that caused the error, and a small description of what went wrong. Sometimes the messages are a bit cryptic and it can take some experience to begin to understand what it actually means, but the more you pay attention to what the error message says the quicker you will learn to decrypt it.

Comment out code
This is one of my favourite ways to debug an application, the principle is essentially to rule out what is not causing the error by commenting out blocks of code that you suspect could be involved. If you comment out some code and the error still appears (and hasn’t changed) chances are that block of code is not causing the issue. This process of elimination can help you get to the root of the problem pretty quickly.

Double check what you are doing
This is a good one to do near the beginning of your debugging process. What I mean by this is, ensure that the code you are working with is what you think it is. For example, sometimes you might be trying to fix an error on the development environment whilst frantically refreshing the page on the live environment and wondering why none of your changes are working.

Forget your assumptions
If you find yourself saying “this part of the code won’t be the cause of my bug” without actually checking it then you are setting yourself up for a world of pain. My advice would be to never assume things when you sit down to debug the application. The majority of my bugs come from my understanding of what I have instructed the application to do being misaligned with what I have actually instructed it to do.

Learn to use the debugger
If you put the time in to understand how to use the debugger then you’ll definitely see the benefits. The debugger is like console.log() on steroids – you can place breakpoints throughout your code to see exactly what is happening when it runs. Use it to see the value of variables, the order that functions are being called etc. Definitely worth the investment of time to learn it.

Google it
It’s probably been said a thousand times that to become a good programmer you just need to get good at Googling things. I find that Google is useful for small bugs such as syntax errors etc. but it loses its value as your bug gets more complex. It’s still worth doing because no doubt someone will have had the same issue you are having in the past.

Walk away
This is the best piece of debugging advice I have. I can’t tell you how many times I’ve spent hours on one single error and then realised what the solution was once I stopped trying to debug it. Taking a 15-minute break to go for a walk does wonders for your mind. There’s something about letting your mind wander that speeds up the process of landing on a solution. I now try to limit myself to no longer than one hour of debugging – if I can’t find the answer after an hour then I take a short break to clear my head before coming back to the computer.

Ask for help
The final step in my debugging process is to ask for help. There is absolutely no shame in asking for help. Getting help from other programmers is essential if you are going to spend an entire career programming. I would be amazed if there was anyone out there that had never had to ask someone for help with a bug! The sooner you get over your fear of reaching out to someone or looking stupid the sooner you will up your game as a programmer. On the flip-side of this, I encourage you to help others with their bugs, it feels good to help people out and you’ll probably benefit from it as well. After all, the best way to solidify your knowledge is to teach someone else.

That about does it for my debugging list. Hopefully some of you find it useful, if you have any tips of your own that you think I should utilise then I’d love to hear them!

VS Code Keyboard Shortcuts

Jack Fisher — Mon, 17 Jun 2019 12:34:07 +0000

If you’re anything like me then you might find yourself reaching for the mouse at every opportunity. But maybe you’ve been watching your favourite developers on YouTube and seeing how they navigate through their code using nothing but the keyboard. This was the situation I found myself in and I realised that I wanted to master the keyboard – so I took some time to learn the shortcuts. Apart from the obvious benefit of looking cool, relying less on the mouse and more on the keyboard is likely to increase your coding speed. As you know time is money, so let’s jump in and learn some of the best keyboard shortcuts for VS Code.

I’m only going to cover the shortcuts that I use the most, I’ve provided a cheat sheet at the bottom of this article that summarises the shortcuts I discuss in this article. If you’d like to see a full list of VS Code shortcuts, you can press CTRL + K followed by CTRL + S whilst in VS Code to bring up a list of all the shortcuts. If you just want to see my favourites then keep reading.

Comment out code block
WINDOWS: Highlight text + CTRL + /
MAC: Highlight text + ⌘ + /
The shortcut I love the most is to comment out large blocks of code quickly. This was one of the first shortcuts I learned because it really is the most useful. Commenting out code is an essential part of my debugging process, so I really couldn’t live without this one.

Indent code from right-to-left
WINDOWS: CTRL + [
MAC: ⌘ + [
Good code needs proper indentation, personally I like to use TAB to indent my code, but what happens when you indent too far and you want to move the code block in the other direction (from right to left). This is where CTRL [ comes in. I use this one less now that I have the Prettier extension which automatically formats my code but it’s still a useful one to know.

Highlight all code in the file
WINDOWS: CTRL + A
MAC: ⌘ + A
This is a nice and easy one to remember which is also extremely useful to know. Selecting all the text in a file at once can save you a lot of time if the file is quite large.

Highlight all code in that line
WINDOWS: CTRL + L
MAC: ⌘ + L
This is a quick way to highlight the line of code that your cursor currently sits on.

Move a line of code up or down
WINDOWS: Alt + UP/DOWN key
MAC: ⌥ + UP/DOWN key
I use this one a lot to rearrange the order of my lines of code. I mostly use it to move one line at a time but it can also move entire blocks of code if you highlight the text first.

Search all files in VS Code
WINDOWS: CTRL + SHIFT + F
MAC: ⇧ + ⌘ + F
This is a great one that I just recently learned. If you have a load of files and folders in VS Code and you are looking for something specific you can use this shortcut to quickly find it. I wish I had known about this one earlier.

Multi cursor on matching code
WINDOWS: Highlight text + CTRL + D
MAC: Highlight text + ⌘ + D
This one is great for updating the same variable name or class name throughout the entire code block or file. The command will place multiple cursors on code that matches the code you have highlighted, you can then edit them all at once.

Multi cursor
WINDOWS: Alt + Click
MAC: ⌥ + click
This one is cheating a little because it involves the mouse but it’s a useful shortcut so I’m including it anyway. It allows you to create multiple cursors wherever you want in the file.

Go to new file
WINDOWS: CTRL + P
MAC: ⌘+ P
This shortcut will bring up the dropdown menu with all your files so that you can quickly navigate to a new one. Definitely a good one to know

Navigate through your open files
WINDOWS: CTRL + Tab
MAC: ⌃ + Tab
This is an essential one to know if you are going to rely less on your mouse. Keep holding CTRL and hit Tab to navigate through each open file. Hitting SHFIT + Tab will go in the opposite direction.

Cheat Sheet

Highlight text + CTRL + / || Highlight text + ⌘ + / - comment out code block
CTRL + { || ⌘ + [ - indent code from right-to-left
CTRL + A || ⌘ + A – highlight all code in the file
CTRL + L || ⌘ + L – highlight all code in that line
Alt + UP/DOWN key || ⌥ + UP/DOWN key – move a line of code up or down
CTRL + SHIFT + F – || ⇧ + ⌘ + F - search all files in VS Code
Highlight text + CTRL + D || Highlight text + ⌘ + D – multi cursor on matching code
Alt + Click || ⌥ + click – multi cursor
CTRL + P || ⌘+ P – go to new file
CTRL + Tab || ⌃ + Tab – navigate through your open files

That covers all of the shortcuts I use on a regular basis. I’ve only scratched the surface of the shortcuts available and would love to hear more. What useful ones do you use that I haven't listed?

Why you should keep a coding journal

Jack Fisher — Tue, 11 Jun 2019 10:31:09 +0000

I strongly believe that a daily journal is one of the best habits you can pick up if you are trying to improve your coding skills, especially as a beginner. In this short blog I would like to discuss my reasons for this and hopefully, encourage some of you to start keeping a journal yourself.

The great thing about this habit is that it’s a really easy one to pick up and maintain. I probably dedicate 5 minutes (max) per day to writing in my journal what I did that day with regards to coding. I like to do this right before I go to bed when everything else has been done. I find this night-time ritual useful for many reasons. The first of these reasons is that it acts as a record of my accomplishments. Learning to code can be a very slow process, and sometimes it feels like no progress is being made at all (especially in the early stages when you know how much lies ahead of you). The daily journal acts as a reminder of where I used to be on my journey, and where I am today. If I’m ever feeling demotivated or overwhelmed by the amount of information I feel like I need to learn, I can just go back a couple of weeks in my journal and see how far I have come in just a short amount of time. This gives me much needed encouragement to keep going.

The second reason I swear by my daily journal is that it motivates me to code every single day. There are some days where I really don’t feel like doing any coding, maybe I’m tired or just not in the mood. My coding journal motivates me to at least do something that day so that I don’t have to leave a blank page. I will admit that even with this motivation there are still some days when I don’t write any code or study any new concepts (everybody needs some time off), but I truly believe that I have my journal to thank for many days where I got a lot done when I otherwise wouldn’t have sat down to study at all.
The final reason I love my daily journal is that it allows me to record my daily time spent coding and compare each week with the last. I think it’s important to be consistent with learning in order to make any real progress. I have a target of 15 hours per week of study time. Some weeks I do more, some weeks I do less. Each day in my journal I write the number of hours spent coding and then total the hours at the end of each week. This gives me a really easy way to see if I am putting in enough time or if I need to up my game.

If you’ve been thinking about starting a daily journal then my advice would be to go for it, I couldn’t recommend it enough.