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:
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".
James = 0
Now you are zero.
Enter your name, equals, your name again, and then + and 1. e.g.
James = James + 1
Try this: Your name followed by two plus signs, with no spaces between.
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:
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.
|file: /Techref/language/java/script/chrome-devtools.htm, 4KB, , updated: 2020/6/10 12:23, local time: 2022/12/6 05:05,
|©2022 These pages are served without commercial sponsorship. (No popup ads, etc...).Bandwidth abuse increases hosting cost forcing sponsorship or shutdown. This server aggressively defends against automated copying for any reason including offline viewing, duplication, etc... Please respect this requirement and DO NOT RIP THIS SITE. Questions?|
<A HREF="http://www.massmind.org/Techref/language/java/script/chrome-devtools.htm"> Google Chrome Browser Developer tools</A>
|Did you find what you needed?|
Welcome to massmind.org!
Welcome to www.massmind.org!