Day09 主要在介紹各種 console 的用法

基本用法

console.log("Hello")

穿插字串

console.log("Hello I am a %s string!", "💩")

樣式

        console.log(
          "%c I am some great text",
          "font-size:50px; background:red; text-shadow: 10px 10px 0 blue"
        ),

警告

console.warn("OH NOOO")

錯誤

console.error("Shit!")

資訊

console.info("Crocodiles eat 3-4 people per year")

斷言

        const p = document.querySelector("p");
        console.assert(p?.classList.contains("ouch"), "That is wrong!");

清空

console.clear()

印出物件屬性

        const p = document.querySelector("p");
        console.dir(p);

群組

        const dogs = [
          { name: "Snickers", age: 2 },
          { name: "Hugo", age: 8 },
        ];

        dogs.forEach((dog) => {
          console.groupCollapsed(`${dog.name}`);
          console.log(`This is ${dog.name}`);
          console.log(`${dog.name} is ${dog.age} years old`);
          console.log(`${dog.name} is ${dog.age * 7} dog years old`);
          console.groupEnd();
        });

計數器

        console.count("Wes");
        console.count("Steve");
        console.count("Wes");
        console.count("Steve");
        console.count("Wes");

計時器

        console.time("fetching data");

        fetch("https://api.github.com/users/wesbos")
          .then((data) => data.json())
          .then((data) => {
            console.timeEnd("fetching data");
            console.log(data);
          });

表格

        const dogs = [
          { name: "Snickers", age: 2 },
          { name: "Hugo", age: 8 },
        ];
        console.table(dogs);

DEMO

https://codesandbox.io/p/devbox/c6lzdw