-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
67 lines (55 loc) · 4.69 KB
/
index.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
<!DOCTYPE html>
<html>
<!-- CS559 Workbook Pages - page content © 2021, Michael Gleicher -->
<!-- This page is part of a Workbook developed for the
CS559 Computer Graphics Class at the University of Wisconsin
https://graphics.cs.wisc.edu/Courses/559-sp2021/ -->
<head>
<meta name="generator" content="Hugo 0.108.0">
<meta charset="UTF-8">
<link rel="stylesheet" href="./css/workbook.css">
<script src="./js/resizeIFrames.js"></script>
</head>
<body>
<div class="container container--outer"><div class="maincolumn">
<main class="main list" role="main">
<header class="main__header">
<h1 class="main__title">Debugger Workbook: A Tutorial on using the VS Code Debugger</h1>
</header>
<div class="content main__content clearfix">
<h2 id="visual-studio-code-debugger-tutorial">Visual Studio Code Debugger Tutorial</h2>
<p><em>Written Jan, 2021 by Gia-Phong Nguyen with help from the CS559 Course Staff. It was updated for 2022 by Hyojoon Park and the CS559 Course Staff. It was updated in 2023 by Ruohui Wang and the CS559 Course Staff.</em></p>
<p>You will probably want to use some debugger for class. The programs are complex enough that you are likely to need a debugger. Print statement debugging (<code>console.log</code> in JavaScript) is not going to be sufficient. One option is to simply use the debugger built into the web browser Chrome and FireFox have excellent debuggers built in. See the <a href="https://mediaspace.wisc.edu/media/Chrome+Debugger+Quick+Start+for+CS+559+%282019%29/1_77oepxqr" target="_blank">Chrome Debugger Quick Start for CS 559 (2019 Video)</a> for help getting started. However, if you are using Visual Studio Code (that we recommend for class!) having the debugger integrated into your editor can be very helpful. <strong>We strongly recommend that you become familiar with the debugger before you need it for a program.</strong></p>
<p>This tutorial is in the form of a CS559 “Workbook” (see <a href="https://pages.graphics.cs.wisc.edu/559-sp23/pages/workbooks/" target="_blank">Workbooks</a> on the course web).
Unlike the regular workbooks, we will not use GitHub Classroom, and you will not turn it in. It is completely optional, but if you don’t know how to use the Visual Studio debugger, this will help you learn the basics and give you some hands on experience.</p>
<p>This is a short workbook on how to use the debugger for your javascript programs.
It only covers the basics about the debugger.
The Visual Studio Code debugger is well designed, but it does have some quirks and you need to know how to set it up.</p>
<p>While <code>console.log</code> does work, it is quite limited, tedious, messy, and inefficient when
there is a lot to debug. The debugger gives you a lot more control over where to slow down
in your code as well as diplay information more cleanly. The debugger is also not hard to
use once you learn it. In fact, you will probably find it easier than <code>console.log</code>-ing everything once you get the hang of it.</p>
<p>This workbook should show you how to setup the debugger in VS Code as well as how to use it
through some worked examples. Hopefully you will find this helpful throughout the semester and after. If you haven’t used the debugger before, please look through this guide as spending a few minutes learning this could save you hours in the long run.</p>
<p>If you want read the official VS Code debugger documentation, you can go <a href="https://code.visualstudio.com/docs/editor/debugging">here</a></p>
<p><strong>Note:</strong> the JavaScript debugger is now built into VSCode. However, the LiverServer is not - you probably want to make sure the Live Server is installed.</p>
<h3 class="get__started">Get started on
<a href="./docs/1/">Page 1 (Preliminiaries)</a>!</h3>
</div>
</main>
</div>
<div class="sidebar">
<h2 class="Side_Title">Debugger Workbook: A Tutorial on using the VS Code Debugger</h2>
<p class="Side__Note">Pages:</p>
<ul class="Side__List">
<li class="Side__Item Side__Selected">Index (Introduction) </li>
<li class="Side__Item Side__Unselected"> <a href="./docs/1/">1: Preliminiaries </a></li>
<li class="Side__Item Side__Unselected"> <a href="./docs/2/">2: Getting Started </a></li>
<li class="Side__Item Side__Unselected"> <a href="./docs/3/">3: Stepping </a></li>
<li class="Side__Item Side__Unselected"> <a href="./docs/4/">4: Conditional Statements </a></li>
<li class="Side__Item Side__Unselected"> <a href="./docs/5/">5: Tracking Values </a></li>
</ul>
</div>
</div>
</body>
</html>