การดีบักใน JavaScript: การเข้าสู่ระบบคอนโซลเบราว์เซอร์

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

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

---

---

เหตุใดการบันทึกจึงมีความสำคัญ

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

ที่เกี่ยวข้อง: 6 JavaScript Frameworks ที่ควรค่าแก่การเรียนรู้

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

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

การบันทึกข้อความสตริง

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

---

---

จะหาอะไหล่คอมพิวเตอร์ราคาถูกได้ที่ไหน

การส่งออกa สวัสดีชาวโลก ข้อความ คุณสามารถใช้สิ่งต่อไปนี้

console.log(`Hello World`);

คุณสมบัติพิเศษอีกอย่างของ console.log() method คือความสามารถในการพิมพ์ผลลัพธ์ขององค์ประกอบ DOM หรือโครงสร้างของส่วนหนึ่งของเว็บไซต์ ตัวอย่างเช่น เพื่อส่งออกโครงสร้างขององค์ประกอบร่างกายและทุกอย่างภายในใช้ดังต่อไปนี้

---

---

console.log(document.body)

ผลลัพธ์คือชุดขององค์ประกอบ DOM เป็นแผนผัง HTML

การบันทึกออบเจกต์ JavaScript เชิงโต้ตอบ

NS console.dir () ใช้สำหรับบันทึกคุณสมบัติเชิงโต้ตอบของวัตถุ JavaScript ตัวอย่างเช่น คุณสามารถใช้เพื่อดูองค์ประกอบ DOM ในหน้าเว็บ

ผลลัพธ์ทั่วไปของ console.dir () เมธอดประกอบด้วยคุณสมบัติทั้งหมดของ JavaScript Object ที่ระบุในรูปแบบ JSON ใช้วิธีการด้านล่างเพื่อพิมพ์คุณสมบัติขององค์ประกอบทั้งหมดในเนื้อหาของหน้า HTML:

console.dir(document.body)

การประเมินนิพจน์

คุณอาจคุ้นเคยกับวิธีการยืนยันจากการทดสอบหน่วย—ก็เช่นกัน คอนโซล.ยืนยัน() วิธีการทำงานในลักษณะเดียวกัน ใช้ คอนโซล.ยืนยัน() วิธีการประเมินนิพจน์หรือเงื่อนไข

เมื่อวิธีการยืนยันล้มเหลว คอนโซลจะพิมพ์ข้อความแสดงข้อผิดพลาด มิฉะนั้นจะไม่พิมพ์อะไรเลย ใช้รหัสด้านล่างเพื่อประเมินว่าบุคคลนั้นมีอายุมากกว่า 18 ปีหรือไม่:

let ageLimit = 18;
let yourAge = 12;
const assertFailMessage = 'You have to be older than 18 years of age';

console.assert( yourAge > ageLimit, assertFailMessage);

การยืนยันข้างต้นล้มเหลวและข้อความแสดงข้อผิดพลาดจะพิมพ์ออกมาตามนั้น

บันทึกข้อมูลใน Tables

ใช้ console.table() วิธีการแสดงข้อมูลในรูปแบบตาราง ตัวเลือกที่ดีที่จะแสดงในรูปแบบตาราง ได้แก่ อาร์เรย์หรือข้อมูลออบเจ็กต์

บันทึก : เบราว์เซอร์บางตัว เช่น Firefox มีขีดจำกัดสูงสุด 1,000 แถวที่สามารถแสดงด้วยปุ่ม console.table() กระบวนการ.

สมมติว่าคุณมีอาร์เรย์ของวัตถุรถต่อไปนี้:

let cars = [
{'color':'purple', 'type':'minivan', 'registration': new Date('2021-04-05')},
{'color': 'red', 'type':'minivan', 'registration': new Date ('2021-06-10')}
]

คุณสามารถแสดงอาร์เรย์ด้านบนในตารางโดยใช้วิธีการด้านล่าง:

console.table(cars);

การบันทึกข้อความตามหมวดหมู่

ข้อความคอนโซลของเว็บเบราว์เซอร์ส่วนใหญ่แบ่งออกเป็นสามกลุ่ม: ข้อผิดพลาด คำเตือน และข้อมูล

ข้อผิดพลาด

ในการพิมพ์ข้อความแสดงข้อผิดพลาดไปยังคอนโซลโดยเฉพาะโดยใช้ปุ่ม console.error() เมธอด ข้อความที่เกี่ยวข้องกับข้อผิดพลาดจะแสดงเป็นแบบอักษรสีแดง

console.error('error message');

คำเตือน

หากต้องการพิมพ์คำเตือน ให้ใช้สิ่งต่อไปนี้ เช่นเดียวกับสถานการณ์ส่วนใหญ่ ข้อความเตือนจะแสดงเป็นสีส้ม:

