dev tools
DevTools (Developer Tools) คือชุดเครื่องมือสำหรับนักพัฒนาเว็บที่ถูกสร้างขึ้นมาในเบราว์เซอร์สมัยใหม่โดยตรง (เช่น Chrome, Firefox, Edge, Safari) 🛠️
เครื่องมือนี้ช่วยให้คุณสามารถตรวจสอบ, แก้ไข, และดีบัก (Debug) เว็บไซต์หรือเว็บแอปพลิเคชันของคุณได้แบบ เรียลไทม์ ขณะที่กำลังแสดงผลอยู่ใ นเบราว์เซอร์ ซึ่งเป็นเครื่องมือที่จำเป็นอย่างยิ่งสำหรับนักพัฒนาเว็บ
ส่วนประกอบหลักของ DevTools
DevTools ประกอบด้วยแผง (Panel) ต่างๆ ที่มีหน้าที่เฉพาะเจาะจง เช่น:
• Elements
ใช้สำหรับตรวจสอบและแก้ไขโครงสร้าง HTML (DOM) และ CSS ของหน้าเว็บได้ทันที ทำให้เห็นการเปลี่ยนแปลงของ Layout และ Style แบบสดๆ
• Console
ใช้สำหรับ
◦ ดูข้อความแจ้งเตือน (Log) หรือข้อผิดพลาด (Error) ที่เกิดขึ้นในโค้ด JavaScript
◦ รันคำสั่ง JavaScript เพื่อทดสอบหรือโต้ตอบกับหน้าเว็บได้ทันที
• Sources
ใช้สำหรับดูโค้ดต้นฉบับ (Source Code) ของไฟล์ JavaScript และไฟล์อื่นๆ รวมถึงการตั้ง Breakpoint เพื่อหยุดการทำงานของโค้ดและไล่ดีบักทีละบรรทัดเพื่อค้นหาปัญหา
• Network
ใช้สำหรับตรวจสอบกิจกรรมของเครือข่ายทั้งหมดที่หน้าเว็บร้องขอ เช่น
◦ ไฟล์ที่โหลด (HTML, CSS, JS, รูปภาพ)
◦ เวลาที่ใช้ในการโหลดแต่ ละไฟล์
◦ สถานะของคำขอ (HTTP Status)
• Performance
ใช้สำหรับวิเคราะห์และวัดประสิทธิภาพของหน้าเว็บ เช่น เวลาในการโหลด, การทำงานของ JavaScript, และการแสดงผล (Rendering) เพื่อหาจุดที่ทำให้เว็บทำงานช้าลง
• Application
ใช้สำหรับตรวจสอบข้อมูลที่เว็บไซต์จัดเก็บไว้ในเครื่องของคุณ เช่น Local Storage, Session Storage, และ Cookies
DevTools ช่วยให้คุณสามารถ "แงะ" ดูว่าเบราว์เซอร์กำลังประมวลผลเว็บไซต์ของคุณอย่างไร ทำให้การแก้ไขปัญหา (Debugging) และการปรับปรุงประสิทธิภาพ (Optimization) ทำได้ง่ายและรวดเร็วขึ้นมาก
การใช้งาน DevTools เป็นทักษะพื้นฐานที่นักพัฒนาเว็บทุกคนต้องรู้
รู้จักกับ Chrome DevTools และการใช้งาน สำหรับ Web Developer วิดีโอนี้จะช่วยให้คุณเห็นภาพรวมและวิธีการใช้งานเครื่องมือ DevTools ในเบราว์เซอร์ Chrome.
console.log() คือฟังก์ชันในภาษา JavaScript ที่ใช้สำหรับแสดงผลข้อมูล (เช ่น ข้อความ, ค่าของตัวแปร, อ็อบเจกต์, หรือผลลัพธ์ของการคำนวณ) ไปยังส่วนที่เรียกว่า Console ของเครื่องมือสำหรับนักพัฒนา (DevTools) ในเว็บเบราว์เซอร์ 💻
จุดประสงค์หลักในการใช้งาน
console.log() เป็นเครื่องมือสำคัญที่สุดสำหรับนักพัฒนาเว็บในการทำงานประจำวัน โดยเฉพาะอย่างยิ่งเพื่อ:
1. การดีบัก (Debugging): เป็นวิธีที่ง่ายและรวดเร็วที่สุดในการตรวจสอบว่าโค้ดของคุณทำงานไปถึงจุดใดแล้ว และค่าของตัวแปรต่าง ๆ เป็นไปตามที่คุณคาดหวังหรือไม่
2. การตรวจสอบค่า: ใช้เพื่อพิมพ์ค่าของตัวแปร ณ จุดใดจุดหนึ่งในโค้ดออกมา เพื่อดูว่าตัวแปรนั้น ๆ มีค่าที่ถูกต้องก่อนนำไปใช้ในขั้นตอนต่อไปหรือไม่
3. การติดตามการทำงานของโค้ด: ใช้เพื่อทำเครื่องหมาย (Log) ลำดับการทำงานของฟังก์ชัน หรือเหตุการณ์ (Event) ต่างๆ ที่เกิดขึ้นในแอปพลิเคชัน
ไวยากรณ์พื้นฐาน
คุณ สามารถใส่ข้อมูลที่ต้องการแสดงผลเข้าไปในวงเล็บได้ตั้งแต่หนึ่งค่าขึ้นไป:
JavaScript
// แสดงผลข้อความธรรมดา
console.log("Hello World!");
// แสดงผลค่าของตัวแปร
let total = 50;
console.log(total); // ผลลัพธ์: 50
// แสดงผลหลายค่าพร้อมกัน
let name = "Alice";
let age = 30;
console.log("User:", name, "is", age, "years old.");
เมื่อโค้ดนี้ทำงานในเบราว์เซอร์ ค่าที่ถูกส่งเข้าไปใน console.log() จะไปปรากฏในแผง Console ใน DevTools ของเบราว์เซอร์นั้น ๆ
คำสั่ง console ที่มีประโยชน์อื่น ๆ
นอกจาก log() แล้ว อ็อบเจกต์ console ยังมีฟังก์ชันอื่น ๆ ที่ช่วยในการดีบักได้ดียิ่งขึ้น:
คำสั่ง การใช้งาน
console.warn() แสดงข้อความเตือน (Warning) โดยมักจะเป็นข้อความสีเหลือง ⚠️
console.error() แสดงข้อความข้อผิดพลาด (Error) โดยมักจะเป็นข้อความสีแดง 🛑
console.table() แสดงผลข้อมูลที่เป็น Array หรือ Object ในรูปแบบตารางที่อ่านง่าย
console.time() / console.timeEnd()
นอกจากคุณสมบัติหลักของ DevTools ที่ช่วยให้นักพัฒนาเว็บสามารถตรวจสอบโครงสร้าง HTML, CSS, และ JavaScript แบบเรียลไทม์แล้ว ยังมีเทคนิคและเคล็ดลับเพิ่มเติมที่ควรเรียนรู้เพื่อใช้เครื่องมือนี้ให้เกิดประโยชน์สูงสุด ตัวอย่างเช่น การใช้แผง Network เพื่อวิเคราะห์การโหลดข้อมูลบนเว็บไซต์อย่างละเอียด รวมถึงดูว่าไฟล์ไหนใช้เวลานานหรือมีข้อผิดพลาด HTTP Status ใดเกิดขึ้น ซึ่งการเข้าใจส่วนนี้ช่วยให้นักพัฒนาสามารถปรับปรุงประสิทธิภาพเว็บไซต์ให้โหลดเร็วขึ้นได้อย่างมีประสิทธิภาพ นอกจากนี้ฟังก์ชัน console ต่างๆ อย่าง console.warn() และ console.error() ก็ช่วยเน้นเตือนจุดที่มีปัญหาหรือข้อผิดพลาดด้วยสัญลักษณ์สีสื่อถึงระดับความรุนแรง ทำให้ง่ายต่อการระบุและแก้ไขข้อผิดพลาด ทั้งยังมี console.table() ที่จัดรูปแบบข้อมูล Array หรือ Object ให้อ่านง่ายแบบตาราง เพิ่มความสะดวกในการตรวจสอบข้อมูลจำนวนมาก สำหรับการดีบัก JavaScript แผง Sources ช่วยตั้ง Breakpoints เพื่อหยุดโค้ดตามบรรทัดและเดินโค้ดทีละขั้นตอน เพื่อหาและแก้ไขบั๊กในฟังก์ชันต่างๆ ได้อย่างตรงจุด ส่วนแผง Performance ช่วยวิเคราะห์ระยะเวลาที่โค้ดแต่ละส่วนใช้ประมวลผล รวมถึงการเรนเดอร์หน้าเว็บ เพื่อค้นหาคอขวดและปรับปรุงให้เว็บมีประสิทธิภาพมากขึ้น สุดท้ายการตรวจสอบข้อมูลที่เว็บไซต์จัดเก็บไว้ในเครื่องผู้ใช้ผ่านแผง Application เช่น Local Storage, Session Storage และ Cookies ก็เป็นส่วนสำคัญเพื่อพัฒนาเว็บให้มีการจัดการสถานะและข้อมูลผู้ใช้ได้อย่างเหมาะสม เมื่อรวมความรู้ในการใช้งาน DevTools และฟังก์ชัน console.log() เข้าไว้ด้วยกัน จะช่วยให้การพัฒนาเว็บเป็นไปอย่างมีประสิทธิภาพ การแก้ไขปัญหาได้แม่นยำ และทำให้ผู้พัฒนาสามารถสร้างเว็บที่ตอบโจทย์ได้รวดเร็วมากขึ้น
🥰🥰🥰🤩