JavaScript Common Mis JavaScript Common Mistakes & Best Practicestakes & Best Practices
CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when...
-
Upload
rodney-horton -
Category
Documents
-
view
232 -
download
0
description
Transcript of CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when...
![Page 1: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/1.jpg)
![Page 2: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/2.jpg)
CHAPTER 10
ERROR HANDLING& DEBUGGING
![Page 3: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/3.jpg)
JavaScript can be hard to learn. Everyone makes mistakes when writing it.
![Page 4: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/4.jpg)
Error messages can help you understand what has gone wrong and how to fix it.
![Page 5: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/5.jpg)
You will learn about:
The console and developer toolsCommon problemsHandling errors
![Page 6: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/6.jpg)
HOW JAVASCRIPT WORKS
![Page 7: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/7.jpg)
To find the source of an error it helps to understand how scripts are processed.
![Page 8: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/8.jpg)
The order of execution is the order in which lines of code are executed or run.
![Page 9: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/9.jpg)
function greetUser() { return ‘Hello ’ + getName();}
function getName() { var name = ‘Molly’; return name;}
var greeting = greetUser();alert(greeting);
LOOK AT THIS SCRIPT:
![Page 10: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/10.jpg)
function greetUser() { return ‘Hello ’ + getName();}
function getName() { var name = ‘Molly’; return name;}
var greeting = greetUser();alert(greeting);
1
![Page 11: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/11.jpg)
function greetUser() { return ‘Hello ’ + getName();}
function getName() { var name = ‘Molly’; return name;}
var greeting = greetUser();alert(greeting);
2
![Page 12: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/12.jpg)
function greetUser() { return ‘Hello ’ + getName();}
function getName() { var name = ‘Molly’; return name;}
var greeting = greetUser();alert(greeting);
3
![Page 13: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/13.jpg)
function greetUser() { return ‘Hello ’ + getName();}
function getName() { var name = ‘Molly’; return name;}
var greeting = greetUser();alert(greeting);4
![Page 14: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/14.jpg)
There are execution contexts:
One global contextAnd a new execution context for each new function
![Page 15: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/15.jpg)
function greetUser() { return ‘Hello ’ + getName();}
function getName() { var name = ‘Molly’; return name;}
var greeting = greetUser();alert(greeting);
GLOBAL CONTEXT(global scope)
FUNCTION CONTEXT(function-level scope)
![Page 16: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/16.jpg)
The JavaScript interpreter processes code one line at a time.
![Page 17: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/17.jpg)
If a statement needs data from another function, it stacks (or piles) functions on top of the current task.
![Page 18: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/18.jpg)
![Page 19: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/19.jpg)
When a script enters a new execution context, there are two phases of activity:
1: Prepare2: Execute
![Page 20: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/20.jpg)
ERRORS
![Page 21: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/21.jpg)
If a JavaScript statement generates an error, then it throws an exception.
![Page 22: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/22.jpg)
It stops… and looks for exception handling code.
If error handling code cannot be found in the current function, it goes up a level.
![Page 23: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/23.jpg)
If error handling code cannot be found at all, the script stops running.
An Error object is created.
![Page 24: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/24.jpg)
Error objects help you find where your errors are.
Browsers have tools to help you read them.
![Page 25: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/25.jpg)
Error objects have these properties:name type of executionmessage description of errorfileName name of JavaScript filelineNumber line number of error
![Page 26: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/26.jpg)
Seven types of Error object:ErrorSyntaxErrorReferenceErrorTypeErrorRangeErrorURIErrorEvalError
![Page 27: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/27.jpg)
A DEBUGGING WORKFLOW
![Page 28: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/28.jpg)
Debugging is about deduction and eliminating potential causes of errors.
To find out where the problem is, you can check…
![Page 29: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/29.jpg)
1 • The error message• The line number• The type of error
![Page 30: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/30.jpg)
2 How far the script has run
![Page 31: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/31.jpg)
3 Values in code by setting breakpoints and comparing the values you expect to what the variables hold
![Page 32: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/32.jpg)
THE CONSOLE & DEVELOPER TOOLS
![Page 33: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/33.jpg)
All modern browsers have developer tools to help you debug scripts.
Start by opening the JavaScript console.
![Page 34: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/34.jpg)
1: Console is selected2: Type of error (SyntaxError)3: File name and line number: (errors.js:4)
32
1
![Page 35: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/35.jpg)
1: Console is selected2: Type of error (SyntaxError)3: File name and line number: (errors.js:4)
2
1
3
![Page 36: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/36.jpg)
1: Console is selected2: Type of error (SyntaxError)3: File name and line number: (errors.js:4)
32
1
![Page 37: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/37.jpg)
You can just type code into the console and it will show you a result.
![Page 38: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/38.jpg)
The console.log() method will write code to the console as it is processed.
![Page 39: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/39.jpg)
![Page 40: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/40.jpg)
These methods show messages like log() but have a slightly different style:console.info()console.warn()console.error()
![Page 41: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/41.jpg)
![Page 42: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/42.jpg)
You can group error messages with:console.group(‘Areas’); console.info(‘Width ‘, width); console.info(‘Height ‘, height); console.log(area);console.groupEnd();
![Page 43: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/43.jpg)
![Page 44: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/44.jpg)
You can write arrays and object data into a table with:console.table(objectname);
![Page 45: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/45.jpg)
![Page 46: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/46.jpg)
You can write on a condition with:console.assert(this.value > 10, 'User entered less than 10');
![Page 47: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/47.jpg)
![Page 48: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/48.jpg)
Breakpoints let you pause the script on any line, allowing you to then check the values stored in variables.
![Page 49: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/49.jpg)
1: Sources is selected
32
1
4
![Page 50: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/50.jpg)
2: Script is chosen
32
1
4
![Page 51: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/51.jpg)
3: Line number is clicked on
32 4
1
![Page 52: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/52.jpg)
4: Variable is hovered over
32 4
1
![Page 53: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/53.jpg)
If you have several breakpoints, you can step through them one by one.
![Page 54: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/54.jpg)
1: Pause button turns into a play
button when a breakpoint is encountered
1 2 3 4
![Page 55: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/55.jpg)
2: Go to next line of code and step through the lines one-by-one
2 3 41
![Page 56: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/56.jpg)
3: Step into a function call
32 41
![Page 57: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/57.jpg)
4: Step out of a function that you
stepped into
42 31
![Page 58: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/58.jpg)
You can create a breakpoint with the debugger keyword:
if (area < 100) { debugger;}
![Page 59: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/59.jpg)
HANDLING EXCEPTIONS
![Page 60: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/60.jpg)
If you know your code could fail, you can use try, catch, and finally.
Each gets its own code block.
![Page 61: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/61.jpg)
try { // Try to run this code} catch (exception) { // If an exception occurs, run this code} finally { // Always gets executed}
![Page 62: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/62.jpg)
try { // Try to run this code} catch (exception) { // If an exception occurs, run this code} finally { // Always gets executed}
![Page 63: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/63.jpg)
try { // Try to run this code} catch (exception) { // If an exception occurs, run this code} finally { // Always gets executed}
![Page 64: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/64.jpg)
try { // Try to run this code} catch (exception) { // If an exception occurs, run this code} finally { // Always gets executed}
![Page 65: CHAPTER 10 ERROR HANDLING & DEBUGGING JavaScript can be hard to learn. Everyone makes mistakes when writing it.](https://reader033.fdocuments.in/reader033/viewer/2022052300/5a4d1b627f8b9ab0599adef9/html5/thumbnails/65.jpg)