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

Kayce Basques

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

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

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

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

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

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

   

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

   

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

   เครื่องมือสำหรับนักพัฒนาเว็บที่ตรึงไว้ที่ด้านล่างของการสาธิต

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

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

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

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

   

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

   

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

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

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

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

   

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

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

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

   

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

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

   

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

   

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

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

   

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

    

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

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

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

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

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

   

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

   

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

   

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

   

กรองข้อความ

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

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

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

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

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

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

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

   

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

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

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

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

1. พิมพ์ Dave ในช่องตัวกรอง ข้อความทั้งหมดที่ไม่มีสตริง Dave จะ ซ่อนอยู่

   

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

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

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

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

   

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

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

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

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

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

   

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

   

กรองตามข้อความสำหรับผู้ใช้

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

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

   

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

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

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

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

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

   

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

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

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