Dev Tools Intro

• I'll be using Firefox Nightly for this presentation, but other versions of Firefox as well as Chrome have similar dev tools
• We'll be working mostly with a combination of the "Debugger" ("Sources" in Chrome) and "Console" tabs:
  1. Keyboard open "Console" command in Firefox
     • Mac: cmd-opt-k / ⌘⌥k
     • Windows: ctrl-shift-k
  2. Keyboard open "Console" command in Chrome
     • Mac: cmd-opt-j / ⌘⌥j
     • Windows: ctrl-shift-j
  3. cmd + ] to shift right from the "Console" tab to the "Debugger"/"Sources" tab
  4. esc to toggle the "Console" view in a Dev Tools tab other than the "Console" tab
• In Firefox's "Console" tab, press cmd-b to show the multi-line editor.
• In Chrome's "Sources" tab, click the >> to the right of "Page" & "Filesystem", then select the "Snippets" tab, then create a "+ New Snippet".
• cmd-enter will run your program.

Next

Debugging Intro

• debugger - code execution is paused at the debugger statement
• ⌘\ resumes script
• ⌘; runs the next executable statement
• ⌘⇧ run the remaining executable statements in the current function, then stop at the next executable statement outside of this function
• ⌘' run the next function and then stop at the next executable function

debugger;

console.log('Hello World!');

Next

Scope - Global

debugger;

function aFunction () {
  console.log('Hello World from aFunction');
};

var aVar = 'Hello World from aVar';

let aLet = 'Hello World from aLet';

const aConst = 'Hello World from aConst';

• scope - the current context of the code
  (e.g. "Cleopatra" is recognized globally,
  "fry sauce" is recognized within Utah,
  "Sean" is recognized within Myriad Genetics' SLC Tech group)
• hoisting "...variable and function declarations are put into memory during the compile phase, but stays exactly where you typed it in your coding."
• undefined - (a) A variable that exists but has not been assigned a value yet, or (b) the return value of a function without an assigned return value.
• temporal dead zone / "not defined" - let & const must be initialized before they can be used.

Next

Scope - Local

debugger;

function aGreeting (greeting, greetingName) {
  return function () {
    const msg = greeting + ' ' + greetingName + '!';
    return msg
  }
};

const aGreet = (greetName) => {
  return aGreeting('Hello', greetName)
}

let aGreetWorld = aGreet('World');

var aWholeGreeting = aGreetWorld();

console.log(aWholeGreeting);

• anonymous functions
• function declaration vs. function expression
• fat arrow functions
• closures

Next

Call Stack

• Alternate Perspective
• Call Stack

Next

Scope - Function vs Block

debugger
var things = [];
for (var i = 0; i < 3; i++) {
  things[i] = function() {
    console.log(i);
  };
}

things[0]();
things[1](); 
things[2]();

• Function vs. Block Scope

Next

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.