前端除錯新境界：用 CSS 為 console.log 加上顏色與樣式

console.log("%c要顯示的文字", "CSS 樣式");

console.log("%c這是綠色文字", "color: green;");

console.log(
  "%c這是有樣式的文本",
  "color: #007acc; font-size: 16px; font-weight: bold;"
);

console.log("%c前半部分 %c後半部分", "color: yellow;", "color: pink;");

console.log(
  "%c重要通知",
  "color: white; background-color: #D33F49; padding: 2px 6px; border-radius: 2px; font-weight: bold;"
);

console.log("%c成功 ", "color: green; font-weight: bold;");
console.log("%c警告 ", "color: orange; font-weight: bold;");
console.log("%c錯誤 ", "color: red; font-weight: bold;");

const user = { name: "張三", age: 28, email: "zhangsan@example.com" };
console.log(
  "%c用戶數據 ",
  "background: #26bfa5; color: white; padding: 2px 4px;",
  user
);

console.log(
  "%c彩虹文字效果",
  "font-weight: bold; font-size: 20px; color: red; text-shadow: 3px 3px 0 rgb(217,31,38), 6px 6px 0 rgb(226,91,14), 9px 9px 0 rgb(245,221,8), 12px 12px 0 rgb(5,148,68), 15px 15px 0 rgb(2,135,206);"
);

console.log(
  "%c===== 用戶活動日誌 =====",
  "background: #007acc; color: white; padding: 5px 10px; width: 100%; font-size: 16px;"
);

const name = "張三";
const age = 29;
console.log("%s今年%d歲。", name, age);