├── css ├── app_override.css └── font-awesome.min.css ├── images ├── Mini-Me.png ├── heisenberg.jpg ├── Walter-white.jpg ├── debugging-js.png └── zsn544gu6k20v8ftugn_c.png ├── fonts ├── FontAwesome.otf ├── fontawesome-webfont.eot ├── fontawesome-webfont.ttf └── fontawesome-webfont.woff ├── js ├── form.js ├── .jshintrc ├── watches.js ├── call-stack.js ├── breakpoints.js ├── console-fixed.js ├── console.js ├── ajax-mock.js ├── app-module.js └── authentication-form.js ├── package.json ├── sample.html ├── README.md ├── sample.js ├── console.html ├── index.html ├── call-stack.html ├── watches.html ├── jQuery.html ├── form.html └── data └── data.json /css/app_override.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/Mini-Me.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cmorrow/debugging-js-samples/HEAD/images/Mini-Me.png -------------------------------------------------------------------------------- /fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cmorrow/debugging-js-samples/HEAD/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /images/heisenberg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cmorrow/debugging-js-samples/HEAD/images/heisenberg.jpg -------------------------------------------------------------------------------- /images/Walter-white.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cmorrow/debugging-js-samples/HEAD/images/Walter-white.jpg -------------------------------------------------------------------------------- /images/debugging-js.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cmorrow/debugging-js-samples/HEAD/images/debugging-js.png -------------------------------------------------------------------------------- /fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cmorrow/debugging-js-samples/HEAD/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cmorrow/debugging-js-samples/HEAD/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cmorrow/debugging-js-samples/HEAD/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /images/zsn544gu6k20v8ftugn_c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cmorrow/debugging-js-samples/HEAD/images/zsn544gu6k20v8ftugn_c.png -------------------------------------------------------------------------------- /js/form.js: -------------------------------------------------------------------------------- 1 | // Instantiate form-authentication object 2 | (function () { 3 | "use strict"; 4 | 5 | const authenticationForm = Object.create(AuthenticationForm); 6 | authenticationForm.init(); 7 | })(); 8 | -------------------------------------------------------------------------------- /js/.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "node": true, 3 | "curly": true, 4 | "eqnull": true, 5 | "eqeqeq": true, 6 | "undef": true, 7 | "unused": false, // change to false to not error on unused vars 8 | "indent": 4, 9 | "trailing": true, 10 | "browser": true, 11 | "devel": true, 12 | "strict": true, 13 | "quotmark": "single", 14 | "globals": { 15 | "jQuery": false, 16 | "$": false 17 | } 18 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Debugging JS Sample Code", 3 | "description": "", 4 | "version": "0.0.1", 5 | "homepage": "", 6 | "author": { 7 | "name": "Chris Morrow", 8 | "email": "chris@chrisjmorrow.com" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/cmorrow/debugging-js-samples" 13 | }, 14 | "devDependencies": { 15 | 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /sample.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sample Code 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | ### Debugging JS Code Samples 3 | 4 | Code samples used in my Debugging JS YouTube video at https://youtu.be/-q1z8BPFItw 5 | 6 | ### Installation 7 | Install NodeJS if not already installed 8 | - https://nodejs.org 9 | - Open Command Prompt (Win) or Terminal (Mac) 10 | - Run the following command: 11 | `npm install -g http-server` 12 | 13 | 14 | ### Starting the local server 15 | In Command Prompt/Terminal; navigate to the project folder "debugging-js-samples" 16 | Next run `http-server` 17 | 18 | - Open a browser to `http://127.0.0.1:8080` 19 | 20 | 21 | #### Note: all samples will work without running a local server except the console.html which loads JSON data -------------------------------------------------------------------------------- /js/watches.js: -------------------------------------------------------------------------------- 1 | /*jshint strict: true */ 2 | // var kaApp = kaApp || {}; 3 | (function (document, $) { 4 | "use strict"; 5 | const myArray = ["Hank", "Jesse", "Walter"]; 6 | 7 | function firstFunction() { 8 | var currentPerson = "Walter White Jr."; 9 | myArray.push(currentPerson); 10 | secondFunction(); 11 | } 12 | 13 | function secondFunction() { 14 | myArray.push("Skyler"); 15 | thirdFunction(); 16 | } 17 | 18 | function thirdFunction() { 19 | myArray.push("Gustavo"); 20 | } 21 | 22 | // call firstFunction; start the chain of events 23 | firstFunction(); 24 | })(window.document, jQuery); 25 | 26 | /* ---- Links -------- */ 27 | /* http://learn.jquery.com/using-jquery-core/document-ready/ */ 28 | -------------------------------------------------------------------------------- /js/call-stack.js: -------------------------------------------------------------------------------- 1 | /*jshint strict: true */ 2 | (function (document, $) { 3 | "use strict"; 4 | 5 | let totalFunctionsCalled = 0; 6 | 7 | function firstFunction() { 8 | totalFunctionsCalled++; 9 | secondFunction(); 10 | } 11 | 12 | function secondFunction() { 13 | totalFunctionsCalled++; 14 | thirdFunction(); 15 | } 16 | 17 | function thirdFunction() { 18 | totalFunctionsCalled++; 19 | fourthFunction(); 20 | } 21 | 22 | function fourthFunction() { 23 | totalFunctionsCalled++; 24 | console.log("totalFunctionsCalled: " + totalFunctionsCalled); 25 | } 26 | 27 | // call firstFunction; start the chain of events 28 | firstFunction(); 29 | 30 | // Live Script Editing 31 | $("#header") 32 | .find(".logo") 33 | .on("click", function () { 34 | alert("old message"); 35 | }); 36 | })(window.document, jQuery); 37 | -------------------------------------------------------------------------------- /js/breakpoints.js: -------------------------------------------------------------------------------- 1 | /*jshint strict: true */ 2 | (function (document, $) { 3 | "use strict"; 4 | 5 | const myNumber = 181; 6 | let totalFunctionsCalled = 0; 7 | const myArray = ["Hank", "Jesse", "Walter"]; 8 | //console.log('myNumber equals 181: ' + (myNumber === 181)); 9 | 10 | function firstFunction() { 11 | totalFunctionsCalled++; 12 | secondFunction(); 13 | } 14 | 15 | function secondFunction() { 16 | totalFunctionsCalled++; 17 | thirdFunction(); 18 | } 19 | 20 | function thirdFunction() { 21 | totalFunctionsCalled++; 22 | fourthFunction(); 23 | } 24 | 25 | function fourthFunction() { 26 | totalFunctionsCalled++; 27 | } 28 | 29 | // call firstFunction; start the chain of events 30 | firstFunction(); 31 | })(window.document, jQuery); 32 | 33 | /* ---- Links -------- */ 34 | /* http://learn.jquery.com/using-jquery-core/document-ready/ */ 35 | -------------------------------------------------------------------------------- /sample.js: -------------------------------------------------------------------------------- 1 | // sample.js 2 | 3 | var myList = { 4 | objectOne: { item1: { objname: "details9"} }, 5 | objectTwo: { itemYes: { anothername: "details123"}, itemTwo: { test: "details444"}, itemHello: { hello: "details666"} } 6 | }; 7 | 8 | var printList = []; 9 | 10 | function getObjValues(obj){ 11 | var result = []; 12 | Object.keys(obj).forEach(function (key) { 13 | if(Object.keys(obj[key]) !== 0){ 14 | result.push(getObjValues(obj[key])); 15 | } 16 | }); 17 | return result; 18 | } 19 | 20 | function listAllValues(o){ 21 | var objectToInspect = o; 22 | var result = []; 23 | 24 | for(var key in objectToInspect) { 25 | var nestedObj = myList["objectTwo"][key]; 26 | for(key in nestedObj){ 27 | var objValue = nestedObj[key]; 28 | } 29 | result.push(objValue); 30 | }; 31 | 32 | return result; 33 | } 34 | 35 | printList = listAllValues(myList["objectTwo"]); 36 | 37 | console.log(getObjValues(myList["objectTwo"])); 38 | 39 | // console.log(printList); -------------------------------------------------------------------------------- /js/console-fixed.js: -------------------------------------------------------------------------------- 1 | /*jshint strict: true */ 2 | // var kaApp = kaApp || {}; 3 | (function(document, $){ 4 | 'use strict'; 5 | 6 | var totalFunctionsCalled = 0; 7 | 8 | var myArray = [ 'Hank', 'Jesse', 'Walter' ]; 9 | //myArray = []; //break assertion 10 | // console.log('start of function'); 11 | // console.log('myArray length is: ' + myArray.length); 12 | 13 | console.assert(myArray.length !== 0,'testStrict has no properties, myArray = ' + myArray.length); 14 | 15 | function firstFunction(){ 16 | totalFunctionsCalled++; 17 | secondFunction(); 18 | 19 | } 20 | 21 | function secondFunction(){ 22 | totalFunctionsCalled++; 23 | thirdFunction(); 24 | } 25 | 26 | function thirdFunction(){ 27 | totalFunctionsCalled++; 28 | fourthFunction(); 29 | } 30 | 31 | function fourthFunction(){ 32 | totalFunctionsCalled++; 33 | } 34 | 35 | // call firstFunction; start the chain of events 36 | firstFunction(); 37 | 38 | })(window.document, jQuery); 39 | 40 | 41 | /* ---- Snippets -------- */ 42 | 43 | 44 | -------------------------------------------------------------------------------- /console.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Console 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 | 15 |

