COOL IT IDEAS AND STUFF

5 Chrome DevTools Utilities You Need to Know

31-Jul-20

คัมภีร์เทพ IT

See the original english version Click here!

 

ใน 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 เป็นเพื่อนนะคะ

เพิ่มเพื่อน

 

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

Categories