เอะอะก็ console.log()

หากใครยังใช้ alert() ในการดีบั๊กจาวาสคริปต์อยู่ในปี 2020 ล่ะก็ คุณจะต้องถูกสาปแช่งจากเพื่อนร่วมวงการเป็นแน่ เราได้เปลี่ยนจาก alert() มาใช้ console.log() มาก็นานพอสมควรแล้ว แต่นอกจาก console.log() แล้ว รู้หมือไร่ว่ายังมีฟังก์ชั่นอื่นๆ ที่น่าใช้อยู่อีกไม่น้อย มาเริ่มกันด้วยคำส่ัง

console

ข้อแรกเลยที่ควรรู้คือหากพิมพ์อะไรลงไปใน Console ของ Developer Tools มันจะ “พยายาม” แสดงผลของออปเจ็คนั้นๆ ไม่ว่าอยู่ในรูปแบบใด

ผลลัพท์ของการพิมพ์ console ใน Console จะได้ดังนี้

เราจะเริ่มต้นกันที่ console.log() กันก่อน แน่นอน ท่ามาตรฐานคือ console.log(‘ข้อความ’) แต่เราสามารถใช้ console.log() และส่งพารามิเตอร์มากกว่า 1 ตัวเพื่อไปแสดงผลได้ ตัวอย่างเช่น

let bool = true
let number = 9
let nothing = null
let func = () => {}
console.log('Hello', bool, number, nothing, func)

จะได้ผลลัพท์เป็น

นอกจากนี้เรายังสามารถนำ CSS ไปใช้ใน console.log() ด้วย โดยใช้ %c เป็น placeholder ในข้อความ และนำ CSS ใส่ไว้ในพารามิเตอร์ถัดไป ตัวอย่างเช่น

console.log('%cHello World', 'background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);')

จะได้ผลลัพท์เป็น

ต่อไปคือ console.memory ตัวนี้ไม่ใช่ฟังก์ชั่น แต่เป็นค่า MemoryInfo ซึ่งเป็นตัวเดียวกันกับ performance.memory ดังนั้นเราจะข้ามไปก่อน

จากนั้นจะเป็น console.debug() โดยมันไม่ต่างจาก console.log() เพียงแต่จะกำหนด Log Level ให้อยู่ในส่วนของ Debug โดยเราจะทดสอบด้วย Code ดังนี้

console.debug('this is debug')
console.info('this is info')
console.warn('this is warning')
console.error('this is error')
console.log('this is log')

เราจะเห็นว่า LogLevel จะมีลำดับดังนี้

• console.debug() ที่เป็นสีฟ้า จะอยู่ในหัวข้อ Verbose ของเครื่องมือในกรอบสีเขียวในรูป
• console.log() จะเทียบเท่ากับ console.info() คือตัวหนังสือที่เป็นสีขาว
• console.warn() ไว้แสดงข้อความแจ้งเตือน มีสีเหลืองรวมถึงไอคอนระวัง
• console.error() ไว้แสดงข้อผิดพลาด เป็นสีแดงรวมถึงไอคอนกากบาท

ลำดับต่อไปคือ console.dir() คำสั่งนี้ใน Chrome จะคล้ายกับ console.log() แต่ console.dir() จะพยายามแสดงข้อมูลในลักษณะ tree มากกว่า ตัวอย่างเช่น

<script>
console.log(document)
console.dir(document)
</script>

จะแสดงผลเป็น

หรืออีกตัวอย่าง

console.log([1,2,3])
console.dir([1,2,3])

จะแสดงผลเป็น

ต่อไปคือ console.dirxml() ซึ่งจะเหมาะกับใช้แสดงผล DomNode ในรูปแบบของ XML สำหรับ Google Chrome รูปแบบดังกล่าวจะเหมือนกับการใช้ console.log() ที่จะแสดงเป็น XML​ โดยปริยาย

<div id="t">
  <span>Test</span>
</div>

<script>
console.dirxml(document.getElementById("t"))
console.dir(document.getElementById("t"))
</script>

ต่อไปคือ console.table() มันเอาไว้แสดงผลข้อมูลในรูปแบบตารางนั่นเอง

let table = [{"First Name":"Jill","Last Name":"Smith","Score":"disqualified"},{"First Name":"Eve","Last Name":"Jackson","Score":"94"},{"First Name":"John","Last Name":"Doe","Score":"80"},{"First Name":"Adam","Last Name":"Johnson","Score":"67"}]
console.table(table)

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