console.warn('warning message');

ข้อมูล

ในการพิมพ์ข้อมูลทั่วไปไปยังคอนโซล ให้ใช้ปุ่ม console.info () กระบวนการ:

console.info('general info message')

ง่ายต่อการกรองหรือค้นหาข้อความในคอนโซลของเบราว์เซอร์เมื่อจัดหมวดหมู่อย่างเหมาะสม

ติดตามการไหลของโปรแกรม

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

เพื่อดู console.trace() ในการดำเนินการ คุณสามารถสร้างสามฟังก์ชัน (ตามด้านล่าง) และวางการติดตามสแต็กในฟังก์ชันใดฟังก์ชันหนึ่ง

function functionOne(){
functionTwo()
}
function functionTwo(){
functionThree()
}
function functionThree(){
console.trace()
}

ในคอนโซลเบราว์เซอร์ของคุณ โทรหรือทริกเกอร์ ฟังก์ชั่นหนึ่ง () และคุณจะได้รับ stack trace ของการเรียกใช้ฟังก์ชันที่พิมพ์ใน Last In First Out Order (LIFO) เนื่องจากเป็นสแต็ก

การดำเนินการโปรแกรมกำหนดเวลา

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

คุณสามารถเรียกใช้ตัวจับเวลาได้สูงสุด 10,000 ตัวต่อหน้าเว็บ โดยเน้นถึงความสำคัญของการติดป้ายกำกับตัวจับเวลาของคุณอย่างเหมาะสม

ในการจับเวลาว่า for loop ใช้เวลานานเท่าใดในการผ่านตัวเลข 1 ถึง 50,000 คุณสามารถใช้ตัวจับเวลาได้ดังนี้

console.time('loop timer 2');
for(i=1; i<50001; i++){
}
console.timeEnd('loop timer 2');


นับ

NS console.count() เมธอดใช้เพื่อติดตามจำนวนครั้งที่ฟังก์ชันหรือโค้ดบางส่วนถูกเรียกใช้ในโปรแกรม ตัวอย่างเช่น เราสามารถติดตามจำนวนครั้งที่ for loop ดำเนินการดังนี้:

for(i=0; i<4; i++ ){
console.count();
}

การจัดกลุ่มข้อความบันทึก

เช่นเดียวกับวิธีการจับเวลา the console.group () , และ console.groupEnd () มักจะใช้วิธีการเป็นคู่

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

console.group('warnings')
console.warn('another warning');
console.warn('This is a warning')
console.groupEnd()

ข้อความสองข้อความภายในกลุ่มคำเตือนจะถูกจัดประเภทตามที่เห็นในผลลัพธ์ด้านล่าง

การล้างคอนโซล

สุดท้ายแต่ไม่ท้ายสุด นี่คือหลายวิธีที่คุณสามารถล้างข้อความบันทึกในคอนโซลเบราว์เซอร์ของคุณ

ใช้ console.clear() วิธีการดังนี้

console.clear()

คุณยังสามารถล้างคอนโซลของเบราว์เซอร์ได้โดยใช้แป้นพิมพ์ลัดของเบราว์เซอร์

Google Chrome : Ctrl + L

Firefox : Ctrl + Shift + L

การใช้คอนโซลเบราว์เซอร์ให้เต็มที่

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

วิธีเปลี่ยนตำแหน่งร้านแอพ

สร้างการตรวจสอบ CAPTCHA จากโครงการต่อไปของคุณและนำทักษะการดีบักใหม่มาทดสอบ!

แบ่งปัน แบ่งปัน ทวีต อีเมล สร้างแบบฟอร์มการตรวจสอบ CAPTCHA โดยใช้ HTML, CSS และ JavaScript

รักษาความปลอดภัยเว็บไซต์ของคุณด้วยการตรวจสอบ CAPTCHA

อ่านต่อไป หัวข้อที่เกี่ยวข้อง

• การเขียนโปรแกรม
• การพัฒนาเว็บ
• JavaScript

เกี่ยวกับผู้เขียน น่าไป(เผยแพร่บทความ 36 ฉบับ)

Mwiza พัฒนาซอฟต์แวร์ตามอาชีพและเขียนอย่างกว้างขวางบน Linux และการเขียนโปรแกรมส่วนหน้า ความสนใจบางส่วนของเขารวมถึงประวัติศาสตร์ เศรษฐศาสตร์ การเมือง และสถาปัตยกรรมองค์กร

เพิ่มเติมจาก Mwiza Kumwenda

สมัครรับจดหมายข่าวของเรา

เข้าร่วมจดหมายข่าวของเราสำหรับเคล็ดลับทางเทคนิค บทวิจารณ์ eBook ฟรี และดีลพิเศษ!

คลิกที่นี่เพื่อสมัครสมาชิก