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
for...inloop to append each Beatle array-element to the unordered list;
Let's use this relatively-simple code to see how the various resources Google DevTools gives us might be of use.
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
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; console.log(seconditem);
shoppingcart were an array - the items a user might have added to their shopping cart, for instance - then
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:
Then we would be able to inspect the array:
Before reviewing more DevTools panels, let's have you try out the tools we've reviewed so far with an exercise: