This is a JavaScript practice with JavaScript30 by Wes Bos without any frameworks, no compilers, no boilerplate, and no libraries.
view demo here
Attributes Modification
on an element and bunch of console
tricks
Making a break point to see what's going on to the element.
- more
console.log
- most commonly used
console.log();
- but it can be more ways of Interpolation like C programing language with:
-
%s
: stringconsole.log("Hi %s!", "girl"); // Hi girl!
-
%d
: integerconsole.log("I am %d years old!", 25); // I am 25 years old!
-
%f
: floatconsole.log("It's %f euros.", 23.5); // It's 23.5 euros.
-
%o
: objectconsole.log("This is an object: %o", {firstName: 'Amber', lastName: 'Simpson', age: 20});
-
%c
: for styledconsole.log("I am not just a log, I am %c CONSOLE DOT LOG!!", "font-size: 18px;color: blue;background-color: yellow");
-
- most commonly used
- defaults of
console.log
-
console.warn
for warning messageconsole.warn("← a warning sign %c Watch out! ", "background-color: #eeaf1e;color: #fff");
-
console.error
for error messageconsole.error("← an error sign %c Oh Darn! ", "background-color: red;color: #fff");
-
console.info
for info messageconsole.info("← an info sign %c Practice makes perfect! ", "background-color: #274ed0;color: #fff");
-
- Testing with
assert()
-
nothing returns if true
console.assert(1 === 1, "Hey it\'s true"); // nothing returns
-
returns the second argument if false
console.assert(1 === 0, "Hey you\'re wrong!"); // Hey your're wrong!
-
using
assert()
to check DOM elementconst p = document.querySelector('p'); console.log("3. you can also check the DOM or something"); console.assert(p.innerHTML.match('Break'), "There is no \'Break\' in <p> here, try \'BREAK\'");
-
- Viewing DOM elements
-
document.querySelector()
an element first -
log out only a DOM tag of the element
console.log(p);
-
use
console.dir()
to view the properties of the elementconsole.dir(p);
-
- Log out something tidy with console.table()
-
simply
console.table()
all outconsole.table(dogs);
-
console.table()
specified things outconsole.table(dogs, ['age']);
-
- Grouping together
group()
/groupCollapsed
and groupEnd()
will automatically grouping thins up
const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];
dogs.forEach(dog => {
console.group(); // open up the group
// console.groupCollapsed(); // close up the group
console.log(`${dog.name}`);
console.log(`${dog.age}`);
console.log(`${dog.name} is ${dog.age} years old.`);
console.groupEnd();
});
- Counting things
counts only contents inside of console.count()
console.count("chcolate");
console.count("candy");
console.count("chcolate");
console.count("candy");
console.count("chcolate");
console.count("potato chips");
console.count("chcolate");
- Processing times
time('name')
controls the start point and timeEnd('name')
controls the end point, the 'name'
variables are what we define and must be the same.
console.time('fetching data');
fetch('http://api.github.com/users/amelieyeh')
.then(data => data.json())
.then(data => {
console.timeEnd('fetching data');
console.log(data);
});
There are two ways to clear the console panel:
console.clear();
- hit
Ctrl + L
(in Chrome)