IT博客汇 | Debugging JavaScript with Chrome DevTools Breakpoints

Debugging JavaScript with Chrome DevTools Breakpoints

shendao发表于 2016-06-08 22:07:52

Introduction

Debugging JavaScript code can sometimes be a little time consuming. If you are just beginning JavaScript you may find yourself using alert() or window.alert() a couple of times, and if you’ve been writing JavaScript for a little while, you may find yourself using console.log() a number of times.

While these two approaches may work, they usually involve a lot of writing and deleting code, going back and forth between your browser and your editor of choice. Worst case scenario, you may ship your code with them, and consequently share information you may not want to share to users. Most linters however, like eslint , will warn you when you have console.log() statements in your code.

Chrome DevTools

Google Chrome Browser comes with tools (dev tools) that can help us in debugging JavaScript code, among other things. To quickly name a few.

Editing CSS – You can select an element in the browser, e.g a div, right click on it and select inspect element . This opens the dev tools and gives you an option to edit the css on the far right.
Testing performance – The Chrome Dev Tools has a section called network, in which you can see how long it takes to load your application, especially how long assets take to load. You could also test your application in a bandwidth of your choice (3G, GPRS or EDGE). This is called throttling.
Debugging JavaScript – Chrome Dev Tools enables you debug JavaScript code. This is what we will talk about in this article.

Debugging

Make sure you have google chrome installed in your computer. Let’s create a simple web page that takes the value of an input and prints the value a span on click of a button. We have two files:- index.html and app.js

<!-- index.html --> <html lang="en"> <head>   <meta charset="UTF-8">   <title>Chrome Dev Tools</title>   <script src="app.js"></script> </head> <body>   <input type="text" id="name">    <button onclick="getData()">Get Input Data</button><br/>   <span id="dataSpan"></span> </body> </html>

//app.js function getData() {   // Get value of input   var data = document.getElementById('name').value;    // Get dataSpan DOM element   var out = document.getElementById('dataSpan');    // Assign the value of data into dataSpan html   out.innerHTML = data; }

The JavaScript function getData() simply gets the value of the input named name , then gets the dom element named dataSpan , then adds the value from the input into the span.

You can open the index.html file directly in your browser, or if you have nodejs installed simply install httpster with npm install -g httpster then run httpster in the root directory of this project. A simple server will be spin with your app hosted at http://localhost:3333 . Debugging JavaScript with Chrome DevTools Breakpoints

A taste of debugging with Chrome Dev Tools Breakpoints

Suppose we wanted to know the value of var data before we put it into the dataSpan , the old way would be to do a alert(data) just after defining it, or console.log(data) , then run the app in the browser and see the result.

