บันทึกข้อความในคอนโซล

Kayce Basques

บทแนะนำแบบอินเทอร์แอกทีฟนี้จะแสดงวิธีบันทึกและกรองข้อความในคอนโซล Chrome DevTools

บทแนะนำนี้มีไว้เพื่อให้ทำตามลำดับ โดยถือว่าคุณเข้าใจพื้นฐานของการพัฒนาเว็บ เช่น วิธีใช้ JavaScript เพื่อเพิ่มความโต้ตอบในหน้าเว็บ

ตั้งค่าเดโมและเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์

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

1. เปิดการสาธิต

2. ไม่บังคับ: ย้ายการสาธิตไปยังหน้าต่างแยกต่างหาก ในตัวอย่างนี้ บทแนะนำจะอยู่ทางด้านซ้าย และสาธิตจะอยู่ทางด้านขวา

   

3. วางโฟกัสที่เดโม แล้วกด Control+Shift+J หรือ Command+Option+J (Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ โดยค่าเริ่มต้น เครื่องมือสำหรับนักพัฒนาเว็บจะเปิดทางด้านขวาของเดโม

   

4. ไม่บังคับ: ยึด DevTools ไว้ที่ด้านล่างของหน้าต่างหรือเลิกยึดเป็นหน้าต่างแยกต่างหาก

   เครื่องมือสำหรับนักพัฒนาเว็บที่ปักหมุดไว้ที่ด้านล่างของหน้าจอแสดงตัวอย่าง

   เลิกตรึงเครื่องมือสำหรับนักพัฒนาเว็บในหน้าต่างแยกต่างหาก

ดูข้อความที่บันทึกจาก JavaScript

ข้อความส่วนใหญ่ที่คุณเห็นในคอนโซลมาจากนักพัฒนาเว็บที่เขียน JavaScript ของหน้า เป้าหมายของส่วนนี้คือเพื่อแนะนำประเภทข้อความต่างๆ ที่คุณมีแนวโน้มจะเห็นในคอนโซล และอธิบายวิธีบันทึกข้อความแต่ละประเภทด้วยตนเองจาก JavaScript ของคุณเอง

1. คลิกปุ่มบันทึกข้อมูลในเดโม Hello, Console! ได้รับการบันทึกไว้ในคอนโซล

   

2. คลิก log.js:2 ข้างข้อความ Hello, Console! ในคอนโซล แผงแหล่งที่มาจะเปิดขึ้นและไฮไลต์บรรทัดโค้ดที่ทำให้ระบบบันทึกข้อความลงในคอนโซล

   

   ระบบบันทึกข้อความเมื่อ JavaScript ของหน้าเรียก console.log('Hello, Console!')

3. กลับไปที่คอนโซลโดยใช้เวิร์กโฟลว์ใดก็ได้ต่อไปนี้

   • คลิกแท็บคอนโซล
   • กด Control+[ หรือ Command+[ (Mac) จนกว่าคอนโซลจะอยู่ในโฟกัส
   • เปิดเมนูคำสั่ง เริ่มพิมพ์ Console เลือกคำสั่ง Show Console Panel แล้วกด Enter

4. คลิกปุ่มบันทึกคำเตือนในเดโม Abandon Hope All Ye Who Enter ได้รับการบันทึกลงในคอนโซล

   

   ข้อความที่จัดรูปแบบเช่นนี้ถือเป็นคำเตือน

5. ไม่บังคับ: คลิก log.js:12 เพื่อดูโค้ดที่ทำให้ข้อความมีการจัดรูปแบบเช่นนี้ จากนั้นกลับไปที่คอนโซลเมื่อเสร็จแล้ว ทําเช่นนี้ทุกครั้งที่ต้องการดูโค้ดที่ทําให้ระบบบันทึกข้อความในลักษณะหนึ่งๆ

6. คลิกไอคอนขยาย หน้า Abandon Hope All Ye Who Enter เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงสแต็กเทรซที่นำไปสู่การเรียกใช้

   

   ข้อมูลการติดตามสแต็กบอกคุณว่ามีการเรียกใช้ฟังก์ชันชื่อ logWarning ซึ่งเรียกใช้ฟังก์ชันชื่อ quoteDante กล่าวคือ การเรียกใช้ที่เกิดขึ้นก่อนจะอยู่ด้านล่างของสแต็กเทรซ คุณสามารถบันทึกสแต็กเทรซได้ทุกเมื่อโดยเรียกใช้ console.trace()

7. คลิกบันทึกข้อผิดพลาด ระบบจะบันทึกข้อความแสดงข้อผิดพลาดต่อไปนี้ I'm sorry, Dave. I'm afraid I can't do that.

   

8. คลิกตารางบันทึก ระบบจะบันทึกตารางเกี่ยวกับศิลปินชื่อดังลงในคอนโซล

   

   โปรดสังเกตว่าระบบป้อนข้อมูลในคอลัมน์ birthday เพียง 1 แถวเท่านั้น โปรดตรวจสอบโค้ดเพื่อหาสาเหตุ

9. คลิกกลุ่มบันทึก ชื่อเต่า 4 ตัวที่มีชื่อเสียงซึ่งต่อสู้กับอาชญากรรมจะจัดกลุ่มไว้ภายใต้ป้ายกำกับ Adolescent Irradiated Espionage Tortoises

   

10. คลิกบันทึกที่กำหนดเอง ระบบจะบันทึกข้อความที่มีเส้นขอบสีแดงและพื้นหลังสีน้ำเงินลงในคอนโซล

    

แนวคิดหลักคือเมื่อคุณต้องการบันทึกข้อความไปยังคอนโซลจาก JavaScript ให้ใช้เมธอด console อย่างใดอย่างหนึ่ง โดยแต่ละวิธีจะจัดรูปแบบข้อความแตกต่างกัน

ยังมีวิธีการอื่นๆ อีกมากมายนอกเหนือจากที่แสดงในส่วนนี้ ในตอนท้ายของบทแนะนำ คุณจะได้เรียนรู้วิธีสำรวจวิธีการที่เหลือ

ดูข้อความที่บันทึกโดยเบราว์เซอร์

นอกจากนี้เบราว์เซอร์จะบันทึกข้อความลงในคอนโซลด้วย กรณีนี้มักเกิดขึ้นเมื่อหน้าเว็บมีปัญหา

1. คลิกสาเหตุของ 404 เบราว์เซอร์บันทึกข้อผิดพลาดเกี่ยวกับเครือข่าย 404 เนื่องจาก JavaScript ของหน้าพยายามดึงข้อมูลไฟล์ที่ไม่มีอยู่

   

2. คลิกข้อผิดพลาดที่เกิดจาก เบราว์เซอร์จะบันทึก TypeError ที่ไม่ได้บันทึกไว้เนื่องจาก JavaScript พยายามอัปเดตโหนด DOM ที่ไม่มีอยู่

   

3. คลิกเมนูแบบเลื่อนลงระดับบันทึก แล้วเปิดใช้ตัวเลือกละเอียดหากปิดอยู่ คุณดูข้อมูลเพิ่มเติมเกี่ยวกับการกรองได้ในส่วนถัดไป คุณต้องดำเนินการนี้เพื่อให้แน่ใจว่าข้อความถัดไปที่คุณบันทึกจะปรากฏขึ้น หมายเหตุ: หากปิดใช้เมนูแบบเลื่อนลง "ระดับเริ่มต้น" คุณอาจต้องปิดแถบด้านข้างของคอนโซล กรองตามแหล่งที่มาของข้อความด้านล่างเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับแถบด้านข้างของ Console

   

4. คลิกการละเมิดสาเหตุ หน้าเว็บไม่ตอบสนองเป็นเวลา 2-3 วินาที จากนั้นเบราว์เซอร์จะบันทึกข้อความ [Violation] 'click' handler took 3000ms ลงในคอนโซล ระยะเวลาที่แน่นอนอาจแตกต่างกันไป

   

กรองข้อความ

ในบางหน้า คุณจะเห็นคอนโซลเต็มไปด้วยข้อความ DevTools มีวิธีต่างๆ มากมายในการกรองข้อความที่ไม่เกี่ยวข้องกับงานที่กําลังทำอยู่

ประเด็นสำคัญ: คอนโซลจะกรองเฉพาะข้อความเอาต์พุตออก อินพุตทั้งหมดที่คุณพิมพ์ลงในคอนโซลจะยังคงอยู่ในนั้น

กรองตามระดับบันทึก

วิธีการ console.* แต่ละรายการจะได้รับการกำหนดระดับความรุนแรง ได้แก่ Verbose, Info, Warning หรือ Error เช่น console.log() เป็นข้อความระดับ Info ส่วน console.error() เป็นข้อความระดับ Error

หมายเหตุ: ดูรายการเมธอด console.* ทั้งหมดและระดับความรุนแรงได้ที่เอกสารอ้างอิง Console API

วิธีกรองตามระดับบันทึก

1. คลิกเมนูแบบเลื่อนลงระดับบันทึกและปิดใช้ข้อผิดพลาด ระดับจะปิดใช้งานเมื่อไม่มีเครื่องหมายถูกข้างระดับนั้นอีกต่อไป ข้อความระดับ Error จะหายไป

   

2. คลิกเมนูแบบเลื่อนลงระดับบันทึกอีกครั้ง แล้วเปิดใช้ข้อผิดพลาดอีกครั้ง ข้อความระดับ Error จะปรากฏขึ้นอีกครั้ง

ประเด็นสำคัญ: Console จะจดจำตัวกรองแบบเลื่อนลงที่คุณใช้อยู่เสมอ การตั้งค่านี้จะคงอยู่ในทุกหน้า รวมถึงหน้าเว็บ เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ และ Chrome ที่โหลดซ้ำ หากต้องการใช้ตัวกรองชั่วคราวอย่างรวดเร็ว ให้ใช้แถบด้านข้าง

กรองตามข้อความ

หากต้องการดูเฉพาะข้อความที่มีสตริงที่ตรงกันทุกประการ ให้พิมพ์สตริงนั้นลงในกล่องข้อความตัวกรอง

1. พิมพ์ Dave ในกล่องข้อความตัวกรอง ระบบจะซ่อนข้อความทั้งหมดที่ไม่มีสตริง Dave นอกจากนี้ คุณยังอาจเห็นป้ายกํากับ Adolescent Irradiated Espionage Tortoises ด้วย นี่เป็นข้อบกพร่อง

   

2. ลบ Dave ออกจากกล่องข้อความตัวกรอง ข้อความทั้งหมดจะปรากฏขึ้นอีกครั้ง

กรองตามนิพจน์ทั่วไป

เมื่อต้องการแสดงข้อความทั้งหมดที่มีรูปแบบข้อความแทนที่จะเป็นสตริงที่เฉพาะเจาะจง ให้ใช้นิพจน์ทั่วไป

1. พิมพ์ /^[AH]/ ในกล่องข้อความตัวกรอง พิมพ์รูปแบบนี้ลงใน RegExr เพื่อดูคำอธิบายการทำงานของรูปแบบ

   

2. ลบ /^[AH]/ ออกจากกล่องข้อความตัวกรอง ข้อความทั้งหมดจะปรากฏขึ้นอีกครั้ง

กรองตามแหล่งที่มาของข้อความ

หากต้องการดูเฉพาะข้อความที่มาจาก URL บางรายการ ให้ใช้แถบด้านข้าง

ประเด็นสำคัญ: ตัวกรองในแถบด้านข้างเป็นแบบชั่วคราว คอนโซลจะไม่เก็บตัวกรองดังกล่าวไว้ในทุกหน้า รวมถึงเมื่อหน้าเว็บ, DevTools และ Chrome โหลดซ้ำ

1. คลิกแสดงแถบด้านข้างของคอนโซล

   

2. คลิกไอคอนขยาย ข้างข้อความ 12 รายการ แถบด้านข้างจะแสดงรายการ URL ที่ทําให้ระบบบันทึกข้อความ เช่น log.js ทำให้เกิดข้อความ 11 รายการ

   

กรองตามข้อความของผู้ใช้

เมื่อคลิกบันทึกข้อมูลก่อนหน้านี้ สคริปต์ชื่อ console.log('Hello, Console!') ได้บันทึกข้อความไปยังคอนโซล ข้อความที่บันทึกจาก JavaScript เช่นนี้เรียกว่าข้อความของผู้ใช้ ในทางตรงกันข้าม เมื่อคุณคลิกสาเหตุของ 404 เบราว์เซอร์จะบันทึกข้อความระดับ Error ที่ระบุว่าไม่พบทรัพยากรที่ขอ ข้อความลักษณะดังกล่าวถือเป็นข้อความในเบราว์เซอร์ คุณสามารถใช้แถบด้านข้างเพื่อกรองข้อความเบราว์เซอร์ออกและแสดงเฉพาะข้อความของผู้ใช้

1. คลิกข้อความสําหรับผู้ใช้ 9 รายการ ข้อความของเบราว์เซอร์จะซ่อนอยู่

   

2. คลิกข้อความ 12 รายการเพื่อแสดงข้อความทั้งหมดอีกครั้ง

ใช้ Console ควบคู่ไปกับแผงอื่นๆ

ในกรณีที่คุณแก้ไขสไตล์ แต่ต้องการตรวจสอบข้อมูลบางอย่างในบันทึกของ Console อย่างรวดเร็ว ใช้ลิ้นชัก

1. คลิกแท็บองค์ประกอบ

2. กด Escape แท็บคอนโซลของลิ้นชักจะเปิดขึ้น ซึ่งจะมีฟีเจอร์ทั้งหมดของ Console ที่คุณใช้ตลอดบทแนะนำนี้

   

ขั้นตอนถัดไป

ยินดีด้วย คุณดูบทแนะนำจนจบแล้ว คลิกแจกถ้วยรางวัลเพื่อรับถ้วยรางวัล

• ดูข้อมูลอ้างอิงเกี่ยวกับคอนโซลเพื่อสำรวจฟีเจอร์และเวิร์กโฟลว์เพิ่มเติมที่เกี่ยวข้องกับ UI ของ Console
• ดูข้อมูลเพิ่มเติมเกี่ยวกับเมธอด console ทั้งหมดที่แสดงในดูข้อความที่บันทึกจาก JavaScript ได้ที่ข้อมูลอ้างอิง Console API และดูเมธอด console อื่นๆ ที่ไม่ได้กล่าวถึงในบทแนะนํานี้
• ดูเริ่มต้นใช้งานเพื่อสำรวจสิ่งที่คุณทำได้ด้วยเครื่องมือสำหรับนักพัฒนาเว็บ
• ดูข้อมูลเพิ่มเติมเกี่ยวกับรูปแบบและวิธีการจัดรูปแบบ console ทั้งหมดได้ที่จัดรูปแบบและจัดสไตล์ข้อความใน Console