Skip to content

Instantly share code, notes, and snippets.

@voscarmv
Last active March 8, 2022 14:55
Show Gist options
  • Save voscarmv/66fac7dd24f6cfd7725607a5d51872c4 to your computer and use it in GitHub Desktop.
Save voscarmv/66fac7dd24f6cfd7725607a5d51872c4 to your computer and use it in GitHub Desktop.

How to google bugs like a pro 🐜 πŸ‘ˆπŸ˜ŽπŸ‘

1. Introduction

After years of coding and debugging my code, I've had to search for a lot of bug fixes online. Because of this, I've come up up with multiple googling techniques. I'd like to share these techniques here, to help others save time while searching for code solutions online.

2. General search techniques

These are techniques that apply to any type of online search you want to do, not just coding. Later on I'll touch on the subject of how to deal with error messages, and code searches.

Keeping track of your search

Hunting for a code solution online often involves reading a lot of content from a lot of differnt articles. This means that our browser tabs can add up quickly. My first recommended search technique is always to save the most relevant tabs in a bookmark folder. I do this because I've been in situations where I realize the solution was in an article I'd already read days ago. It's better to save the links to these articles than to struggle trying to find them a second time.

Rephrasing

When searching for bug solutions online, it's common to find forums and discussion boards about them. Users tend to duplicate tech questions in these sites, for exmaple by rephrasing the same question. Two people can ask the exact same question using different words. This is why it's important to google our questions multiple times by rephrasing them.

A concrete example, the search phrases:

  1. "Securing rails application"
  2. "Username password for rails"
  3. "User authentication gem for rails"

They all essentially point to the same thing, that is how to secure a rails app? However, the results they yield are different and varied.

The end result of rephrasing is that some phrasings catch more attention than others. Usually the most common phrasing of a question is the one that receives the most attention (and answers) in places like StackOverflow. So it's better if we begin searching for code solutions by using the most simple and common language at first. However, this does not always work.

If you can't find the answer to your question, then phrase it differently. Sometimes, questions phrased differently have different answers and approaches you can try. I've seen the exact same question, phrased differently in two sites: one of them has a correct answer, and the other doesn't. You never know when different phrasing can lead you to a bug fix!

If you know more than one language

If you know two or more languages, you can do the same thing as with rephrasing: ask the same question, but in a different language. I've had many cases where the solution is readily available in Spanish, but blogs in English haven't caught up. Again: you never know how changing the language of your search can yield good results!

3. Debugging

The following are techniques for when you're searching for a bug fix.

Dissecting error messages

The first thing to pay attention to is the structure of the error message. Let's take this StackOverflow example from a bad npm install:

npm ERR! path /Users/jasonazoulay/Desktop/fabrick.io/delegation/node_modules/@angular/cli/node_modules/webpack/node_modules/yargs/node_modules/os-locale/node_modules/execa/node_modules/cross-spawn/node_modules/.bin/which
npm ERR! code EEXIST
npm ERR! Refusing to delete /Users/jasonazoulay/Desktop/fabrick.io/delegation/node_modules/@angular/cli/node_modules/webpack/node_modules/yargs/node_modules/os-locale/node_modules/execa/node_modules/cross-spawn/node_modules/.bin/which: is outside /Users/jasonazoulay/Desktop/fabrick.io/delegation/node_modules/@angular/cli/node_modules/webpack/node_modules/yargs/node_modules/os-locale/node_modules/execa/node_modules/cross-spawn/node_modules/which and not a link
npm ERR! File exists: /Users/jasonazoulay/Desktop/fabrick.io/delegation/node_modules/@angular/cli/node_modules/webpack/node_modules/yargs/node_modules/os-locale/node_modules/execa/node_modules/cross-spawn/node_modules/.bin/which
npm ERR! Move it away, and try again

Notice how there are several sections to the error message:

  1. A path where the error occurred.
  2. An internal code that npm uses to classify errors.
  3. A message describing the particulars of the error.
  4. A suggestion on how to fix the error.

These are some of the standard sections most error messages contain. We can use this information to google for fixes to the problem. The following are some suggestions on how to go about it.

Remove the specifics from the message

In our example, note the line:

