PasaComputer
แชร์
ร่วมสังคมแห่งการเรียนรู้กับภาษาคอมพิวเตอร์
02/12/2020
🕶 วันนี้เราจะมาโชว์ Feature ลับที่ซ่อนอยู่ใน Chrome DevTools กัน ไปดูกันเลย!!
📌 console.table()
หลายๆ คนคงคุ้นเคยกับ console.log ที่พ่นข้อมูลออกมาทาง console อยู่แล้วใช่มะ ซึ่งถ้าข้อมูลเป็นลักษณะ Array 2มิติ หรือเป็น Array ของ Object การใช้ console.log จะทำให้อ่านผลลัพธ์ลำบากอยู่สักหน่อย ลองใช้ console.table แทนซิ อ่านง่ายกว่าเดิมเยอะ
📌 Color picker
เราสามารถเรียก color picker ขึ้นมาเพื่อจิ้มสีจากตรงไหนของหน้าเว็บก็ได้ เริ่มต้นด้วยการเลือก element ที่เราจะเปลี่ยนสี จากนั้น click ช่องแสดงสี หลัง css atrribute ที่เป็นสี (เช่น color/background-color) จากนั้นก็จิ้มตรงที่สีที่เราต้องการได้เลย
📌 Find where CSS Property is Defined
เราสามารถหาว่าเจ้า css Property ถูก define จากไฟล์ไหนด้วยการกด CTRL + Click ที่ property ที่เราต้องการทราบได้เลย
📌 Design Mode
เราสามารถแก้ไขทุกๆ อย่างบนหน้าเว็บได้โดยตรงด้วย Design Mode เพียงแค่ คลิกหรือ highlight ตรงจุดที่เราต้องการและแก้ไข หรือ Copy/paste ได้เลย
ใช้คำสั่งนี้ใน console เพื่อเปิดใช้งาน Design Mode
document.designMode = "on"
📌 จำลองสถานการณ์ Internet ช้า
หลายๆ คนคุ้นเคยกับ tab Network ใน DevTools กันอยู่แล้วใช่มะ เราสามารถดูข้อมูล Request ต่างๆ ได้จากที่นี่ ซึ่งเราสามารถจำลองสถานการณ์ที่ internet ช้า ได้ด้วยละ
1 เลือก tab Network
2 กดตรงคำว่า Online เพื่อเปลี่ยนสถานการณ์การ Connect จะขึ้นตัวเลือกอื่นๆ ขึ้นมา ให้เราเลือก add
3 จากนั้นจะปรากฏหน้า Network Throttling Profiles ให้เรากดปุ่ม Add custom profile... และเพิ่ม Profile ใหม่ได้เลย
‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣❥
🔥 เรียน 9 เทคนิคการดีบัคจาวาสคริปต์ด้วย Console https://www.youtube.com/watch?v=lvZ4UsfIRG0
🔥 เรียนฟรี JavaScript for Beginner เข้าใจพื้นฐานใน 1 ชั่วโมง https://www.youtube.com/watch?v=Tz5Wk1yPlBE
ไม่อยากตกเทรนด์ มาเป็นเพื่อนกับเราเพื่อรับข่าวสารใหม่ๆ ทุกเดือน https://lin.ee/doMvX9R
27/11/2020
🏆 JavaScript Coding Challenge #10 ฝึกทำโจทย์ทีละนิด เพื่อชีวิตที่เก่งขึ้นในทุกวัน
🤔 วันนี้เรามาฝึกโจทย์ที่ใช้ทดสอบความรู้การทำงานของ JavaScript ในเบื้องลึกกันบ้าง โดยโจทย์ในวันนี้เป็นโจทย์สำภาษณ์งานจริงที่ต่างประเทศ ถามว่าถ้ารันฟังก์ชัน marvel() แล้ว ผลลัพธ์ของ console.log ทั้ง 2 ตำแหน่งจะได้เป็นอะไร เพราะอะไร?
📌 ดูโจทย์เต็มๆ ได้ที่ https://codepen.io/lvarayut/pen/YzWbyKp?editors=0010
ใครทำได้แล้วคอมเม้นท์โค้ดกันเข้ามาได้เลย แล้วอย่าลืมส่งคำท้าต่อให้เพื่อน จะได้เก่งกันครบแก๊ง!!
‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣‣❥
- 🔥 อยากเก่ง JavaScript ต้องรู้หลักการทำงานของ Functional Programming เรียนฟรีได้ที่ https://youtu.be/NGbnxiKN9Zw
คลิกที่นี่เพื่อเป็นสมาชิก?
