Lesson 12
Debugging
Now that you have some working code, it is worth taking a step back to look at the development tools provided by Chrome to help analyze JavaScript-based web applications.
Probably the most important tool for development purposes is a debugger. Debuggers allow you to examine an application while it is running and therefore diagnose the cause of any problems or bugs.
All major browser vendors have introduced development tools such as debuggers into their browsers. For instance, Firefox supports similar tools to the ones you will look at here with the Firebug plugin.
This lesson is very much a practical lesson. It will consist of two Try It sections, and you are encouraged to follow along with the examples.
Both Try It sections will use the same web page to demonstrate the various features in the debugger. This is available from the book's website in the Lesson 12 folder under the name tryit.html, but you can also choose to write it yourself:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <script> function calculateAbsoluteSumOfArray(a) { var result = 0; for (var i = 0; i < a.length; i++) { var num = a[i]; result = result + Math.absolute(num); } return result; } function calculateSumOfArray(a) { var result = 0; for (var i = 0; i < a.length; i++) { var num = a[i]; result = result + num; } return result; } function findHighestSum(arrays) { var result = Number.NEGATIVE_INFINITY; for (var i = 0; i < arrays.length; i++) { var a = arrays[i]; var sum ...Get HTML5, JavaScript, and jQuery 24-Hour Trainer now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