function getData() {  // Get value of input   var data = document.getElementById('name').value;    // check the value of data   // alert(data);   console.log(data);     // Get dataSpan DOM element   var out = document.getElementById('dataSpan');    // Assign the value of data into dataSpan html   out.innerHTML = data; }

We’ll instead use Chrome Dev Tools to check the value using breakpoints. A breakpoint is a section/line of our code where we want the execution to stop so that we can carefully inspect the execution. With the app running in the browser, open Chrome Dev Tools by clicking on the menu at the top right corner, then More Tools > Developer Tools Debugging JavaScript with Chrome DevTools Breakpoints

This opens up Chrome Dev Tools at the bottom of the browser. Select the Sources tab/panel. On the left panel, click on app.js , the JavaScript file that we wrote. Debugging JavaScript with Chrome DevTools Breakpoints

Click on the line number in the middle section with the code var data = document.getElementById('name').value; . It should change color, in my case it’s blue. Notice also that on the far right, the section under Breakpoints changes and includes the name of the file we have selected.

By clicking this line number, we have set a breakpoint on our code at that particular line of code. This means that when the function is run, its execution is supposed to stop where the breakpoint is. We should then be able to execute the code line by line, seeing changes made to our variables.

Enter hello world in the input field and click the button. Debugging JavaScript with Chrome DevTools Breakpoints

Notice a few things:

The dataSpan remained unchanged, which means the code that puts in data into that span tag has not run.
The next execution line has been selected in the middle section of the Chrome Dev Tools
There is an overlay in the browser with a section written Paused in debugger and two buttons afterwards.
- The first button is for resuming the script execution. Clicking it will continue the execution of the script and exit the debugger.
- The next button with a bent arrow pointing downwards is for stepping over the next function call. If we click it, the currently selected line will be executed, and the next line will be selected.
On the far right of the dev tools, getData and onclick have been added to the Call Stack section. The CallStack holds a list of functions that have been called to run our code up to the point we have the breakpoint. Since we clicked the button, the onclick event was raised, which in turn called the getData function.
The Scope section on the far right also has the following section added.
- Local which defines our local scope variable. These are variables which we have defined in our code. So we have data , out and this . this is present since we are running JavaScript in the browser, and it refers to the window object . Notice that at this point during execution, both data and out are undefined since we haven’t assinged them values yet.

Stepping in, Stepping Out, Stepping Over

Stepping in, stepping out and stepping over are common when debugging code using breakpoints. In the bottom right section of the Chrome Dev Tools, you will see a section that will enable you do any of the above actions. Debugging JavaScript with Chrome DevTools Breakpoints The first button with a play-pause-like sign is for resuming execution. It will continue executing our script to the end, unless we have another breakpoint. If this is the case, it will stop at the next breakpoint.

Stepping Over – The next button with a bent arrow pointing downwards and a dot is for stepping over the next function call . This is what you will use most of the time. It simply executes the current line, and stops at the next line.
Stepping Into – The next button with a downward pointing arrow is for stepping into the next function call . This takes the debugger into a function, if that line calls a certain function. E.g if var x = getData() , clicking step into the next function call will take the debugger into the getData function.
Stepping Out – The next button with an upward facing arrow is for stepping out of the current function . In our above example of getData() , clicking this will exit the function immediately and get us back to where it was called.

Click on Step Over next function call . Debugging JavaScript with Chrome DevTools Breakpoints The selected line with the breakpoint is executed and the debugger selects the next. On the far right, in the Scope section, the Local variable data changes to hello world , which is the text we typed into the input box name . This is just a representation of our variables at this line of code. Pressing Step over next function call again, the currently selected line is executed and next line is selected. Debugging JavaScript with Chrome DevTools Breakpoints The value of out in the Local scope changes to a dom element. You can click on the arrow beside it to expand it and view it’s properties. Clicking on Step Over next function call again will add the hello world text to the dataSpan in the browser window.

A little more debugging

Say we wanted to perform a complex JavaScript function, which definitely needs debugging. For instance, we want users to input space separated numbers in the input field, and we will return both the sum and the product of the numbers.

//app.js function getData() {   // Get space separated values from input   var data = document.getElementById('name').value;    // Get dataSpan DOM element   var out = document.getElementById('dataSpan');    // Convert data into an array of string   var nums = data.split(' ');    // Convert nums into an array of numbers   nums = nums.map(Number)    // Instantiate sum and product   var sum = 0;   var product = 1;    // Calculate sum and product   nums.forEach(function(num) {     sum += num;     product *= num   });    //Set text of dataspan to the result of sum and product   var output = 'sum is ' + sum + ' and product is ' + product;   out.innerHTML = data; }

We’ve changed the app.js to look like above. Open the file in the browser and let’s debug it. Debugging JavaScript with Chrome DevTools Breakpoints We’ve set the breakpoint on the line with var data = document.getElementById('name').value; by clicking on the line number. Enter 23 24 e in the input. I’ve included the e to induce an error since we can’t add/mutlipy numbers and alphabets.

Click on the Step Over next function call button

var data is assigned 23 24 e . And updated in the Scope section under Local, and beside the line of code in the middle section of the Chrome Dev Tools.
Clicking Step Over next function call again, splits the string data into an array of strings using the built in split function of JavaScript. Notice that the Scope variable nums is now an array of strings.
Clicking Step Over next function call twice to initialize the sum and the product. They are updated in the scope variables sum and product .
Step Over next function call again, this runs the simple map function to convert all array elements into numbers.

A long version of the function would be

    nums = nums.map(function(value) {         return Number(value);     });

You can read more about the array map function .

By now, the scope on the right shows nums as an array of numbers. However, the last value is a NaN (NotANumber), since we tried to convert the letter ‘e’ into Number. We immediately can tell the our code has a bug. Let’s continue to see what happens.
Clicking Step Over next function call again, Whoa the bug persists, as it has affected both the sum and the product of our numbers. You can see that both the sum and product are now NaN . This tells us immediately that we need to go fix our code.

Another way to add Breakpoints

Sometimes, or most times, you may have a lot of code, probably concatenated into one file. For instace, 1000 lines of code. Setting a breakpoint in the chrome dev tools by clicking on the Line of code may seem unrealistic.

Chrome Dev Tools has a nifty feature for adding breakpoints based on common events that occur in the browser. On the far right of the dev tools, just after the breakpoints section, you will see categories of breakpoints. Debugging JavaScript with Chrome DevTools Breakpoints As you can see above, we’ve set breakpoints at every mouse click event within our script. Clicking on the Get Input Data without setting a manual breakpoint like we did earlier, should stop execution at where the onclick function is, which in this case is in our html file. Debugging JavaScript with Chrome DevTools Breakpoints Clicking Step Over next function call continuously will take you through the code involved in handling the onclick method.

From the Event Listener Breakpoints section, you see that you can add breakpoints for a lot of events, including touch , keyboard and XHR .

Conclusion

Doing the little debugging we have done here using either console.log() or alert() would have taken us back and forth between the browser and our code. We would probably have had a couple of console.log and alert statements to get to where we are.

When your codebase becomes bigger and bigger, Chrome Dev Tools breakpoints could really be helpful in figuring out where the bugs are, and just general debugging.

Tip

If you like a dark theme for your Chrome Dev Tools, simply click on the menu icon just before the close button within the chrome dev tools, then go to Settings > General , under Appearance go to Theme and select Dark .

转载本站任何文章请注明：转载至神刀安全网，谢谢神刀安全网 » Debugging JavaScript with Chrome DevTools Breakpoints