Public
HTTP
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
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
/** @jsxImportSource https://esm.sh/hono@latest/jsx **/
import { Hono } from "https://esm.sh/hono@3.10.2";
console.log("[Init] Starting Debugging_Guide val", new Date().toISOString());
export const Debugging_Guide = (c: any) => {
const html = `<!DOCTYPE html>
<html lang="en">
<head>
<title>Debugging Guide</title>
<style>
body {
font-family: system-ui, sans-serif;
margin: auto;
padding: 20px;
max-width: 65ch;
line-height: 1.5;
}
h1, h2, h3 { font-weight: 500; }
a { color: #0077aa; }
nav a { margin-right: 10px; }
</style>
</head>
<body>
<nav>
<a href="https://willkrouse.com/">Home</a>
<a href="/projects">Projects</a>
<a href="https://twitter.com/Willthereader">Twitter</a>
<a href="https://github.com/wkrouse">Github</a>
</nav>
<h1>Debugging Checklist</h1>
<p>The classic "print-statement-debugging" techniques may work for simpler cases, but quickly get unmanageable. The checklist below is an effective way to find and fix bugs.</p>
<ol>
<li>
<h3>Observe the bug</h3>
<p>"What makes me think there is a problem?"</p>
</li>
<li>
<h3>Create a reproducible input</h3>
<p>"How can I reliably reproduce this problem?"</p>
</li>
<li>
<h3>Narrow the search space</h3>
<p>"How can I narrow down to the code that could cause this problem?"</p>
</li>
<li>
<h3>Analyze</h3>
<p>"What information can I gather from this identified code?"</p>
</li>
<li>
<h3>Devise and run experiments</h3>
<p>"How can I check my hypotheses about the issue?"</p>
</li>
<li>
<h3>Modify code to squash the bug</h3>
<p>"How can I fix the issue, and confirm that the fix works?"</p>
</li>
</ol>
<h2>Additional Tips</h2>
<ul>
<li>Change only one variable at a time while experimenting.</li>
<li>Good style means easier debugging.</li>
<li>Thorough testing helps uncover bugs.</li>
</ul>
<p>
<a href="https://val.town/v/willthereader/Debugging_Guide">View Source</a>
</p>
</body>
</html>`;
return c.html(html);
};
const app = new Hono();
app.get("/", Debugging_Guide);
export default app.fetch;