The Console

16 |
17 |
18 |
19 |
20 |
21 |

22 | 23 | 24 |

25 |
26 |
27 |
28 | 29 | 30 | 31 |
32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Debugging Javascript 7 | 8 | 9 | 10 | 11 |
12 |
13 | 14 |

Breakpoints

15 |
16 |
17 |
18 |
19 |
20 |
    21 |
  1. 22 | Place a breakpoint inside the 23 | function "firstFunction" in 24 | "js/breakpoints.js". 25 |
    2. 26 |
27 |
28 |
29 |
30 |

31 | 34 |

35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /js/console.js: -------------------------------------------------------------------------------- 1 | /*jshint strict: true */ 2 | (function (document, $) { 3 | "use strict"; 4 | console.log("-------- CODE STARTS -----------"); 5 | 6 | // now = 'The time is now!!!'; // breaks in strict mode 7 | var totalFunctionsCalled = 0; 8 | 9 | var myArray = ["Hank", "Jesse", "Walter"]; 10 | 11 | function firstFunction() { 12 | console.log("firstFunction called!"); 13 | totalFunctionsCalled++; 14 | secondFunction(); 15 | } 16 | 17 | function secondFunction() { 18 | console.log("secondFunction called!"); 19 | totalFunctionsCalled++; 20 | $.getJSON("data/data.json", function (data) { 21 | var items = []; 22 | var className = ""; 23 | $.each(data, function (i) { 24 | className = i === 4 ? "highlight" : ""; 25 | items.push( 26 | '
  • ' + 31 | data[i].name + 32 | "
    • " 33 | ); 34 | }); 35 | 36 | $("