function whoAmI() {
    var name = 'Israel Morales';
    var company = 'Chapter Three';

    function sayName() {
       console.log('I am ' + name + ' and I work @ ' + company);
    }
    sayName();
}

whoAmI();

// I am Israel Morales and I work @ Chapter Three

whoAmI

I am Israel Morales and I work @ Chapter Three

https://github.com/isramv/debugging_js_101
https://slides.com/isramv/js101

Poll

how many beginners in the session?

how many intermediate?

how many advance or pro?

Disclaimer

If something is wrong with the information, shared here, please correct me.

I don't know everything.

if you have improvements to the content shared here, you can contribute in github or just let me know after the session. (any improvements are welcome).

I have a lot of stuff to share so I got to run quickly through each example.

Disclaimer

how many begginers in the session?

how many intermediate?

how many advance or pro?

Tool we are going to use.

chrome

devtools

Sources

https://github.com/isramv/debugging_js_101
https://slides.com/isramv/js101

Run command

Command + shift + P

https://github.com/isramv/debugging_js_101
https://slides.com/isramv/js101

Open file.

Command + P

Snippets

This is my favorite feature, allows you to save/execute code in the browser

console.log();

this is how everyone starts.

function sum(num1, num2) {
    var result = num1 + num2;
    console.log(result);
}

sum(1, 2);

sum(10, 30);

You can evaluate expressions with console.log

Other console methods.

// example of object.

var Person = {
    name: 'Israel',
    lastname: 'Morales',
    sayName: function() {
         // return this.name + ' ' + this.lastname;
         return `${this.name} ${this.lastname}`
    }
}

console.info('Important info information');

console.log(Person);

console.dir(Person);

console.warn('Warning');

console.error('Error');

• console.log()
• console.info()
• console.dir()
• console.warn()
• console.error()

Expressions:

An expression is any valid set of literals, variables, operators, and expressions that evaluates to a single value

var numero = 1;

console.log(typeof numero === 'number')
// true

console.log(numero >= 1);
// true

console.log(numero > 5);
// false

// result of expression evaluation is going to be either true or false when logic.
// expressions can be used with breakpoints.

https://github.com/isramv/debugging_js_101
https://slides.com/isramv/js101

Watch.

Breakpoints.

Breakpoints stop code execution example:

https://github.com/isramv/debugging_js_101
https://slides.com/isramv/js101

conditional breakpoint 1

conditional breakpoint 2

Scopes.

there are two scopes Global and Local.

var a_scope_description = 'Outer scope';

a_scope_description;

function simpleFunction() {

    var a_scope_description = 'Inner scope';

    a_scope_description;

};

simpleFunction();

// Breakpoint: in line 3 and 9.
// Watch: a_scope_description

Variables defined inside a function are in local scope while variables defined outside of a function are in the global scope.

Scopes 2.

on run time: a variable with the same name can exists in the Local and the Global Scope

Event Listener Breakpoint

Event Listener Breakpoint

https://stackoverflow.com/questions/20388563/chrome-console-vm