Презентация на тему Troubleshooting JavaScript сode. (Module 6)

user input, broken connection or bugs in code
Errors break

www.fasticon.com

an event, which occurs during the execution of a

normal flow:

exception handling:

exception

use two keywords: try and catch:
try {
//

keyword.
Throwing an exception will break normal code execution on

throw (new Error("Some meaningful message"));

the user to enter age and convert it to

01 var age = parseInt(window.prompt("Enter your age"));
02 try {
03 if (isNaN(age))
04 throw (new Error("You entered incorrect value!"));
05 var nextAge = age + 10;
06 alert("In ten years you will be " + nextAge); 07 } 08 catch (err) {
09 alert(err.message);
10 }

construction to define block of code that is called

try {
// Block of code that may raise an exception
} catch (err) {
// Block of code to handle an exception
} finally {
// Block of code that called whenever
// exception occurs or not
}

exception occurs.
The .onerror() event handler provides three pieces of information to

.onerror() event handler that is called on button click

Click the following to see the result:

and removing bugs from the code
The process of debugging

in most browsers
Console tab allows to execute JS

provides full-featured debugger that has execution control buttons
Opening Sources

Developer Tools open Sources tab and choose external JS

another breakpoint.
Step over: step through code line-by-line, do not enters

on exceptions:
- pause on

1. Pause on all exceptions

2. Pause on uncaught exceptions only

DOM mutation events right click on element, select Inspect

make Ajax requests. We'll learn Ajax in detail in

1. Click button

2. Set URL filter

Event Listeners:
Expand Event Listener Breakpoints sidebar pane on the right side

browser's debugging console. Console allows to log useful events

output of logging information
.info(), .warn(), .error() – same as

logging information
Method accepts any number of arguments
It is

console.log('Hello, my name is %s, my age is %i', 'John', 20);
> Hello, my name is John, my age is 20

act almost as .log() but add icons to console

code or html code of DOM element, .dir() –

output:
.group() – start group
.groupEnd() – end group
.groupCollapsed() – start

use methods:
.time('Timer mark') – start timer
.timeEnd('Timer mark') – stop

start profiler
.profileEnd() – stop profiler
access profiling results here

conditions in our code.
Syntax: console.assert(condition, message);
condition – boolean condition

the server
You, not the browser, handle errors
Identify where errors

MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error
Enterprise JavaScript Error Handling: http://www.slideshare.net/nzakas/enterprise-javascript-error-handling-presentation
Debugging JavaScript