Skip to content

Latest commit

 

History

History
88 lines (79 loc) · 4.82 KB

2. Introduction to Using the Debugger.md

File metadata and controls

88 lines (79 loc) · 4.82 KB

Introduction to Using the Debugger

This exercise provides practice in using the Mozilla Debugger. As mentioned in the DevTools Overview, the Debugger is one tool in the suite of developer tools for both Mozilla and Chrome. This exercise is intended to show how to use the Debugger and does not require the development environment to be installed. It is best to use Firefox (current version 58) for this exercise, the error described below may not show up in Chrome.

File Set Up:

Just for reference, we will be working with the files (shown below) from the following directory: https://github.com/devtools-html/debugger-examples/tree/master/examples/pythagorean. If you try to "save as" those files directly from GitHub, you'll get a garbled copy of the files, so it will be easier for you to just copy and paste them from the text below.

  1. Copy and paste the contents of the following two files there into two separate text files and save them both with the same names in a separate directory.

Contents of the index.html file:

<html>
  <head>
    <title>Pythagorean</title>
    <script src="pythagorean.js"></script>
  </head>

  <button onclick="math(2,3)">Math</button>
</html>

Contents of the pythagorean.js file:

"use strict";

function math(a, b) {
  var bar = 4;
  function pythagorean(a, b) {
    var foo = 3;
    function exponential(num) {
      foo, bar;
      return num * num;
    }
    return exponential(a) + exponential(b);
  }

  pythagorean(a,b);
}
  1. Create a new tab in Firefox
  2. Go to File/Open in Firefox and open the index.html file

Debugger Start

  1. To start the debugger:
    1. Click on the three horizontal bars in the upper right corner of the tool bar
    2. Select Web Developer/Developer
    3. Select Debugger
  2. Click on the “Math” button.
  3. You may need to click on the directory in which you saved the files in the Sources pane in the lower left corner. You should now be able to see both the index.html and Pythagorean.js files in the source list pane (see https://developer.mozilla.org/en-US/docs/Tools/Debugger/UI_Tour for a nice intro to the debugger UI).
  4. Click the “Console” tab and you should see the error regarding the character encoding of the HTML file: 'The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.'
  5. Open the index.html file in your favorite text editor and replace <html> with the following code:
<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8"/>

So that index.html now contains:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>Pythagorean</title>
    <script src="pythagorean.js"></script>
  </head>
  <button onclick="math(2,3)">Math</button>
</html>
  1. Refresh the browser tab (F5 on Windows or Cmd+R on a Mac) and click the “Math” button; the error should be gone now.

Debugging

  1. Select pythagorean.js in the "Sources" list pane in the Debugger tab
  2. Locate the tool bar that contains the play/pause, step over, step into, and step out buttons on the right-hand side of the pane (see https://developer.mozilla.org/en-US/docs/Tools/Debugger/UI_Tour if you can’t find them). It looks something like this: GitHub Logo
  3. Note that the play/pause button is currently in the “paused” state (i.e., you don't see the "play", just the "pause" button)
  4. Click the “Math” button - you shouldn’t see anything happening on the website or in the console...
  5. Click the line number next to var bar = 4; to set a breakpoint. It should look like:
    GitHub Logo
  6. Click the “Math” button to run it... now you see things happening on the console!
  7. Click the “step into” button to watch the variables change as the code executes
  8. In the end you should note that the function (math()) does not actually return anything
  9. Open the pythagorean.js file in your favorite text editor and add the return in front of the call to pythagorean(a, b), so that line 14 reads:
return pythagorean(a,b);

save the file and exit

  1. Refresh the tab that you are using for debugging
  2. Click the “Math” button to run the function again, and repeat stepping through the function code until the function terminates. Now you can “see” that it is returning a value (you will see the change in the code): uncollapse the "Scopes" section of the pane on the right-hand side pane, which is underneath the play/pause button, to see the values of the variables.