บทความ IT เจ๋งๆ

5 Chrome DevTools มีประโยชน์ ที่ Developer ควรรู้จักไว้

31-ก.ค.-20

คัมภีร์เทพ IT

ใน Google Chrome  มีชุดเครื่องมือ ที่เรียกว่า Chrome DevTools อยู่ภายใน Browser แต่เชื่อว่ายังมีบาง Features ภายใน Console Utility API ที่หลายคนอาจยังไม่รู้จักซึ่งสามารถใช้งานได้ใน Console ของ Chrome เท่านั้น (ไม่สามารถใช้ Features เท่านี้ได้จาก Script ของคุณ) ดังนั้นบทความนี้จะมาแนะนำ 5 Chrome DevTools มีประโยชน์ ที่ Developer ควรรู้จักไว้

1. $ และ $$

ทั้ง $ และ $$ เป็น Aliases โดยที่ $ เป็น Shortcut สำหรับ document.querySelector() และ $$ เป็น Shortcut สำหรับ document.querySelectorAll()

สมมติว่า เรามี HTML Document อย่างง่าย ที่มีลักษณะดังนี้:

และสมมติเพิ่มเติมว่า เราต้องการที่จะเลือกปุ่มแรกจาก Document นี้ รวมถึงปุ่มทั้งหมด ลองดูจากด้านล่างนี้:

 

คุณจะเห็นว่า $ จะทำการ Return แค่ 1 Element ในขณะที่ $$ จะ Return ออกมาทั้งหมด

หมายเหตุ: หากคุณใช้ Library อย่าง jQuery ซึ่งจะ Assign ค่าอื่นให้กับ $ นั่นหมายความว่า จะเป็นการเขียนทับ Built-In Functionality

2. Inspect() Function

สิ่งนี้สามารถใช้ควบคู่กับในข้อ 1 ได้ สมมติว่า HTML Document ของเรามีขนาดใหญ่มาก (มากเท่าที่จะมากได้) และเราต้องการเลือกปุ่มใน HTML จาก Console หากเราป้อนดังต่อไปนี้เข้าไป:

ทันทีที่เรากด Enter จากนั้น DevTools จะเปลี่ยนจาก Console Tab เป็น Elements Tab และจะทำการแสดงแถบ Highlight ที่ HTML Element ที่ถูกเลือกไว้

คุณจะเห็นได้ว่า เราได้เลือกปุ่มแรกสำเร็จแล้ว

เราสามารถใช้ $$ Shortcut กับ inspect() ได้เช่นกัน มันจะแสดง List ของสิ่งเราต้องการใน Console และเราสามารถ Click มันเพื่อไปยัง DOM ได้ ซึ่งมันสะดวกอย่างมาก

3. Monitor/Unmonitor

หากเราต้องการ Track เมื่อ Method ถูกเรียกใช้บน Page ของเรา เราสามารถใช้ Monitor() Function ได้ ลองดูที่ตัวอย่าง Code ต่อไปนี้ โดยให้สังเกตที่ Methods Object

สมมติว่าเราสร้างตัวอย่างด้านบนด้วย Vue.js โดยสิ่งที่เราต้องการทำก็คือ การ Monitor เมื่อมีการเรียกใช้ applyUgly() Method และเราจะทำสิ่งต่อไปนี้ใน Console:

ตอนนี้ เมื่อใดก็ตามที่ applyUgly Method ถูกเรียกใช้ เจ้า Dev Tools ก็จะบอกเราใน Console

และเมื่อใดก็ตามที่เราไม่ต้องการที่จะดู Method ดังกล่าวแล้ว เราก็เพียงแค่เรียกใช้ Unmonitor เท่านั้นเอง

4. Keys/Values

เจ้าสิ่งนี้มีประโยชน์อย่างยิ่ง สำหรับการดูอย่างรวดเร็วว่า Object ประกอบไปด้วยอะไรบ้าง สมมติว่าเรามี Object ง่าย ๆ ดังต่อไปนี้

การใช้ Keys() และ Values() จะช่วยให้เราสามารถแยกพวกมันออกมา หรือเราสามารถแสดงทั้ง Keys และ Values ด้วยการเรียก Object โดยตรง ดังที่แสดงด้านล่างนี้

5. Table

นอกจากนี้เรายังมี Table() Function สมมติเราใช้ Object เดียวกันกับในข้อที่ 4 ถ้าเราส่งผ่านมันไปยัง Table() เราก็จะได้เห็นการแสดงผลใน Console ดังต่อไปนี้

สรุปประเด็นสำคัญ

  • Chrome DevTools เป็นชุดเครื่องมือที่จะช่วยให้ Developers ทำงานอย่างมีประสิทธิภาพมากขึ้น
  • เครื่องมือเหล่านี้บางตัว ใช้ได้เฉพาะใน Console เท่านั้นและไม่ได้มาจาก Script ของคุณ
  • $ และ $$ เป็น Shortcut สำหรับ document.querySelector() และ document.querySelectorAll() ตามลำดับ
  • inspect() function จะพาคุณข้ามไปยัง DOM Element ใด ๆ ใน Elements Tab ที่คุณสามารถกำหนดเป้าหมายด้วย CSS Selector
  • monitor() function และ unmonitor() function จะช่วยให้คุณได้รับการแจ้งเตือนทุกครั้งที่มีการเรียกใช้ Method ด้วยการเขียนMessage ลงใน Console ซึ่ง Message จะมีข้อมูลเกี่ยวกับ Arguments ที่ส่งผ่านไปยัง Method
  • keys() function และ values() function จะช่วยให้คุณสามารถสืบค้น Object ใน Page ของคุณว่ามันประกอบด้วยข้อมูลใดบ้าง
  • table() function จะช่วยนำเสนอข้อมูลในรูปแบบตารางสำหรับ Object ใด ๆ ที่คุณส่งผ่านไปให้

ที่มา:  https://medium.com/

 

 

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

 

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

เพิ่มเพื่อน

 

บทความล่าสุด

ประเภทบทความ