เมื่อโลกนี้ไม่ได้มีแค่ console.log

แม้จอคอมของเราจะแสดงผลได้หลากสี แต่พวกเรายังคงชื่นชอบสีขาวดำที่จืดชืดจาก console.log กันอยู่

เพื่อนๆหลายคนที่เคยใช้ logger บางตัวเช่น redux-logger อาจคุ้นตากับสีสรรแบบนี้

แหมค่อยให้ความรู้สึกคุ้มค่ากับ Retina Display ที่ซื้อมาหน่อย! ในบทความนี้เราจะมาดูกันซิว่า Console API นั้นทำอะไรได้บ้าง นอกจากแสดงข้อความอันจืดชืดจาก console.log ครับ

แต่งแต้มสีสันให้ console.log

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

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

วิธีตกแต่งสไตล์ให้ console.log นั้น เราสามารถใช้ CSS ได้ครับผ่าน %c ดังนี้

1console.log('%cBabel Coder rocks!', 'font-style: italic; color: #18D8A9')

เราก็จะได้ข้อความแสนสวยงามดังรูป

แต่ถ้าความสวยงามระดับนี้ยังไม่จุใจ ก็ใส่ CSS แบบจัดเต็มไปเลยแบบนี้ก็ได้เช่นกัน (ขอไม่ลงโค๊ดนะครับ มันยาว)

รวมกลุ่มข้อความเข้าด้วยกัน

คุณอยากพิมพ์ข้อมูลสินค้าแต่ละประเภทออกมา โดยสินค้าประเภทเดียวกันก็ต้องรวมกลุ่มเข้าด้วยกัน

1const categories = [
2  {
3    title: 'สินค้าทาสแมว',
4    products: [
5      { id: 1, title: 'ธูปบูชาเทพเจ้าแมว' },
6      { id: 2, title: 'ชักโครกแมว' },
7    ],
8  },
9  {
10    title: 'สินค้าเจ้าตูบ',
11    products: [{ id: 3, title: 'อาหารเม็ดสูตรหมาเมิน' }],
12  },
13]

หลังการเขียนโค๊ดตามโจทย์ข้างต้น หน้าตาของช่องคอนโซลจะเป็นเช่นนี้

ซื้อเลย! นี่หละครับคือการใช้งาน console.group เพื่อรวมสิ่งที่สัมพันธ์กันไว้ภายใต้กลุ่มเดียวกันดังแสดงในโค๊ดนี้

1const categories = [
2  {
3    title: 'สินค้าทาสแมว',
4    products: [
5      { id: 1, title: 'ธูปบูชาเทพเจ้าแมว' },
6      { id: 2, title: 'ชักโครกแมว' },
7    ],
8  },
9  {
10    title: 'สินค้าเจ้าตูบ',
11    products: [{ id: 3, title: 'อาหารเม็ดสูตรหมาเมิน' }],
12  },
13]
14
15// พิมพ์ประเภทต่างๆของสินค้า
16function printCategories(categories) {
17  console.log('=== All Categories ===')
18
19  for (const { title, products } of categories) {
20    // พิมพ์ชื่อประเภทสินค้าออกมาก่อนโดยถือว่าชื่อนี้คือชื่อของกลุ่ม
21    console.group(title)
22    // ภายใต้ประเภทสินค้าดังกล่าว เราจะแสดงรายการสินค้าเหล่านั้น
23    printProducts(products)
24    // เมื่อแสดงรายการสินค้าในกลุ่มนั้นจบ ถือว่าสิ้นสุดการแสดงผลในกลุ่มนี้
25    console.groupEnd()
26  }
27}
28
29// พิมพ์รายการสินค้า
30function printProducts(products) {
31  for (const product of products) {
32    console.log(product)
33  }
34}
35
36printCategories(categories)

จากรูปที่ได้ เราจะเห็นว่าแต่ละกลุ่มเปิดเผยไส้ในตั้งแต่ต้น แล้วถ้าเกิดเราอยากให้แต่ละกลุ่มแสดงแค่ชื่อกลุ่มแต่ต้นหละจะทำยังไง?

