Code Debugging Help

Coding Tips & Tricks
1

Code Debugging Tricks

Stuck with a code error that you’re not sure how to fix? Search here to find a solution, or ask our community of Vidcode experts.

2

Some steps for students to go through when their code doesn’t work!

  1. Reread the directions ​on the current page of your tutorial

  2. Reread the directions ​on previous pages

  3. Make sure​ each line of code is on a new line

  4. Read your code line by line t​o check your syntax. Are you missing something?
    - Does every o​pen parenthesis​ have a m​ atching closing parenthesis?
    - For example, t​ ext(“hello!” ;​ would not work because it only has an open parenthesis, and needs a matching closing one.
    - This is true for curly brackets { } square brackets [ ] and quotations “ ” as well.
    - Are you missing any ​periods or semicolons?
    - Is t​ext inside quotation marks​? Any colors, like “red”, or messages that you want your text to display, like​ ​text("hello everyone!"​), should be inside quotation marks.

  5. Find out what code is working and what isn’t​ by isolating your code through commenting

    • Comments are lines of text that the computer doesn’t read
      /* ​comment out a section of code​ ​*/
      //​ ​comment out a line of code

  6. Ask your partner

  7. Ask a neighbor

  8. Ask your teacher
    -Teacher gives hints, but doesn’t tell!

  9. Copy your code, refresh the page, and paste​ it in the editor

  10. Save your code and start over​. You’ve got this. :slight_smile:

3

Another thing that can be tricky is that there are Reserved Words in JavaScript. That means that certain words can’t be used in your code, because JavaScript relies on them to work properly. Here’s a list of reserved words to avoid using in your own code: https://www.w3schools.com/js/js_reserved.asp

4

It can also be hard to find the balance between guiding and giving students the answer. EdSurge has a great article with tips on how to help students figure out problems on their own: https://www.edsurge.com/news/2017-01-19-teaching-kids-to-debug-code-independently

5

Thanks for the tips and resources Leandra!

I’d love to hear from educators - what do you find yourself debugging the most with students?

6

Hello! I am new to Vidcode, but not to coding. I am having trouble with how the tutorial projects work when they are being coded vs how they work when they are being viewed. For example, on the snapchat filter tutorial, by “tip” box shows up when I code it. Then when I view it, it is gone. When I go back to edit, it is still gone. I have to click on the line of code that sets the color for the box, which changes it from the word to the hexadecimal. Once that line of code is clicked, the tip box shows up again. Once I view it, it disappears again - and the process repeats itself.

Similarly, I am doing the tutorial that has you draw on a movie. My drawing is fine until I view it, then the drawing appears to reduce in size, which places it incorrectly in the video. As above, when I go back to edit the code, the ONLY line that sets it right again is to change the color from the word to the hexadecimal or vice versa.

Before I do this with the kids, I’d like to understand why this is doing what it is doing.
Thank You - Sheri

7

Hi Sheri, thanks so much for using the forum and posting your question. Could you let me know a few things to help me debug this problem:

  1. For the Snapchat filter lesson - what step are you on where the error is occurring? For example, it could be step ‘3/19’. If possible please take a screenshot of the tip box disappearing and email it to support@vidcode.com

  2. For the draw on the movie question, are you referring to the ‘Doodle Augmented Reality’ tutorial? If so, I just went through and tried to recreate the error but wasn’t able to do so. Could you copy/paste your code and either paste it here or email it to support@vidcode.com? Also, are you using your own video file? If so, please also email the video file itself to support@vidcode.com so we can see if there is an error on the sizing of the video file.

The drawing on video sounds like it could be an export issue. The snapchat filter could also be an export issue.

Thanks again for posting!