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
/** @jsxImportSource https://esm.sh/hono@latest/jsx **/
import { Hono } from "https://esm.sh/hono@3.10.2";
// last stable version is 61
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 extremely effective way to find and fix bugs. Debugging is a learning process - you are about to learn more ab
<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?" You want the smallest, simplest test case possible that reproduces the bug. The smaller it is, the quicker you will be able to debug it.</p>
</li>
<li>
<h3>Narrow the search space</h3>
<p>""How can I narrow down to the code that could cause this problem?" Tracing through the whole program is not feasible. Instead, consider:
Using your intuition as a starting point. Did you change a function recently? Are there any likely culprits?
Put console.log at significant point of the program so I can see what’s happening. Ideally, I can spot the problematic code is from that. If not, put console.log at places like half way through the code to get closer to the bug.
Console logs being truncated. Check if I need everything in the log and maybe split the log into multiple parts."
If you're in GitHub you can use binary search to more easily find the last working version. The explanation is <a href="https://stackoverflow.com/a/4714297">here</a>.</p>
</li>
<li>
<h3>Analyze</h3>
<p>"What information can I gather from this identified code?" Now use consoles.log so I can mentally follow along. Inspect the values of variables and flow of control, and draw pictures. Try externalizing by writing out what I think should be h
</li>
<li>
<h3>Devise and run experiments</h3>
<p>Devise and run experiments. "How can I check my hypotheses about the issue?" Make inferences about the root cause and run experiments to validate your hypothesis. Iterate until you identify the root cause.</p>
</li>
<li>
<h3>Modify code to squash the bug</h3>
<p>"How can I fix the issue, and confirm that the fix works?" The fix should be validated by your experiments and passing the original failed test case. You should be able explain the series of facts, tests, and deductions which match the obser
</li>
</ol>
<ul>
<li>Do not change your code haphazardly. As a scientist, you should change only one variable at a time while experimenting. This ensures you can fully understand the program behavior and causes at every step.</li>
<li>Good style means easier debugging. Anything that helps you navigate and understand your code is key to efficient debugging.
.</li>
<li>Thorough testing helps uncover bugs. You can never reach step 1 if you are unaware of lurking issues!</li>
</ul>
<p>
<a href="https://val.town/v/willthereader/Debugging_Guide">View Source</a>
</p>
<footer>
<p>I took the checklist from <a href="https://web.stanford.edu/class/cs107/resources/debugging.html">here</a> and made minor tweaks so it works for Val Town.</p>
</footer>
</body>
</html>`;
return c.html(html);
};
const app = new Hono();
app.get("/", Debugging_Guide);
export default app.fetch;