The Panels

Contact Us or call 1-877-932-8228
The Panels

The Panels

Before we take a look at the most useful of the DevTools panels, let's look at a simple page with some JavaScript we can use those tools to review and debug:

Code Sample:

DebuggingtestingChrome/Demos/debugging.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Loops</title>
<script>
	var index;
	var beatles = [];
	beatles["Guitar1"] = "John";
	beatles["Bass"] = "Paul";
	beatles["Guitar2"] = "George";
	beatles["Drums"] = "Ringo";

	

	window.onload = function() {
		for (var prop in beatles) {
			var beatle = document.createElement("li");
			var textnode = document.createTextNode(prop + " : " + beatles[prop]);
			beatle.appendChild(textnode);
			document.getElementById("beatles").appendChild(beatle);
		}

		document.getElementById("redtext").addEventListener("click", function() {
			document.getElementById("beatles").style.color = 'red';
	    	return false;
		});
		document.getElementById("blacktext").addEventListener("click", function() {
			document.getElementById("beatles").style.color = 'black';
	    	return false;
		});
		document.getElementById("italictext").addEventListener("click", function() {
			document.getElementById("beatles").style.fontStyle = 'italic';
	    	return false;
		});
		document.getElementById("normaltext").addEventListener("click", function() {
			document.getElementById("beatles").style.fontStyle = 'normal';
	    	return false;
		});
	}
</script>
</head>
<body>
<h1>JavaScript Debugging</h1>
<ol id="beatles">
</ol>
<div class="buttons">
	<ul>
		<li><a href="#" id="redtext">Set Text Red</a></li>
		<li><a href="#" id="blacktext">Set Text Black</a></li>
		<li><a href="#" id="italictext">Set Text Italic</a></li>
		<li><a href="#" id="normaltext">Set Text Plain</a></li>
	</ul>
</div>
</body>
</html>

Code Explanation

The HTML markup for our page has an empty ordered list with id beatles and a set of four links ("Set Text Red", "Set Text Black", "Set Text Italic", and "Set Text Plain"). In the head of the document we include JavaScript that:

  • Creates an array of members of the Beatles, where the index is the instrument and the value the name of each member;
  • After the DOM loads, we use a for...in loop to append each Beatle array-element to the unordered list;
  • Also after the DOM loads, we create event listeners for each of the four links, changing the text color or style when the user clicks each link.

Let's use this relatively-simple code to see how the various resources Google DevTools gives us might be of use.

The Elements Panel

The "Elements" panel is the default panel which comes up when one right-clicks on a DOM element on the page. While not strictly JavaScript, this panel is great for finding the id of an element and looking at its associated CSS styling. Information about HTML elements and their CSS styling are dynamic in this panel: changes we make via JavaScript - changing the text color, say, as we do in our sample code, and adding the Beatles order-list elements - are reflected in real time in the "Elements" panel, just as if the original HTML of the page had included what we changed via JavaScript.

For our example, we might use the "Elements" panel for a quick check of the id of the "Set Text Red" link ("what did I set that id to?") or to verify that the CSS style of the Beatles members list is set, as we intend, with color:red:

Chome DevTools Elements panel

The Console Panel

The "Console" panel gives us valuable JavaScript error information - a message from the browser that we have, sadly, written some buggy code. We might, for instance, have misspelled a JavaScript keyword, tried to access the property of a null element (in trying to get an element with an incorrect id, say), or attempted to access an element of an array that doesn't exist.

Perhaps even more usefully, we can write to this console as a simple debugging tactic. The following code would write the value of an array to the console:

var seconditem = shoppingcart[2];
console.log(seconditem);

If shoppingcart were an array - the items a user might have added to their shopping cart, for instance - then seconditem would represent the third item in the cart (the third item in the array, since JavaScript indexes arrays starting at 0). The code console.log(seconditem) writes not to the screen, but rather to the console, which we can view with the "Console" panel. A great feature here is that we can view structured data - arrays and collections - in a useful manner, along with simple data like string and arrays.

For our example, if we were to add the following code after we create and populate the Beatles array:

console.log(beatles);

Then we would be able to inspect the array:

Chome DevTools Console panel

Before reviewing more DevTools panels, let's have you try out the tools we've reviewed so far with an exercise:

Next