-
Notifications
You must be signed in to change notification settings - Fork 5
/
devTool.jade
88 lines (65 loc) · 1.91 KB
/
devTool.jade
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
extends base
block vars
- var title = 'Console Tool Trick'
block styles
link(rel="stylesheet" type="text/css" href="styles/devTool.css")
block body
p(onClick="makeGreen()") xBREAKxDOWNx
h2 Dev Tools Trick
p check console for values
script(type="text/javascript").
const dogs = [
{ name: 'Snickers', age: 2 },
{ name: 'hugo', age: 8 }
]
//- Get JS execution => Right-Click Node elem, select `Break On` on ctx menu.
function makeGreen() {
const $p = document.querySelector('p')
$p.style.color = '#BADA55'
$p.style.fontSize = '50px'
}
// Clearing
console.clear()
// Regular
console.log('Hi Again!')
// Interpolated
console.log('Hello I am an %s', '👽')
// Styled
console.log('%c I am an Alien', 'font-size: 50px; text-shadow: 10px 10px 0 #00F')
// warning!
console.warn('Oh NOOO')
// Error :|
console.error('Shit!')
// Info
console.info('Humans will stab you! 🔪')
// Testing
const $p = document.querySelector('p')
console.assert($p.classList.contains('ouch'), 'That\'s wrong')
// Viewing DOM Elements
console.log($p)
console.dir($p)
// Grouping together
dogs.forEach(dog => {
console.groupCollapsed(`${dog.name}`)
console.log(`This is ${dog.name}`)
console.log(`${dog.name} is ${dog.age} years old`)
console.log(`${dog.name} is ${dog.age * 7} dog years old`)
console.groupEnd(`${dog.name}`)
})
// Counting
console.count('Akinjide')
console.count('Akinjide')
console.count('Steve')
console.count('Akinjide')
console.count('Steve')
console.count('Akinjide')
// Timing
console.time('fetching data')
fetch('https://api.github.com/users/akinjide')
.then(blob => blob.json())
.then(data => {
console.timeEnd('fetching data')
console.log(data)
})
// Table
console.table(dogs)