ericlathrop/README.md

## README.md

      
    Raw
  

              README.md
            
          
    JavaScript Debugging using the Browser Dev Tools

Figuring out the root cause of a bug is often the hardest part of fixing it. Eric Lathrop will show how to use your browser's built-in developer tools to track down bugs so you can fix them.
Watch a video of the presentation on YouTube

How to run examples:


git clone https://github.com/TwoScoopGames/Cluster-Junk.git
cd Cluster-Junk
git checkout ed47c187149d06104d3fa3eca7259b4efb9d2719
npm install
Download attached file cluster-junk-bugs.patch
git apply <cluster-junk-bugs.patch
npm start
Open http://localhost:4000
Open your browser's developer tools (Usually the F12 key on PCs)

So you have a problem...


Complex app with complex problems.
Not every bug is a crash
Admiral Grace Hopper


Approaches


console.log / println
interactive debugger

console.log


Divide and Conquer
Logging complex objects

Example: rain doesn't draw
Stack Traces


How does a computer know where to return?
Think of a stack of plates

Example: stacktrace.html
Example: crash when you click to start game
Interactive Debugging

Pause the program, and look at the variables.

breakpoints
debugger;
step in/over/out
watch expressions

Example: waves should be offset every other row

  
## cluster-junk-bugs.patch
diff --git a/src/systems/renderer/rain.js b/src/systems/renderer/rain.js
index d3918ef..f1028c1 100644
--- a/src/systems/renderer/rain.js
+++ b/src/systems/renderer/rain.js
@@ -19,7 +19,7 @@ function drawDrop(context, drop) {
   context.lineWidth = drop.thickness;
   context.beginPath();
   context.moveTo(drop.position.x, drop.position.y);
-  context.lineTo(drop.position.x + drop.length, drop.position.y - random.inRange(drop.length + 2, drop.length + 4));
+  context.lineTo(drop.position.x2, drop.position.y2);
   context.stroke();
 }

diff --git a/src/systems/renderer/tile-background.js b/src/systems/renderer/tile-background.js
index 424f985..73698c0 100644
--- a/src/systems/renderer/tile-background.js
+++ b/src/systems/renderer/tile-background.js
@@ -25,7 +25,7 @@ module.exports = function(ecs, game) {
     var startY = (startRow - 1) * rowHeight;

     for (var y = startY; y <= cameraPosition.y + cameraSize.height; y += rowHeight) {
-      var even = Math.floor(y / rowHeight) % 2;
+      var even = Math.floor(y / rowHeight);
       var offset = y / rowHeight % rowsBeforeRepeat * rowsOffset;
       var waveY = y + Math.sin(time / wavePeriod * Math.PI * 2 + offset) * waveHeight;

diff --git a/src/systems/simulation/skip-intro.js b/src/systems/simulation/skip-intro.js
index 771c654..6242895 100644
--- a/src/systems/simulation/skip-intro.js
+++ b/src/systems/simulation/skip-intro.js
@@ -3,7 +3,7 @@
 module.exports = function(ecs, game) { // eslint-disable-line no-unused-vars
   ecs.addEach(function skipIntro(entity, elapsed) { // eslint-disable-line no-unused-vars
     if (game.inputs.buttonPressed("action")) {
-      game.switchScene("title");
+      game.switchScene("titl");
     }
   }, "camera");
 };

## stacktrace.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Stack Trace Example</title>
	</head>

	<body>
		<script>
			function a() {
				return 2 * b();
			}

			function b() {
				return c() + 1;
			}

			function c(input) {
				throw new Error("something broke!");
			}

			a();
		</script>
	</body>
</html>
	diff --git a/src/systems/renderer/rain.js b/src/systems/renderer/rain.js
	index d3918ef..f1028c1 100644
	--- a/src/systems/renderer/rain.js
	+++ b/src/systems/renderer/rain.js
	@@ -19,7 +19,7 @@ function drawDrop(context, drop) {
	context.lineWidth = drop.thickness;
	context.beginPath();
	context.moveTo(drop.position.x, drop.position.y);
	- context.lineTo(drop.position.x + drop.length, drop.position.y - random.inRange(drop.length + 2, drop.length + 4));
	+ context.lineTo(drop.position.x2, drop.position.y2);
	context.stroke();
	}

	diff --git a/src/systems/renderer/tile-background.js b/src/systems/renderer/tile-background.js
	index 424f985..73698c0 100644
	--- a/src/systems/renderer/tile-background.js
	+++ b/src/systems/renderer/tile-background.js
	@@ -25,7 +25,7 @@ module.exports = function(ecs, game) {
	var startY = (startRow - 1) * rowHeight;

	for (var y = startY; y <= cameraPosition.y + cameraSize.height; y += rowHeight) {
	- var even = Math.floor(y / rowHeight) % 2;
	+ var even = Math.floor(y / rowHeight);
	var offset = y / rowHeight % rowsBeforeRepeat * rowsOffset;
	var waveY = y + Math.sin(time / wavePeriod * Math.PI * 2 + offset) * waveHeight;

	diff --git a/src/systems/simulation/skip-intro.js b/src/systems/simulation/skip-intro.js
	index 771c654..6242895 100644
	--- a/src/systems/simulation/skip-intro.js
	+++ b/src/systems/simulation/skip-intro.js
	@@ -3,7 +3,7 @@
	module.exports = function(ecs, game) { // eslint-disable-line no-unused-vars
	ecs.addEach(function skipIntro(entity, elapsed) { // eslint-disable-line no-unused-vars
	if (game.inputs.buttonPressed("action")) {
	- game.switchScene("title");
	+ game.switchScene("titl");
	}
	}, "camera");
	};
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Stack Trace Example</title>
	</head>

	<body>
	<script>
	function a() {
	return 2 * b();
	}

	function b() {
	return c() + 1;
	}

	function c(input) {
	throw new Error("something broke!");
	}

	a();
	</script>
	</body>
	</html>