The debug APIs that probably you don’t know

Lighting talk for MilanoJS 02-05-2017

Transcript

1. Agostino Marzotta THE DEBUG API THAT PROBABLY YOU DON’T KNOW 1
2. 2 COMMON PATTERN var names = [ { firstName: "John”, lastName: "Smith" }, { firstName: "Jane", lastName: "Doe" } ]; console.log(names); >[Object, Object]
4. 4 var names = [ { firstName: "John”, lastName: "Smith" }, { firstName: "Jane", lastName: "Doe" } ]; table(names); BETTER SOLUTION
5. 5 function Person(firstName, lastName, age) { this.firstName = firstName; this.lastName = lastName; this.age = age; } var family = {}; family.mother = new Person("Susan", "Doyle", 32); family.father = new Person("John", "Doyle", 33); family.daughter = new Person("Lily", "Doyle", 5); family.son = new Person("Mike", "Doyle", 8); console.table(family, ["firstName", "lastName", "age"]); AVANCED EXAMPLE
6. console.table() • Disponibile sia in console che come API • Standard (chrome, FF, safari, Edge) • Fino a 1000 righe (FF) • Utile con array e mappe, meno con oggetti complessi • Da qualche anno ormai i devTools spacchettano Object 6
7. 7 const name = "Bob" for (let i=0; i<5; i++) { console.log("Hello, " + name +". You've called me " + i+1 + " times."); } [13:14:13.481] Hello, Bob. You've called me 1 times. [13:14:13.483] Hello, Bob. You've called me 2 times. [13:14:13.485] Hello, Bob. You've called me 3 times. [13:14:13.487] Hello, Bob. You've called me 4 times. [13:14:13.488] Hello, Bob. You've called me 5 times. COMMON PATTERN
8. 8 const name = "Bob" for (let i=0; i<5; i++) { console.log("Hello, %s. You've called me %d times.", name, i+1); } [13:14:13.481] Hello, Bob. You've called me 1 times. [13:14:13.483] Hello, Bob. You've called me 2 times. [13:14:13.485] Hello, Bob. You've called me 3 times. [13:14:13.487] Hello, Bob. You've called me 4 times. [13:14:13.488] Hello, Bob. You've called me 5 times. BETTER SOLUTION
9. Printf like syntax • Ie 8+ • Comoda anche se ora ci sono le template strings 9
10. 10 const name = "Bob" for (let i=0; i<5; i++) { console.count("Hello ${name} . You've called "); } [13:14:13.481] Hello, Bob. You've called: 1 [13:14:13.483] Hello, Bob. You've called: 2 [13:14:13.485] Hello, Bob. You've called: 3 [13:14:13.487] Hello, Bob. You've called: 4 [13:14:13.488] Hello, Bob. You've called: 5 DIFFERENT SOLUTION
11. console.count() • Ie 9+ • Conta le volte che è stata chiamata con una particolare label 11
12. 12 const arrayInitTime = new Date().getTime(); let array= new Array(1000000); for (let i = array.length - 1; i >= 0; i--) { array[i] = new Object(); }; const arrayEndTime = new Date().getTime() - arrayInitTime ; console.log(` Array initialize: ${arrayEndTime } `) COMMON PATTERN
13. 13 console.time("Array initialize"); let array= new Array(1000000); for (let i = array.length - 1; i >= 0; i--) { array[i] = new Object(); }; console.timeEnd("Array initialize"); BETTER SOLUTION
14. console.time • Ie 11+ • Bonus: mostra la linea della conosole in chrome 14
15. MARK IN DEVTOOLS 15
16. 16 console.timeStamp("Array initialize"); let array= new Array(1000000); for (let = array.length - 1; i >= 0; i--) { array[i] = new Object(); }; console.timeStamp("Array initialize end"); MARK IN DEVTOOLS
17. 17 Console.timeStamp(label)
18. 18 console.profile("Array initialize"); let array= new Array(1000000); for (let = array.length - 1; i >= 0; i--) { array[i] = new Object(); }; console.profile("Array initialize end"); CAN ALSO PROFILE
19. Altre funzioni utili • console.group()/groupEnd() • console.assert() 19
20. Solo via CLI • monitorEvents() • unmonitorEvents() • getEventListeners() • $() = document.querySelector() • $$() = document.querySelectorAll() • $x() • $_ / $0 - 4 • Inspect() 20
21. EDSGER DIJKSTRA If debugging is the process of removing software bugs, then programming must be the process of putting them in. “ “ 21
22. AGOSTINO MARZOTTA 22 THANKS FOR LISTENING
23. 23 • https://developer.mozilla.org/en-US/docs/Web/API/Console • https://developers.google.com/web/tools/chrome-devtools/console/ REFERENCES
24. • Ci permette • di dare un peso alle vulnerabilità TEST 24