Skip to content

Instantly share code, notes, and snippets.

@brittanydionigi

brittanydionigi/debugging-solo.md

Last active May 8, 2018 19:07
Show Gist options
  • Save brittanydionigi/e882a1d83506cdbe2a6fa024411cb94e to your computer and use it in GitHub Desktop.
Save brittanydionigi/e882a1d83506cdbe2a6fa024411cb94e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
debugging-solo.md

Read/Review

Practice

Often times, you'll be jumping into a pre-existing codebase and working with other people's code rather than writing a fresh app from scratch on your own. Sometimes the code is poorly tested or documented, and the previous developers may have moved on and taken their domain knowledge with them.

Navigating other's code, especially when it's broken, can lead you down some frustrating rabbit holes. Having solid debugging skills and understanding error messages will make this part of your job much easier.

Setup

  • Fork this tiny expense tracking application. (Make sure to fork, not clone!)
  • Clone your fork of the debugging repo and cd into the project directory from your terminal
  • run npm install and npm start, then view the app at localhost:3000

Bug 1

You should see an error message in the console right away that's preventing any expenses from showing up on the right-hand side. Read the error message, solve the error, and you'll then see three pre-existing expenses listed in the table on the right.

  • Commit and push your changes

Bug 2

  • Checkout a new branch called category-highlighting based on the origin: git checkout -b category-highlighting origin/category-highlighting
  • Follow the instructions in the README to start working on the next bug. This is a good one for setting breakpoints in the sources panel, try not to rely on console logs!
  • Hint: there may be more than one thing that needs to be fixed in order to get the proper functionality in place
  • Commit and push your changes

Bug 3

Checkout the edit-inline branch and follow the instructions in the README:

  • git checkout -b edit-inline origin/edit-inline
  • Don't worry if your previous work is no longer functional, each bug is it's own independent issue. Focus on just what's stated in the README.
  • Commit and push your changes

Bug 4

You haven't yet worked with the fetch API, and may not have seen ajax requests just yet - but if you're looking for an extra challenge, checkout the post-request branch and follow the debugging instructions in the README:

  • git checkout -b post-request origin/post-request
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment