Skip to main content

หลายคนที่เคยใช้หรือกำลังเขียนภาษา JavaScript อยู่คงจะรู้จักสิ่งที่เรียกว่า console.log เป็นอย่างดี  เพราะเครื่องมือที่ง่ายที่สุดในการแสดงค่าอะไรก็ตามที่เราต้องการทดสอบโปรแกรมของเราในภาษา JavaScript แต่ทว่า console.log นั้นไม่ใช่แค่ความสามารถเดียวของ console เราจึงรวบรวมคำสั่งที่น่าสนใจเพื่อปลดล็อคความสามารถ console ให้เราทดสอบโปรแกรมของเราให้หลากหลายและสะดวกสบายมากขึ้น

console.log

คำสั่งพื้นฐานที่ทุกคนรู้จัก คำสั่งจะแสดงผลตามที่เราใส่ Label ลงไป

console.dir()

คำสั่งนี้จะคล้ายๆกับ console.log แต่สิ่งที่ออกมาจะดูคลีนกว่า

จะเห็นว่า console จะแสดงค่าเฉพาะ type ของตัวแปรเท่านั้นแต่เมื่อกดขยายค่าก็จะยังมีข้อมูลแสดงครบถ้วน

console.group()

บางครั้งเราก็สั่ง console.log มาหลายครั้งจนทำให้มันดูรกไปหมดเวลาจะมาอ่านค่าที่ให้แสดงก็ใช้เวลานานกว่าจะเจอค่าที่ต้องการ เราสามารถใช้ำสั่ง console.group เพื่อจัดกลุ่ม label ที่เหมือนกันได้

พอกดย่อข้อมูลก็จะเหลือเท่านี้เอง

console.table()

คำสั่งที่จะแสดงตารางเพียงแค่ใส่ข้อมูลลงไป

console.assert(bool, text)

คำสั่งนี้จะให้เราใส่ค่าได้ 2 ค่า ค่าแรกจะใส่ boolean อีกค่าเป็น text โดยที่ค่าแรกหากมีค่าเป็นtrue จะไม่แสดงผลอะไร แต่ถ้าเป็น false จะขึ้นเป็น error และแสดง text ที่เราใส่ลงไป บางครั้งที่เราต้องการตรวจสอบว่าตัวแปรนี้ได้มีการใส่ค่าอะไรเข้าไปหรือเปล่า หรือเงื่อนไขนี้เป็น false หรือเปล่าก็สามารถใช้คำสั่งนี้เพื่อตรวจสอบได้

console.count()

ปกติแล้วตอนที่เราต้องทำงานกับการใช้ตัวแปรซ้ำๆ แล้วเราต้องการคอยติดตามว่าเราใช้ตัวแปรนี้กี่ครั้งเราอาจจะสร้างตัวแปรขึ้นมา 1 ตัว เพื่อนับจำนวนการใช้ตัวแปรตัวนั้น console มีเครื่องมีที่ง่ายกว่า นั่นคือ console.count ที่ทำให้เราสามารถนับอะไรก็ได้โดยที่ไม่ต้องสร้างตัวแปรขึ้นมาใหม่ โดยหากใส่ค่าต่างกันก็จะนับแยกกันให้อีกด้วย

console.time()

หลายครั้งที่เรากังวลถึงประสิทธิภาพในการทำงานของโปรแกรมว่าการใช้งานคำสั่งส่วนนี้ใช้เวลาในการประมวลผลเท่าไหร่ เราสามารถใช้ console เพื่อจัดการส่วนนนี้ได้ด้วย โดยที่ 

console.time() : ใช้เพื่อเริ่มการจับเวลา

console.timeLog() : ใช้เพื่อแสดงเวลาที่จับเฉพาะจุดนั้นๆ (เวลายังคงเดินอยู่)

console.timeEnd() : ใช้เพื่อจบการจับเวลา

จบแล้วครับกับการปลดล็อคความสามารถของ console ก็หวังว่าจะเป็นประโยชน์ต่อใครก็ตามที่กำลังเขียนภาษา JavaScript หรือกำลังจะเขียนก็ตามแต่ ก็ลองนำไปใช้ดูนะครับเพื่อว่าจะทำให้เราสามารถทดสอบโปรแกรมได้ง่ายขึ้นและมีความสุขในการเขียนโค้ดมากยิ่งขึ้น

Extra!!!

console.log สามารถใช้ร่วมกับ CSS ได้ด้วยนะ! เผื่อใครรู้สึกเบื่อกับ console.log ธรรมดาก็สามารถใช้ css เพื่อเติมแต่งสีสันให้ดูมีชีวิตชีวามากขึ้นได้เลยยย

หากคุณสนใจพัฒนา สตาร์ทอัพ แอปพลิเคชัน และ เทคโนโลยีของตัวเอง ?

อย่ารอช้า ! เรียนรู้ทักษะด้านดิจิทัลเพื่ออัพเกรดความสามารถของคุณ
เริ่มตั้งแต่พื้นฐาน พร้อมปฏิบัติจริงในรูปแบบหลักสูตรออนไลน์วันนี้

Developer

Author Developer

More posts by Developer

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

    ประเภทของคุกกี้มีความจำเป็นสำหรับการทำงานของเว็บไซต์ เพื่อให้คุณสามารถใช้ได้อย่างเป็นปกติ และเข้าชมเว็บไซต์ คุณไม่สามารถปิดการทำงานของคุกกี้นี้ในระบบเว็บไซต์ของเราได้
    รายละเอียดคุกกี้

  • คุกกี้สำหรับการติดตามทางการตลาด

    ประเภทของคุกกี้ที่มีความจำเป็นในการใช้งานเพื่อการวิเคราะห์ และ นำเสนอโปรโมชัน สินค้า รวมถึงหลักสูตรฟรี และ สิทธิพิเศษต่าง ๆ คุณสามารถเลือกปิดคุกกี้ประเภทนี้ได้โดยไม่ส่งผลต่อการทำงานหลัก เว้นแต่การนำเสนอโปรโมชันที่อาจไม่ตรงกับความต้องการ
    รายละเอียดคุกกี้

บันทึกการตั้งค่า