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

Kayce Basques

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

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

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

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

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

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

   

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

   

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

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

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

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

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

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

   

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

   

   ระบบจะบันทึกข้อความเมื่อมีการเรียก 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 สําหรับแถวเดียวเท่านั้น โปรดตรวจสอบโค้ดเพื่อหาสาเหตุ

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

   

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

    

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

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

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

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

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

   

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

   

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

   

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

   

กรองข้อความ

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

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

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

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

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

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

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

   

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

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

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

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

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

   

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 ข้อความเพื่อแสดงข้อความทั้งหมดอีกครั้ง

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

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

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

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

   

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

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

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