-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlog-debugger.html
105 lines (87 loc) · 2.47 KB
/
log-debugger.html
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!doctype html>
<html lang="en" data-theme="dark">
<head>
<meta charset="utf-8">
<title>Log/debugger</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="icon.png">
<link rel="stylesheet" href="css/pico.css">
<link rel="stylesheet" href="css/main.css">
<style>
#modal {
position: absolute;
top: 100px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 400px;
background-color: #334e61;
padding: 20px;
text-align: center;
}
#hand {
position: absolute;
left: 80px;
top: 39px;
width: 200px;
}
</style>
</head>
<body>
<main class="container">
<section>
<h1><b>Orthodox</b> ways to debug JS</h1>
<p>Easy to use, works with the code that you can access</p>
<article>
<h2>
<code><s>console</s>.<u>log()</u>;</code>
</h2>
<p>Everybody uses it.</p>
<h2>
<code><b>debugger</b>;</code>
</h2>
<p>Allows to break on a specific line in code that you control.</p>
<h2>Trick of the day:</h2>
<code><u>setTimeout</u>(() => { <b>debugger</b>; }, <i>3000</i>);</code>
in the browser's console
<br><br>
<p>Helps to debug <a id="modal-btn">auto closing modals</a> or dropdowns</p>
</article>
<div class="grid">
<a href="index.html">
<button class="secondary">Back</button>
</a>
<div><!--spacer--></div>
<a href="breakpoints.html">
<button>Easy, next!</button>
</a>
</div>
</section>
</main>
<article id="modal">
<h1>Nice modal bro</h1>
<img src="img/cheems-doge-png.png" alt="cheems doge" style="width: 400px">
<img id="hand" src="img/hand.png" alt="a hand" style="display: none">
<button id="pet-btn" onclick="hand.style.displey = ''">Pet Cheems</button>
</article>
<script>
const modalButton = document.getElementById('modal-btn');
const modal = document.getElementById('modal');
const hand = document.getElementById('hand');
modal.parentElement.removeChild(modal);
modalButton.onclick = () => {
document.body.appendChild(modal);
}
document.onmouseleave = () => {
if (modal.parentElement) {
document.body.removeChild(modal);
}
}
</script>
<footer class="container">
WebCore 2021
</footer>
<script src="js/mode-switch.js"></script>
</body>
</html>