Monday, March 13, 2023

Debugging JavaScript, Part 3

 

General Debugging Tips

Top 7 Most Common Errors in Programming

https://www.learnacademy.org/blog/what-considered-common-programming-errors/

 

The 7 Most Common Types of Errors in Programming and How to Avoid Them

https://textexpander.com/blog/the-7-most-common-types-of-errors-in-programming-and-how-to-avoid-them

 

The Most Common Coding Errors

https://www.parkersoftware.com/blog/the-most-common-coding-errors/

 

JavaScript Debugging in Particular

JavaScript Debugging, W3Schools

https://www.w3schools.com/js/js_debugging.asp

 

16 JavaScript Debugging Tips You Probably Didn't Know (Advanced)

https://raygun.com/learn/javascript-debugging-tips

 

Strict Mode

W3 Schools

https://www.w3schools.com/js/js_strict.asp

 

MDN

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode

 

console.table

MDN

https://developer.mozilla.org/en-US/docs/Web/API/console/table

 

W3Schools

https://www.w3schools.com/jsref/met_console_table.asp

Debugging JavaScript, Part 2

JavaScript Lint Alternatives

JSLint is a very difficult tool to use. It is very picky. The author is very picky and opinionated about what he considers good JavaScript vs. bad JavaScript. He even wrote a book called JavaScript: The Good Parts. Anyway, his tool is not very configurable for beginner use even though it has a lot of options. I have found some lint alternatives that you may like to try.

1. ES Lint Online

ESLint is primarily a tool that you use as an application you install on your computer. However, there is a "playground" version where you can paste your code into an online form.

2. Validate JavaScript

ValidateJavaScript is an online validating (or linting) tool that will automatically find basic errors and help prevent potentially destructive bugs in JavaScript and JSX (React.js) code. Copy and paste or directly input your code into the editor, click the 'Find & Fix Errors' button, and the tool will parse your code and list all errors allowing you to fix them systematically.

 

3. JS Hint

Simply enter some JavaScript anywhere on the page. Your report will appear on the right side.

 
4. Prettier

This is just a code formatter, but it can do wonders for indenting your JavaScript properly, which makes it easier to find many different kinds of bugs.

 

5. ES Lint VSC Extension

You can get ESLint in the form of an extension you can add to Visual Studio Code. Unfortunately, this requires that you have installed ESLint as an application on your computer. This, in turn, requires npm (Node Package Manager) to do the install. So if you don't have npm, you'd have to install that first. This sounds like a good option, but I haven't had time to install everything myself.

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint 

 

Debugging JavaScript, Part 1

Sometimes, perhaps often, we write code that has problems or just doesn't work. This module explores strategies for figuring out what's wrong and fixing it.

In general, we have two kinds of tools for exploring errors.

  • The console, which we can use to print messages at various points along the way in an effort to isolate the problems.
  • Debuggers, which help automate the task of find the errors. Debuggers fall into two categories:
    • The debugger built into the console, which may show you compile-time errors in your code.
    • Alternative debuggers, such as Firebug for Firefox, which may help you find errors in your code as it's running, known as run-time errors.

We may encounter two different kinds of errors as we're attempting to put a project together.

  • Compile-time errors are also known as syntax errors and they can be such mistakes as spelling errors, misplaced or missing parentheses, semicolons, commas, etc. These kinds of errors often prevent the program from running at all.
  • Run-time errors are not due to syntax mistakes but instead due to logic mistakes. So the program may run, but it may not do the right thing.

Compile-Time Errors

Compile-time errors include anything that is a violation of project JavaScript syntax. Common syntax errors include:

  • Spelling errors
    • Misspelled keywords, such as for, while, function, if, switch.
    • Misspelled library function and property names, such as getElementByID instead of getElementById, etc.
    • Mismatched variable names, such as colorswatches in one place, and colorSwatches in another place.
    • Note that like most programming langauges, JavaScript is case-sensitive, so mismatches in upper case vs. lower case letters can have a big impact.
  • Brackets errors
    • Extra or missing or mismatched brackets: parentheses ( ), square brackets [ ], curly brackets { }, angle brackets < > (usually in HTML, not JavaScript).
    • Using the wrong kind of brackets, particularly in
      • functions, which use both parentheses and curly brackets in different places,
      • arrays, which use square brackets,
      • objects, which use curly brackets, and
      • arrays of objects, which use both square brackets and curly brackets in different places.
  • Missing semicolons and commas.

Run Time Errors

Run time errors are hard to detect before running the program. There may not be any spelling errors that might be a warning that something is wrong. So when you run the program, it either

  • does the wrong thing, or
  • crashes, or
  • both.

Examples of common run-time errors include:

  • Forgetting to update the condition variable in a for or while loop, which can cause an infinite loop. (This can eventually cause a crash if the computer runs out of memory, or it may just lock up your computer until you quit and restart the browser.)
  • Trying to access an array index that is out of bounds (beyond the end of the array), which can cause a crash.
  • Trying to divide by zero, which can cause a crash. No one does this on purpose, but what if the user enters zero (0) and you try to use their input in a math calculation?
  • Not paying attention to operator precedence (PEMDAS), which can cause a calculation to return the wrong result, such as the wrong bank balance.
  • Wrong logic for if, &&, and ||, which can cause you, for example, to go outside if it is cold and rainy.