ทุกสิ่งที่คุณควรรู้เกี่ยวกับ Developer Console

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

วิธีเข้าถึง Developer Console

อย่างแรกเลย: มาดูกันว่าคุณจะเปิดคอนโซลนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์ได้อย่างไร หากคุณเป็นผู้ใช้ Firefox เพียงคลิกที่เมนู (มุมบนขวา) และมองหาตัวเลือก Web Developer ดังที่คุณเห็นด้านล่าง:

จากนั้นเลือก เว็บคอนโซล :

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

ในทางกลับกัน หากคุณเป็นผู้ใช้ Chrome ขั้นตอนจะคล้ายกันมาก เพียงเข้าไปที่เมนู เลือก More Tools แล้วเลือก Developer Tools :

วิธีใช้ Developer Console

คอนโซล JavaScript ของเบราว์เซอร์มีประโยชน์อย่างมากในการดีบักโค้ดของเรา ดูว่าสคริปต์ของเรากำลังบันทึกอะไรอยู่ และเรียกใช้คำสั่งเล็กๆ น้อยๆ และดูผลกระทบบนเว็บแบบเรียลไทม์ ในฐานะนักพัฒนาปลั๊กอินสำหรับ WordPress ยูทิลิตี้หลักที่คอนโซลมีสำหรับฉันนั้นเห็นได้ชัดว่ามีการดีบัก ดังนั้นเรามาดูรายละเอียดของสิ่งที่นำเสนอได้อย่างแม่นยำ

# 1 ระดับการบันทึกที่แตกต่างกัน

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

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

• debug และ log แสดงข้อความธรรมดา
• info แสดงข้อความข้อมูล ใน Firefox จะแสดงไอคอน "ข้อมูล" ถัดจากข้อความ
• warn แสดงคำเตือนซึ่งมักจะชี้ให้เห็นปัญหาหรือบางอย่างที่ไม่ถูกต้องนัก โดยปกติจะเน้นด้วยสีเหลืองและมีไอคอนคำเตือน
• error มักจะถูกสงวนไว้สำหรับข้อผิดพลาดที่ร้ายแรงที่สุด (นั่นคือ สิ่งที่ล้มเหลวจริงๆ) ซึ่งแสดงเป็นสีแดงและพิมพ์สแต็กเทรซ (นั่นคือ ฟังก์ชันใดที่สร้างข้อผิดพลาดและผู้เรียกทั้งหมด)

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

#2 การตรวจสอบเวลาดำเนินการ

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

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

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

 console.time( 'Timer' ); // code we want to monitor... console.timeEnd( 'Timer' );

เมื่อรหัสถึง timeEnd คุณจะเห็นเวลาที่ใช้ในการเรียกใช้:

 Timer: 655ms - timer ended

สังเกตว่าเมื่อเราเริ่มและหยุดตัวจับเวลา เราจะตั้งชื่อให้ (ในตัวอย่างของฉันคือ “ตัวจับเวลา”) เนื่องจากเราสามารถสร้างตัวนับได้มากเท่าที่ต้องการ โดยแต่ละตัวมีชื่อเป็นของตัวเอง และให้ตัวนับทั้งหมดทำงานพร้อมกัน

# 3 เคาน์เตอร์อัตโนมัติ

หากคุณสนใจที่จะควบคุมจำนวนการดำเนินการของฟังก์ชันใดๆ ในโค้ดของคุณ หรือบันทึกจำนวนครั้งที่ลูปรัน ให้ใช้ console.count ทุกครั้งที่มีการใช้งานฟังก์ชัน คุณจะได้รับบันทึกใหม่ในคอนโซลของคุณด้วยค่าปัจจุบันของตัวนับ:

#4 วิธีจัดรูปแบบบันทึกของคุณ

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

สตริงข้อความ

ในตอนต้นของโพสต์นี้ ฉันได้พูดคุยสั้น ๆ เกี่ยวกับวิธีบันทึกทั้งหมดที่ console มี ตัวอย่างที่ฉันแชร์พิมพ์ข้อความธรรมดา นั่นคือข้อความนี้:

 console.log( 'Hello world!' );

พิมพ์ข้อความนี้:

 Hello world!

