⭐️ ของเด็ดที่เราอาจไม่เคยรู้ ! สำหรับใครที่มาสาย Web แล้วรู้สึกว่า การที่จะทดสอบดูว่า Element ตรงไหนเปลี่ยน อาจจะต้องจ้องจนสายตาเสีย แต่รู้หรือไม่ว่า Google Chrome มีเครื่องมือช่วยเรา Debug มานานแล้วนะ !!
.
สำหรับใครที่ใช้ Inspect ดู Element ต่าง ๆ ใน Google Chrome เพื่อดูข้อมูล หรือ แก้ไขไฟล์หน้าเว็บอยู่แล้วอาจจะเคยแก้หน้าเว็บกันจนสนุก หรือ ไว้ใช้ดูส่วนที่เปลี่ยนไปเวลาทำ JavaScript (รวมถึงดูส่วนต่าง ๆ ว่าโหลดขึ้นไหม, Performance เป็นยังไง ?)
.
🔥 แต่วันนี้เรามีฟีเจอร์เด็ดมาแนะนำคือ เราสามารถ Detect ส่วนที่ถูกเปลี่ยนแปลงในหน้าเว็บเราได้ด้วยกับเครื่องมือ "Break on" ! โดยเมื่อ Google Chrome พบว่ามีส่วนที่เปลี่ยนแปลงไปของหน้าเว็บมันจะหยุดการทำงาน และ ชี้ให้ดูว่า
.
"ข้อมูลตรงส่วนนี้มันถูกเปลี่ยนแปลงแล้วนะ ! มันเปลี่ยนแปลงมาจากสคริปตรงนี้นะ !!"
.
โดยรูปแบบการ Break on ที่สามารถตรวจจับได้คือ
.
✅Subtree modifications จะทำการ break การทำงานเมื่อพบการเปลี่ยนแปลงของข้อมูล Element รูปแบบ Subtree ของหน้านั้น ๆ
.
✅Attribute modifications ทำการ break เมื่อพบว่า Attribute ของบรรทัดที่เรา Break on ไว้ถูกเปลี่ยนแปลง เช่น เปลี่ยนสี ขนาดอะไรทำนองนี้ก็ได้เลย
.
✅Node removal ทำการ break เมื่อพบว่า Node ที่เรา Break on ไว้ถูกลบไปนั่นเอง !
.
⚡️ ดังนั้นแค่เราใช้เครื่องมือให้ถูกก็ไม่ต้องมานั่งจ้องกันจนสายตาเสียกันแล้ว :D ถ้าใครไม่เคยใช้ให้ทำตามง่าย ๆ ดังนี้
.
คลิกขวาหน้าเว็บในส่วนที่ต้องการ Detect > กดปุ่ม Inspect > เลือกบรรทัดที่ต้องการ Detect > เลือกเมนู Break on ที่เราต้องการได้เลย
.
หากใครสนใจทดสอบก็สามารถทดลองได้จากหน้าเว็บไซต์นี้ได้เลยครับผม :D
.
https://apvarun.github.io/…/…/Detecting%20Element%20Updates/
.
#BorntoDev - 🦖 Digital Academy ให้การพัฒนาทักษะเทคโนโลยีเป็นเรื่องสนุกไปพร้อมกับเรา
同時也有10000部Youtube影片,追蹤數超過2,910的網紅コバにゃんチャンネル,也在其Youtube影片中提到,...
「javascript attribute」的推薦目錄:
- 關於javascript attribute 在 BorntoDev Facebook 的精選貼文
- 關於javascript attribute 在 コバにゃんチャンネル Youtube 的最佳貼文
- 關於javascript attribute 在 大象中醫 Youtube 的最佳解答
- 關於javascript attribute 在 大象中醫 Youtube 的最佳貼文
- 關於javascript attribute 在 Get the Value of an Attribute on an Element - JavaScript Tutorial 的評價
- 關於javascript attribute 在 How to set HTML5 required attribute in Javascript? - Stack ... 的評價
- 關於javascript attribute 在 jQuery .attr() vs .prop() | Summer。桑莫。夏天 的評價
- 關於javascript attribute 在 Use Data Attribute In HTML and JavaScript - YouTube 的評價
- 關於javascript attribute 在 Use controller extension attribute in Javascript - Salesforce ... 的評價
- 關於javascript attribute 在 How to remove type="text/javascript attribute from script tag in ... 的評價
javascript attribute 在 コバにゃんチャンネル Youtube 的最佳貼文
javascript attribute 在 大象中醫 Youtube 的最佳解答
javascript attribute 在 大象中醫 Youtube 的最佳貼文
javascript attribute 在 How to set HTML5 required attribute in Javascript? - Stack ... 的推薦與評價
... <看更多>
相關內容
javascript attribute 在 jQuery .attr() vs .prop() | Summer。桑莫。夏天 的推薦與評價
Attribute 與Property 的差異、jQuery 相關程式碼解析。 ... 意即,HTML 和XML 頁面的API = DOM + Scripting Language(例如:JavaScript)。 ... <看更多>
javascript attribute 在 Get the Value of an Attribute on an Element - JavaScript Tutorial 的推薦與評價
In this tutorial, you will learn how to use the JavaScript getAttribute() method to get the value of a specified attribute on an element. ... <看更多>