You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/1/en/part1d.md
+10-10Lines changed: 10 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -288,7 +288,7 @@ The solution does not quite work:
288
288
289
289

290
290
291
-
For some reason the total of button presses is all the time one behind the actual amount of presses.
291
+
The total number of button presses is consistently one less than the actual amount of presses, for some reason.
292
292
293
293
Let us add couple of console.log statements to the event handler:
294
294
@@ -311,7 +311,7 @@ The console reveals the problem
311
311
312
312

313
313
314
-
Even though a new value was set to_left_ by calling _setLeft(left + 1)_, the old value is still there despite the update! Because of this, the following attempt to count button presses produces a too small result:
314
+
Even though a new value was set for_left_ by calling _setLeft(left + 1)_, the old value persists despite the update. As a result, the attempt to count button presses produces a result that is too small:
315
315
316
316
```js
317
317
setTotal(left + right)
@@ -478,7 +478,7 @@ If and when your code fails to compile and your browser lights up like a Christm
478
478

479
479
480
480
don't write more code but rather find and fix the problem **immediately**. There has yet to be a moment in the history of coding where code that fails to compile would miraculously start working after writing large amounts of additional code. I highly doubt that such an event will transpire during this course either.
481
-
481
+
482
482
Old-school, print-based debugging is always a good idea. If the component
483
483
484
484
```js
@@ -505,25 +505,25 @@ const Button = (props) => {
505
505
506
506
This will immediately reveal if, for instance, one of the attributes has been misspelled when using the component.
507
507
508
-
**NB** When you use _console.log_ for debugging, don't combine _objects_ in a Java-like fashion by using the plus operator. Instead of writing:
508
+
**NB** When you use _console.log_ for debugging, don't combine _objects_ in a Java-like fashion by using the plus operator:
509
509
510
510
```js
511
511
console.log('props value is '+ props)
512
512
```
513
-
514
-
Separate the things you want to log to the console with a comma:
513
+
514
+
If you do that, you will end up with a rather uninformative log message:
515
515
516
516
```js
517
-
console.log('props value is', props)
517
+
props value is [object Object]
518
518
```
519
519
520
-
If you use the Java-like way of concatenating a string with an object, you will end up with a rather uninformative log message:
520
+
Instead, separate the things you want to log to the console with a comma:
521
521
522
522
```js
523
-
props value is [object Object]
523
+
console.log('props value is', props)
524
524
```
525
525
526
-
Whereas the items separated by a comma will all be available in the browser console for further inspection.
526
+
In this way, the separated items will all be available in the browser console for further inspection.
527
527
528
528
Logging output to the console is by no means the only way of debugging our applications. You can pause the execution of your application code in the Chrome developer console's <i>debugger</i>, by writing the command [debugger](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger) anywhere in your code.
0 commit comments