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

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

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

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

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

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

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

   

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

   

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

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

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

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

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

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

   

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

   

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

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

   • คลิกแท็บคอนโซล
   • กด Control+[ หรือ Command+[ (Mac) จนกว่าคอนโซลจะอยู่ในโฟกัส
   • เปิดเมนูคำสั่ง พิมพ์ Console เลือกคำสั่งแสดงแผงคอนโซล แล้วกด 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 สําหรับแถวเดียวเท่านั้น ตรวจสอบโค้ดเพื่อหาสาเหตุ

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

   

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

    

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

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

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

เบราว์เซอร์จะบันทึกข้อความไปยัง Console ด้วย ซึ่งมักเกิดขึ้นเมื่อเกิดปัญหากับหน้า

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

   

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

   

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

   

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

   

กรองข้อความ

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

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

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

ในการกรองตามระดับการบันทึก ให้ทำดังนี้

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

   

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

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

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

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

   

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

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

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

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

   

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

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

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

1. คลิก Show Console Sidebar

   

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

   

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

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

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

   

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

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

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

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

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

   

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

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

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