ต่อไปคือ console.trace() เอาไว้ใช้ดูว่าฟังก์ชั่นนี้ ถูกเรียกมาจากฟังก์ชั่นใดบ้าง ตัวอย่างเช่น

let function_a = () => { console.trace() }
let function_b = () => { function_a() }
function_b()

ต่อไปรวม 3 ฟังก์ชั่นเข้าด้วยกันคือ console.group() console.groupCollapsed() และ console.groupEnd()

console.group() และ console.groupCollapsed() มีหน้าที่เหมือนกันคือ สร้างกลุ่มของข้อความ โดยสามารถกำหนดชื่อกลุ่ม (Label) ที่ต้องการ จากตัวอย่างเราจะตั้งเป็น ‘This is group of color’ โดย groupCollapsed จะหุบโดยปริยาย และเมื่อสั่ง console เพื่อแสดงผลข้อความใดๆ จนเสร็จแล้ว หลังจากเราสั่ง console.groupEnd() จะรวมกลุ่มข้อความเข้าด้วยกัน โดยสามารถเลือกขยายหรือหุบได้ จากตัวอย่าง

console.group('This is group of color')
console.log('red')
console.warn('green')
console.error('blue')
console.groupEnd('This is group of color')
console.groupCollapsed('This is group of car')
console.log('toyota')
console.warn('honda')
console.error('mercedes')
console.groupEnd('This is group of car')

ต่อไป console.clear() มีหน้าที่ล้างหน้าจอ

ต่อไปคือ console.count() เอาไว้นับจำนวนต่างๆ ตามแต่ที่จะตั้งชื่อโดยหากสั่ง console.count() เฉยๆ ชื่อของมันคือ default ส่วน console.countReset() เอาไว้เริ่มตัวนับใหม่ ตัวอย่างเช่น

console.assert() เอาไว้ทำ Test ที่ต้องการให้แสดงผลใน Console โดยพารามิเตอร์แรกคือ Expression ส่วนอันที่สองคือ Object หาก Expression ไม่ผ่าน จะแสดงเป็น Error ตัวอย่างเช่น

let a = 1
let b = 2 
console.assert( a > b, { a, b } )

ต่อไปเป็น console.profile() และ console.profileEnd() ฟังก์ชั่นนี้รับพารามิเตอร์เป็นชื่อของ Profile หากไม่ใส่มันจะตั้งชื่อให้เอง ตัวอย่างการใช้งานเช่น

console.profile('getRandomValues')
for (i = 0; i < 10000; i++) { window.crypto.getRandomValues(new Uint32Array(10)).toString() }
console.profileEnd('getRandomValues')

หากไม่เคยใช้งาน Javascript Profiler เราต้องเปิดแถบเครื่องมือก่อน โดยการคลิกที่เมนู และเลือก More tools > Javascript Profiler

จากนั้นสามารถดูเวลาที่ใช้ในการเรียกแต่ละฟังก์ชั่นได้

ต่อไปคือ console.timeStamp() เอาไว้ใช้ในการตรวจสอบ Performance จากโค้ด ​HTML ตัวอย่าง

<script>
console.timeStamp('Start')
setTimeout( console.timeStamp('After 0.5 seconds') , 500 )
console.timeStamp('End')
</script>

หากไปที่แถบ Performance และกดบันทึกประเมินประสิทธิภาพ

เมื่อเอาเมาส์ไปวางบน Marker จะเห็นว่ามีการลง Timestamp ไว้ เพื่อบันทึกเวลาของจังหวะเวลาที่โค้ดรันถึง

ชุดฟังก์ชั่น console.time() console.timeLog() และ console.timeEnd() เราจะเริ่มจาก console.time() เพื่อกำหนดจุดเริ่มต้นของการจับเวลา โดยพารามิเตอร์คือชื่อของตัวจับเวลาที่ต้องการ หากไม่ใส่พารามิเตอร์จะเป็นค่า default ส่วน console.timeLog() ไว้เพื่อแสดงเวลาระหว่างทาง และเมื่อต้องการหยุดนับเวลาให้สั่ง console.timeEnd() ตัวอย่างเช่น

console.time('Test Timer')
// Show time log after 1 second
setTimeout( () => { console.timeLog('Test Timer') } , 1000)
// Stop timer after 3 seconds
setTimeout( () => { console.timeEnd('Test Timer') } , 3000)

อ้างอิงจาก

https://developers.google.com/web/tools/chrome-devtools/console