Javascript Debugging line by line using Google Chrome

Asked
Active3 hr before
Viewed126 times

6 Answers

usingjavascript
90%

Select your JavaScript file,Click the little folder icon in the top level,Select the Scripts, or Sources, tab in the developer tools,Add a breakpoint by clicking on the line number on the left (adds a little blue marker)

load more v
88%

Step 3: Pause the code with a breakpoint,Step 2: Get familiar with the Sources panel UI,Step 1: Reproduce the bug,Step 4: Step through the code

A common method for debugging a problem like this is to insert a lot of console.log() statements into the code, in order to inspect values as the script executes. For example:

function updateLabel() {
   var addend1 = getNumber1();
   console.log('addend1:', addend1);
   var addend2 = getNumber2();
   console.log('addend2:', addend2);
   var sum = addend1 + addend2;
   console.log('sum:', sum);
   label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}

Back on the demo, click Add Number 1 and Number 2 again. DevTools pauses the demo and highlights a line of code in the Sources panel. DevTools should be paused on this line of code:

function onClick() {

On the Sources panel of DevTools, click Step into next function call to step through the execution of the onClick() function, one line at a time. DevTools highlights the following line of code:

if (inputsAreEmpty()) {

Look at the last line of code in updateLabel():

label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
load more v
72%

We’ll be using Raygun Crash Reporting to find the stack trace and the line of code the error occurred on. You can sign up for a free 14-day trial here.,2. Analyze the report in Raygun Crash Reporting,Error reports that come into Raygun contain plenty of information that you can use to find and fix the error, so let’s have a look at what we’re dealing with.,Now you’ve navigated to where your error happened we need to examine the state of the application and figure out what’s causing the error.

var saveButton = document.getElementById('saveButton');
var firstNameField = document.getElementById('firstName');
var middleNameField = document.getElementById('middleName');
var lastNameField = document.getElementById('lastName');

function onSaveButtonClick() {
   var firstName = firstNameField.value;
   var middleName = middleNameField.value;
   var lastName = lastNameField.value;

   // capitalise the names
   firstName = capitalizeString(firstName);
   middleName = capitalizeString(middleName);
   lastName = capitalizeString(lastName);

   doSave(firstName, middleName, lastName);
}

function capitalizeString(value) {
   return value.split('')[0].toUpperCase() + value.slice(1);
}

function doSave(firstName, middleName, lastName) {
   alert(firstName + ' ' + middleName + ' ' + lastName + ' has been saved!');
}

saveButton.addEventListener('click', onSaveButtonClick);
load more v
65%

We’ll be using Chrome here, because it has enough features, most other browsers have a similar process.,The information from this chapter is enough to begin debugging, but later, especially if you do a lot of browser stuff, please go there and look through more advanced capabilities of developer tools.,Your Chrome version may look a little bit different, but it still should be obvious what’s there.,We can always find a list of breakpoints in the right panel. That’s useful when we have many breakpoints in various files. It allows us to:

function hello(name) {
   let phrase = `Hello, ${name}!`;

   debugger; // <-- the debugger stops here

   say(phrase);
}
load more v
75%

Step out of the current function that you are in.,Step through your code line by line.,Step into the next function call.,Continue the execution of your program.

Start by navigating to the project directory and into the part-8 directory:

cd Design - and - Build - a - Chat - Application - with - Socket.io
cd part - 8
load more v
40%

Breakpoints can be used when we want to pause the execution of code at any certain line of code. We can then check what values are stored in any variable at that point of time.,We can set a breakpoint on a certain line of code which is called a 'line-of-code breakpoint.',Based on the assumption of the location of the bug, we can set a breakpoint closer to that part of the code rather than just putting on an event.,Just click on the line number on the left side of the code. The color of that number changes to blue which indicates that the breakpoint is set. Now during the run, the execution will pause at that line-of-code.

Index.html

<!doctype html>
<html>

<head>
   <title>Sample JS to Add two numbers</title>
</head>

<body>
   <h1>Add two numbers</h1>
   <label for="num1">Number 1</label>
   <input id="num1">
   <label for="num2">Number 2</label>
   <input id="num2">
   <button>Add</button>
   <p></p>
   <script src="sample.js"></script>
</body>

</html>
load more v

Other "using-javascript" queries related to "Javascript Debugging line by line using Google Chrome"