[ Professor JavaScript ] Part 3: How to Debug JavaScript Codes
It is additional online learning material for Professor JavaScript YouTube channel, Part 3: How to Debug JavaScript Codes
Professor JavaScript is a JavaScript online learning courses YouTube Channel. Students can learn how to develop codes with JavaScript from basic to advanced levels through the online courses in this YouTube channel.
It is additional online learning material for Professor JavaScript YouTube channel, Part 3: How to Debug JavaScript Codes.
Read also: [ Professor JavaScript ] Part 2: JavaScript Related Organizations and Communities
Making code errors is unavoidable during coding. Therefore it is important we know how to debug our JavaScript codes to find out the cause of the code errors.
There are two ways we can debug our JavaScript codes with our web browsers only.
The First Way: Debugging With console.log()
By this way, we can debug by adding console.log() code before and/or after the code line we want to monitor. Let’s see the example codes:
<!DOCTYPE html>
<html>
<body><h1>Debugging JavaScript codes</h1>
<p id=”testing8"></p>
<script>
var text = “”;
var i;
for (i = 1; i < 11; i++) {
text += i.toString() + “<br>”;
document.getElementById(“testing8”).innerHTML = text;
console.log(text);
}</script>
</body>
</html>
Source code file: [ Part: 3 — How to Debug JavaScript Codes ] Debugging With console.log()
To test this code example live, you can visit this page.
The Second Way: Debugging With Developer Tool of Web Browser
I suggest you to use this way to debug your JavaScript codes because we can code cleanly without writing and deleting too many console.log() codes on our JavaScript codes.
Let’s see the example codes:
<!DOCTYPE html>
<html>
<body><h1>Debugging JavaScript codes</h1>
<p id=”testing8"></p>
<script>
var text = “”;
var i;
for (i = 1; i < 11; i++) {
text += i.toString() + “<br>”;
document.getElementById(“testing8”).innerHTML = text;
}</script>
</body>
</html>
Source code file: [ Part: 3 — How to Debug JavaScript Codes ] Debugging With Developer Tool
To test this code example live, you can visit this page.
This online learning course is written by Roby Widjaja ( the owner and content creator of Professor JavaScript YouTube Channel ).