🔥 สวัสดีจ้า วันนี้แอดจะมาบอกต่อ 5 ฟีเจอร์เด็ดๆ ของ Javascript Console ที่จะช่วยให้เราสามารถ print log ได้สะดวกมากยิ่งขึ้น มีตัวไหนบ้างไปดูกันเลย
.
⚡ 1) Console Groups - จะทำการ log ค่าออกมาในรูปแบบ Group จะทำให้ดูได้ง่ายมากยิ่งขึ้น
.
📝 วิธีการใช้งาน - เปิดด้วย console.group() และปิดด้วย console.groupEnd(); เช่น
.
console.group("Person Data");
console.log("Name: BorntoDev");
console.log("Age: 4");
console.groupEnd();
console.log("Outside of the group...");
.
⚡ 2) Live Expressions - เป็นฟีเจอร์ของ Google Chrome ที่จะช่วยแสดงผลลัพธ์จากโค้ด JavaScript แบบเรียลไทม์ได้เลย
.
⚡ 3) Timing Your Code - ใช้เพื่อจับเวลาในการทำงานของโค้ด
.
📝 วิธีการใช้งาน - เปิดด้วย console.time() และปิดด้วย console.timeEnd() เช่น
.
console.time("addHeadings");
for (let i = 0; i < 10000; i++) {
document.body.insertAdjacentHTML("beforeend", "
Heading
");}
console.timeEnd("addHeadings");
.
⚡ 4) Styling with CSS - สามารถใส่ CSS Style เวลา print log ออกมาได้เลย เฟี้ยวมาก555
.
📝 วิธีการใช้งาน - โดยจะใช้ร่วมกับ console.log() ใช้ %c ข้างหน้าข้อความที่ต้องการให้แสดง CSS เช่น
.
console.log("I am programer in %cborn to dev co., Ltd.", "color: yellow; font-weight: bold;");
.
⚡ 5) Assertions - ใช้ในการ Debug โค้ดของเราเขียนว่าสามารถทำงานได้ตามจุดประสงค์หรือไม่ ซึ่งจะ return ที่เป็น false เท่านั้น
.
📝 วิธีการใช้งาน - format console.assert(assertion, obj1 [, obj2, ..., objN]); เช่น
.
console.assert(true === true);
console.assert(true === false,"false");
.
จบแล้วกับ 5 ฟีเจอร์เด็ดที่แอดรวบรวมมาให้ ไหนใครลองไปใช้แล้วบ้าง ? หรือมีตัวไหนเด็ดๆนอกจาก 5 อันนี้ ไว้มาบอกต่อกันบ้างนะคร้าบบ 😄
.
borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
console.log chrome 在 開發必備，摸索不完的Chrome DevTools 小技巧之Console 篇 的相關結果
Console 可以說是開發者的超級超級好朋友了，Debug 的時候真是離不開它！如果只把它拿來印console.log 資訊就太浪費了，一起來看看還有哪些好用的開發 ... ... <看更多>