Debugging JavaScript 101

https://github.com/isramv/debugging_js_101
https://slides.com/isramv/js101
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?

Who's this talk for?

Is for anyone, specially beginners, intermediates, jQuery users, Drupal people, but specially for those that keep saving a refreshing the browser, when doing JS

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

Call stack.

Text

Show where the function was called.

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

DOM Breakpoint

// we add the dom breakpoint in Elements

// the following code is going to change the color of the text.

$(document).on('click', 'h1', function(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    $(this).css('color', 'blue');
});

Event Listener Breakpoint

Event Listener Breakpoint

Events listeners

https://developers.google.com/web/tools/chrome-devtools/console/events

Ajax XHR XMLHttpRequest

// Dogs API

$.ajax({
    url: 'https://dog.ceo/api/breeds/list',
    type: 'GET'
}).done(function(data) {
//     data;
    if (data.status === 'success') {
        console.log(data.message);
        listBreeds(data.message);
    }
}).fail(function(data) {
//     data;
    if (data.status !== 'success') {
        console.error('Huge error');
    }
});

function listBreeds(dataArray) {
    var items = '';

//     dataArray.forEach(function(item) {
//         items = items + `<li>${item}</li>`;
//     });

    var result = dataArray.map(function(item) {
        return `<li>${item}<\/li>`;
    });

    $('.dog-list').append(result);
}

Extras:

https://github.com/isramv/debugging_js_101
https://slides.com/isramv/js101
  • taking screenshots.
  • switching between tabs.
  • showing badges
  • $$() selector for terminal.

Debugging JavaScript 101

By Israel Morales

Debugging JavaScript 101

presentation for BadCamp 2017

  • 1,649