เราสามารถใช้ console.groupCollapsed ได้ครับเพื่อแก้ปัญหาข้างต้น ผลลัพธ์จากการใช้ groupCollapsed จะเป็นเช่นดังภาพ

1function printCategories(categories) {
2  console.log('=== All Categories ===')
3
4  for (const { title, products } of categories) {
5    // อยู่ตรงนี้ไงพวกนาย
6    console.groupCollapsed(title)
7    printProducts(products)
8    console.groupEnd()
9  }
10}

Log Level

เป็นธรรมดาของ logger ที่จะต้องมี log level

สำหรับ console.log นั้นถือว่าเป็น DEBUG ในคอนโซล เรามารู้จัก level อื่นๆของ console กันครับ

• console.error สำหรับพ่นข้อผิดพลาดเช่น runtime errors หรือเงื่อนไขที่ไม่ได้คาดคิดและส่งผลกระทบต่อการใช้งาน
• console.warn ใช้สำหรับการแจ้งเตือนในระดับที่ไม่ใช่ข้อผิดพลาด แต่ถ้ายังวอนแบบนี้อีกเอ็งได้ตายแน่ ตัวอย่างการใช้งานเช่น แจ้งเตือนสำหรับ deprecated API เป็นต้น
• console.info ใช้เพื่อให้ข้อมูลที่น่าสนใจ เช่น ตอนนี้คอมโพแนนท์ตัวนี้เริ่มทำงานแล้วนะ คอมโพแนนท์ตัวนั้นกำลังจะหยุดทำงานแล้วนะ คอมพิวเตอร์ไหม้แล้วนะ ดับซิ ดับ รอไร!
• console.debug ให้ข้อมูลเชิงลึกถึงการทำงานต่างๆ พูดง่ายๆก็เหมือนเป็นการ log ระบบออกมาดูว่าทำอะไรอยู่ ดังนั้น console.debug จึงมีค่าเหมือน console.log ยังไงหละ

1console.error('ERROR')
2console.warn('WARN')
3console.info('INFO')
4console.debug('DEBUG')
5console.log('LOG')

จากโค๊ดข้างบนเราจะได้ log สารพัดสี ตามแต่ความร้ายแรงของ level เช่นนี้ครับ

แสดงผลข้อมูลในตารางด้วย console.table

ถ้าเรามีข้อมูลเป็นอาร์เรย์ แล้วต้องการแสดงผลในรูปแบบตาราง เราสามารถใช้ console.table ได้ครับ

หมายเหตุ console.table ไม่ใช่ API มาตรฐาน อาจไม่สามารถใช้ได้ในบางเบราเซอร์ ผู้ใช้จึงควรหลีกเลี่ยงในกรณีที่ต้องการสันบสนุนในทุกเบราเซอร์

1const students = [
2  { id: 1, name: 'Somchai Haha', advisor: 'Somsree Hehe' },
3  { id: 2, name: 'Somnumna Haha', advisor: 'Somsree Hehe' },
4  { id: 3, name: 'Somtum Halo', advisor: 'Somsree Hehe' },
5]
6
7console.table(students)

ผลลัพธ์จากการพิมพ์อาร์เรย์ข้างต้นจะได้รูปแบบตารางดังนี้

จับเวลาการทำงานด้วย console.time

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

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

1const nums = [...Array(10e5).keys()]
2
3console.time()
4nums.reduce((sum, item) => sum + item)
5console.timeEnd()
6
7console.time()
8let sum = 0
9for (const item of nums) {
10  sum += item
11}
12console.timeEnd()

เราจะพบว่าในกรณีอาร์เรย์มากช่อง การใช้ reduce จะประหยัดเวลาในการประมวลผลเพื่อทำการบวกมากกว่า for นั่นเอง

ยังมีรายละเอียดสำหรับการใช้งาน Console API อีกมากที่ผมไม่ได้เขียนไว้ เพื่อนๆที่สนใจเพิ่มเติมสามารถอ่านได้ที่เอกสารจาก MDN