Chrome Developer tools

The Chrome browser has a built in system to help web developers. It is THE goto tool for HTML, CSS, Networking issues, and most of all: Javascript. This page focuses on learning to use it as part of a Javascript Tutorial.

Programmers often put some sort of print-out or, in the case of Javascript, console.log("statements") to see what is going on inside the program. But the DevTools console allows you to really watch the code run and see exactly what is happening. To get started, lets just look at the console.

Open Chrome, and press the keys in the Vulcan pinch: Ctrl + Shift + I. Or go to the dot menu (upper right, looks like three dots on top of each other, or it may be an up arrow in a circle if you need to update), and select More Tools / Developer Tools.

For now, just find the "Console" tab, either right at the top, or under "Elements"

At the ">" prompt in Console, type the word "var" then space, then your name (just one word, first or last) and press enter. For example:
var James
You should see "<- undefined" Your name is now a variable, a box with your name on it, and inside the box there is... "undefined". That's because we haven't given it a value.

Type in your name again. and follow it with the equal sign "=" and zero "0". For example:
James = 0
Now you are zero.

Enter your name, equals, your name again, and then + and 1. e.g.
James = James + 1
Notice that you are now 1. This isn't math, so the equal sign doesn't really mean "is equal to" it means "make it equal to" or "set to". (If I had written Javascript, I would have used ":" instead of "=". Second guessing language designers is the national pastime of programmers.)

Try this: Your name followed by two plus signs, with no spaces between. e.g.
James++
Notice you are now 2. "++" is increment and just adds one to the variable.

Try this, and notice how the console helps you type it in: (use your name instead of "James")
document.body.innerHTML="James is "+James
Now look to the left at the web page. You may need to squint. The point is you can control the web page from the console.

If you want the text to be bigger:
document.body.style = "font-size:60px;"
Can you see me now?

Problem #1. Figure out how to change the color, in rgb (Red Green Blue) numbers, of the text in the body of the document. Hint: Google is your friend. Keywords work best in order from most general to least. E.g. "html document body text rgb color". You may need to read more than one page. Help each other out. Hint: If it locks up and the page goes grey with "paused in the debugger", hit the right pointing play icon next to that message to see the error back in the console.

Problem #2. Now that you have that figured out, use a for loop to change the color from black to a bright color in steps of 1. This will be even harder and you should really work together in an Issue. Again, I'd rather you not just post your answer, but instead post what isn't working and ask for suggestions from other. Let people figure it out, but help. Try making a variable first, and figure out how to set the color based on the variable value. Then setup a for loop and use console.log(variable) to see that the values really do change as expected. Then merge your color change code with the for loop. Post that in a document called "colorchange.js"

Problem #3. Why don't you see the color change when you run the for loop? How can you slow down the animation? This is REALLY hard, and I don't expect you to solve it the first day.

This is a super powerful tool with many many features. To learn all about it, you can follow their documentation at:
https://developers.google.com/web/tools/chrome-devtools
and especially the page / video focused on Javascript debugging:
https://developers.google.com/web/tools/chrome-devtools/javascript

There is a lot more there about how to use it to step through a program in a web page and figure out where you went wrong.

Chrome Developer tools

Welcome to massmind.org!

Welcome to massmind.org!