EECS 485 Lab

Lab 6: Project 3 Setup and JavaScript & React Debugging Tutorial

Goals

Finish P3 Setup

The first part of this lab is the completing the project 3 setup tutorial, starting from the React/JS section.

JavaScript Debugger

The next part of this lab is learning how to debug JavaScript. In this next JavaScript debugger tutorial, we’ll discuss how to use browser tools to debug without having to add console.log() statements everywhere.

Remember that static pages and server-side dynamic pages tools still apply!

React Debugging

Debugging React code can be tricky if you try to apply the JavaScript debugging tools on the JavaScript code that was transpiled from your React code. Instead, we can use the React Dev Tools browser extension, which allows you to view your React components as HTML DOM elements in the Developer Tools and see the props and state for each component. In the following section, we will walk through how to debug code for the Likes widget you created in your project 3 setup.

First, add the React Dev Tools Extension to Chrome or Firefox.

Verify that you’ve done the setup tutorial correctly. Build, run and navigate to http://localhost:8000/, where you should see your likes widget displaying 3 likes.

$ pwd
/Users/awdeorio/src/eecs485/p3-insta485-clientside
$ npx webpack
...
$ ./bin/insta485run
...

Pro-tip: Use Webpack’s --watch option in a separate terminal to automatically update your bundle.js when a file changes.

$ npx webpack --watch

For the purpose of this lab, let’s say there is a bug somewhere in your React code that is causing 13 likes to be displayed instead of 3.

Open up the Chrome Developers tools, click on the arrow to see more tabs, and click on the Components tab, and click on the Likes component. You should see the Likes component like a DOM element, along with its props and state. As you can see, the state of numLikes is 3, most likely the bug is introduced when the component is being rendered.

To view the source code associated with a particular component, click on the “View source for this element” button in the top right corner (looks like < >). You should now see the React code associated with the Likes component in a relatively readable format unlike your bundle.js.

Since we think the bug is being introduced in the render() call, let’s set a breakpoint there, and add the variables of interest to the watch section, and refresh the page. You should see that the page is not fully loaded and the execution stopped on your breakpoint. Note that the this.state.numLikes is 0 because the component has not yet mounted. So click on the “Resume script execution” button to stop the execution again after componentDidMount() has completed. Now notice that this.state.numLikes is 3.

Since the we are using the local variable numLikes in our render call to display the number of likes, the bug most likely involves numLikes. As you step through the lines of code, you notice that you are rendering numLikes + 10 instead of just numLikes. You have now caught your bug!

Debugging React code is not as simple as debugging single-threaded C++ programs in an IDE because of the asynchronous nature of JavaScript. Make sure you understand what part of the execution you are in (after constructor() ran, before componentDidMount() ran, etc.) as that will help you diagnose the root cause of bugs much faster.

Completion criteria

Lab Quiz

Complete the lab quiz by the due date.