เกิดอะไรขึ้นถ้าเราต้องการพิมพ์วัตถุแทน? นี้:

 obj = { x: 1, y: { a: 'hola' } }; console.log( obj );

กลายเป็นสิ่งนี้:

แต่ถ้าเราต้องการบันทึกหลายๆ อย่างล่ะ? เราต้องใช้หลายสายเพื่อ console.log ? คำตอบคือไม่ ไม่จำเป็น เราสามารถบันทึกทุกอย่างที่เราต้องการได้ด้วยการโทรเพียงครั้งเดียว:

การจัดกลุ่มบันทึก…

เมื่อเราเริ่มมีบันทึกจำนวนมากในโค้ดของเรา (เช่น ที่นี่):

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

 Retrieving x... Retrieving y... Compute result using 2 and 3 Getting max value Result is 6

โชคดีที่วัตถุ console เสนอวิธีแก้ปัญหาสองวิธี: group และ groupEnd เราสามารถจัดกลุ่มข้อความบันทึกของเราได้ เพียงสร้างกลุ่ม (เช่น หนึ่งกลุ่มต่อฟังก์ชัน):

และมันจะแสดงออกมาดังนี้:

โต๊ะ

เมื่อเราทำงานกับการรวบรวมข้อมูล การแสดงภาพนั้นไม่ใช่เรื่องง่ายเสมอไป ตัวอย่างเช่น สมมติว่าเรามีรายการดังต่อไปนี้:

 data = [ { id: 1, name: 'David', surname: 'Aguilera' }, { id: 2, name: 'Ruth', surname: 'Raventos' }, { id: 3, name: 'Antonio', surname: 'Villegas' }, ];

ถ้าเรา console.log พวกเขานี่คือสิ่งที่เราได้รับ:

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

#5 วิธีแสดงประเภทที่ซับซ้อนอย่างถูกต้อง (วัตถุและอาร์เรย์)

สุดท้ายนี้ ผมขอจบการโพสต์ของวันนี้ด้วยสิ่งที่นักพัฒนาหลายคนไม่ค่อยรู้... สมมุติว่า คุณกำลังทำงานในโครงการและต้องการดูค่าของวัตถุก่อนและหลังการอัปเดต ในการทำเช่นนี้ เป็นไปได้ที่คุณจะ console.log .log ตัวแปรก่อนทำการเปลี่ยนแปลงและหลังจากนั้น ดังที่คุณเห็นใน GIF ต่อไปนี้:

ในตัวอย่างก่อนหน้านี้ เราบันทึกอ็อบเจ็กต์ที่มีค่าที่ตั้งไว้ที่ 1 จากนั้นเราจะอัปเดตค่าเป็น 200 และล็อกออบเจกต์อีกครั้ง อาจมีคนคาดหวังว่าบันทึกแรกจะแสดงค่าเดิม (1) เสมอ แต่สังเกตว่าเมื่อเราขยายวัตถุ จะแสดงค่าใหม่ 200 ได้อย่างไร เกิดอะไรขึ้น

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

ในการแก้ปัญหานี้ เพียงส่งสำเนาไปที่บันทึก (ไลบรารี เช่น lodash และวิธีการ cloneDeep ของมันจะทำให้สิ่งนี้ง่ายมาก) ด้วยวิธีนี้ ออบเจ็กต์แรกที่บันทึกไว้จะเป็นสำเนาที่ไม่สามารถกลายพันธุ์ได้ (เพราะคุณจะไม่มีข้อมูลอ้างอิง):

และนั่นคือทั้งหมดสำหรับวันนี้! ฉันหวังว่าคุณจะชอบโพสต์นี้ หากคุณต้องการข้อมูลเพิ่มเติมเกี่ยวกับทุกสิ่งที่คุณสามารถทำได้ด้วย console โปรดดูเอกสารประกอบใน MDN อย่าลืมที่จะแบ่งปันกับเพื่อนของคุณ ? และถ้าคุณทำอะไรที่แตกต่างออกไปหรือมีคำแนะนำในการแบ่งปันกับผู้อ่านของเรา แสดงความคิดเห็น ?

Imagen destacada the Tim van der Kuip บน Unsplash