Using DevTools Console
- Always have the DevTools console open when debugging.
- In the console, errors that need to be fixed show up in red while warnings (which don't need to be fixed immediately) show up in yellow.
- The
Failed to load resource: net::ERR_FILE_NOT_FOUNDmeans that a file can't be found. This can occur because there's the file doesn't exist, it's in a different directory than the one we specified, or its in the correct place but the name doesn't match the name specified.
Pausing on Exceptions
- You can check the pause on exceptions by clicking on the Sources tab and then clicking the button on the top right that looks like an octagon with a pause button. (The octagon will turn blue.) Check the checkbox that reads "Pause on caught exceptions" below the octagon.
- You can change the position of the DevTools dock by clicking the three vertical dots in the upper right corner and clicking the Dock side icon of your choice.
- Pausing on exceptions pauses the code whenever an exception is thrown. This can help us find errors in our code.
- A stack trace traces where an error comes from. We can see the stack trace of an exception below the "Pause on caught exceptions" option.
- You can resume execution of code by clicking on the little blue arrow. A single click takes you to the next caught exception. Alternatively, you can click on the little arrow just below the blue arrow and click "Play" to complete execution of the code without pausing on other exceptions.
- If jQuery or another external library throws an exception, you can right click on the script in the "Sources" pane and select "Blackbox Script." DevTools will no longer pause on caught exceptions in this script. This is especially useful with jQuery. To undo this, right click the script and click "Stop blackboxing."
- You should use the "Pause on Exception" option only when we need it - otherwise, your code will pause even on exceptions that aren't helpful for debugging (such as errors in the source code of libraries you are working with).
Debugging Using console.log()
-
console.log()allows us to log messages in the DevTools console. It can be helpful for making sure code is reached or checking the value of variables. - Don't forget that the default behavior of the
submit()method is to load a new page. We don't want to do that so we need to useevent.preventDefault()to prevent that behavior. - We can tell that our application has attempted to make a GET request to a server (and to reload the page) if a
?is added to the end of the URL. - If you add
console.log()statements directly to your code, make sure to remove them after you are done. Otherwise, your code will look sloppy. - While
console.log()is a useful tool, don't overuse it. Adding breakpoints and other debugging tools are generally more effective.
Using debugger
- The debugger tool freezes execution of our code wherever we add a
debugger;statement or a breakpoint. - The best way to add a breakpoint is to go to the DevTools Sources tab, click on the file you want to add a breakpoint to (in the left pane of DevTools), and then click on the line number in the source code to add a red dot (a breakpoint).
- The breakpoint will pause execution of the code as soon as it's reached, so it should be added to the line after the one you want to evaluate and debug.
- We can also make changes directly to the code in the Sources tab. This allows us to experiment without needing to change our actual code in Visual Studio Code.
- We can click "Resume Execution" (the blue arrow) to go to the next breakpoint.
- When our code is paused, we can go to the DevTools console and access any variables in our current scope. We can even write and run statements that use those variables.
- Make sure to familiarize yourself with this tool. It's one of the most important debugging tools at our disposal.
Examples
Example calculator HTML:
calculator.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Calculator</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<script src="js/jquery-3.5.1.js"></script>
<script src="js/scripts.js"></script>
</head>
<body>
<div class="container">
<h1>Calculator</h1>
<form id="add">
<div class="form-group">
<label for="add1">1st number:</label>
<input id="add1" class="form-control" type="text">
</div>
<div class="form-group">
<label for="add2">2nd number:</label>
<input id="add2" class="form-control" type="text">
</div>
<button type="submit" class="btn">Add!</button>
</form>
<div id="output">
</div>
</div>
</body>
</html>
Example calculator JavaScript, including both business and user interface logic:
js/scripts.js
// This is the business logic:
const add = function(number1, number2) {
return number1 + number2;
};
const subtract = function(number1, number2) {
return number1 - number2;
};
const multiply = function(number1, number2) {
return number1 * number2;
};
const divide = function(number1, number2) {
return number1 / number2;
};
// Everything below this line is the user interfacelogic:
$(document).ready(function() {
$("form#add").submit(function(event) {
event.preventDefault();
const number1 = parseInt($("#add1").val());
const number2 = parseInt($("#add2").val());
const result = add(number1, number2);
$("#output").text(result);
});
});
Tips
- Always link any scripts files that use jQuery after you link the jQuery library itself. Otherwise your application won't know how to handle jQuery code, since it doesn't even know what jQuery is.
Top comments (0)