dev tools

#พื้นฐานการเขียนเว็ปไซต์

#developer

#devtool

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()