npm ERR! Refusing to delete /Users/jasonazoulay/Desktop/fabrick.io/delegation/node_modules/@angular/cli/node_modules/webpack/node_modules/yargs/node_modules/os-locale/node_modules/execa/node_modules/cross-spawn/node_modules/.bin/which: is outside /Users/jasonazoulay/Desktop/fabrick.io/delegation/node_modules/@angular/cli/node_modules/webpack/node_modules/yargs/node_modules/os-locale/node_modules/execa/node_modules/cross-spawn/node_modules/which and not a link

In this case, the error message refers to a specific file inside the user's personal /Users/jasonazoulay/Desktop... folder. If we wanted to find a solution, we would have to remove all specific details from the error message, in order to google it. There will be no posts out there with our username and particular path, so we should remove those details from our search.

Using our example, our search string would look like:

"npm ERR! Refusing to delete" "is outside" "and not a link"

Notice how the message parts are enclosed in double quotes. This is so that google will recognize these as fixed patterns, which increase the accuracy of our results. Remember: error messages are uniform, so we search for them in a uniform manner.

Try combining different pieces of the error message

If the above fails, you can always try to be less specific with the error message. So, for example, instead of searching for all three sections of the message, you can leave out the last two:

"npm ERR! Refusing to delete"

You can combine that with site:www.stackoverflow.com to search that site.

Research a family of errors

Sometimes the specific error we are looking for is not well documented or solved. However, we can use error codes to find a family of similar errors. This can help us explore neighboring solutions which can push is in the right direction in our search for a solution. We can use adjacent error codes, or research the error code scheme used, in order to find groups of similar errors, classified by a framework like react or rails.

What if there's no error message?

These are the toughest bugs to fix and the only way to find online support for them is to have good descriptive skills. Try to describe the bug as briefly and as best as you can, and you might just get lucky. Honestly, these bugs are so difficult to fix that I haven't really come up with anything better than this.

4. Hunting for good code examples

Let's say you want to learn a new framework, implement a new feature, or try some aspect of a language. The first thing that comes to mind is "I need a working code example".

The problem is, not every code package/feature has good documentation. As a developer, surely you've experienced this: an npm package has a well-designed and short documentation, but when it's time to write some code, the examples are either too small to be useful, or too abstract to run in a computer.

In this section I discuss techniques to handle these situations.

Feature search

The first thing is to find the feature we want to implement. What is it called? Where is it's github repo? The problem here is, before we find it, we don't really know it's name. The best we can do at this point is to describe what we want and google it. Rephrasing is essetial here.

Search for famous packages/frameworks

The first step in finding the right package/feature to implement is to look up popular solutions. Just like when we search for a bug solution, websites like StackOverflow offer interesting discussions on the different frameworks or packages one may use to solve a problem. All of the previous search techniques apply in this step of the operation.

The best advice I can offer when choosing code solutions, is to use well-known packages and frameworks. These will have the best documentation and support, and you'll find plenty of good examples laying around.

Notable feature: GitHub code search!

Let's say we're looking for a way to do async calls in react, and we've decided to go with Redux Saga. And now let's say we want a working code example, so we can play around with it an tweak it to implement it in our project. If we go to the Redux Saga documentation, we'll see an introduction that looks like this:

image

Notice how the example uses ellipsis (...) to fill out sections of the code. This is easy to understand, but we can't really copy and paste this code and expect it to work.

We need examples that actually run, so we can get out hands dirty and really understand how our desired feature is going to work. So how do we find these working code examples?

Here's where GitHub advanced search comes to the rescue!

If we want to see real, working code examples, written and tested by real programmers, all we have to do is search GitHub and use what we need from there.

The key here is to know what keywords to use in our GitHub search. In the previous example with the Redux Saga documentation, notice the following line:

import { call, put, takeEvery, takeLatest } from 'redux-saga/effects'

Some of these are keywords you would expect to find in real-world examples of Redux Sagas being used. If we wanted to find working code examples of Redux Saga's call, put, takeEvery, and takeLatest, we'd have to search for something like:

redux-saga call put takeEvery takeLatest language:JavaScript

Note how we used language:JavaScript to restrict our results. Here are the results we find when we search for this on GitHub:

image

And there we have it: 7 thousand code examples of files that use this library. We literally have thousands of working code examples we can clone and run in our computer!

So, next time you're having trouble finding functioning pieces of code, remember this technique!

Thank you for reading!

Thanks for making it to the end of my article :) If you want to leave a comment, feel free to do so! Also, please star it if you like it ⭐ Cheers and happy coding!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment