Chrome DevTools เป็นเครื่องมือจำเป็นสำหรับ Developer แม้ Browser อื่นมี Troubleshooting Tools ดีๆ DevTools โดดเด่นด้วย Multi-functional Interface และความนิยม
Chrome เป็น Browser ยอดนิยมสำหรับ Dev เพราะ Debugging Tools อันทรงพลัง ใช้ DevTools ง่าย แต่ต้องเข้าใจการทำงานเพื่อใช้ประโยชน์สูงสุด
Chrome Developer Tools ทำงานอย่างไร?
DevTools แก้ปัญหาเว็บผ่าน Error Console และ Debugging/Monitoring Tools ใช้ DevTools เปิดเผย Frontend Loopholes และ Monitor การแสดงผลบน Mobile/Tablet
DevTools ทำ Real-time Edits บน Code (JavaScript, HTML, CSS) ได้ผลทันที
การเปลี่ยนแปลงผ่าน DevTools ไม่ส่งผล Permanent แค่แสดง Expected Outcome ชั่วคราว หาก Apply จริง ช่วยหาวิธี Load เว็บเร็วขึ้น และแก้ Bug ง่ายขึ้น
วิธีเข้าถึง Chrome DevTools
หลายวิธี: Shortcut: Mac: Cmd + Opt + I | Windows: Ctrl + Shift + I
หรือ: 3 จุดมุมขวาบน > More tools > Developer tools หรือ Right-click Page > Inspect
ใช้ Chrome Developer Tools วินิจฉัยเว็บไซต์
ดูเว็บบน Smartphone
DevTools Mode Render Half-sized Webpage แต่ไม่ใช่ Real View บน Phone/Tablet
DevTools ให้ Switch Mobile Screen Types/Versions: Toggle Inspect Mode > คลิก Responsive Dropdown (มุมซ้ายบน DevTools) > เลือก Device > Webpage Render ปรับ Size ตาม Device
เข้าถึง Source Files ของ Webpage
DevTools เข้าถึง Files ที่สร้าง Webpage: คลิก Sources (บน DevTools Menu) Expose File System + Editing
Search Source Files: คลิก Search (เหนือ Console) หากไม่มี Search: Mac: Cmd + Opt + F | Windows: Ctrl + Shift + F
Live Edits Webpage
DevTools วัตถุประสงค์หลัก: Instant Fake Edit Elements บน Webpage Switch to DevTools > Elements > Right-click Code Point > Edit as HTML
Edit CSS Properties (Non-inline): Sources > Select CSS File > Cursor บรรทัดที่ต้องการ > Live Edit ได้ Feedback ทันที
Reload Page = Revert Original Edit มองเห็นเฉพาะคุณ ไม่กระทบ User อื่น
Debug JavaScript ด้วย DevTools Console
Debug JS ดีที่สุด: DevTools รายงาน Invalid Scripts + ตำแหน่ง Bug แน่นอน
ควรเปิด DevTools ตลอดขณะ Design Website JS เช่น console.log() แสดง Result ใน Console หาก Run สำเร็จ
Default: Console รายงาน JS Issues ตามหาได้: ส่วนล่าง DevTools หรือ คลิก Console บน DevTools Window
Monitor Resource Loading จาก Database
Console ให้ Detail Resources ที่ Load ไม่ได้จาก Database ไม่ใช่ Best Way Debug Backend แต่บอก Resources ที่ Return 404 หลัง Query
เปลี่ยน Orientation ของ DevTools
เปลี่ยนตำแหน่ง DevTools: คลิก 3 จุดใน DevTools (ไม่ใช่ Browser) > Dock side เลือกตำแหน่ง
Install Chrome DevTools Extensions
ติดตั้ง Language/Framework-specific Extensions ที่ทำงานกับ DevTools Debug Webpage ได้มีประสิทธิภาพมากขึ้น
หา Extensions ได้ที่ Chrome's Featured DevTools Extensions Gallery
Check Security Issues บน Website
DevTools Assess Security: Web Security Certificates, Connection Security, etc. คลิก Security บน DevTools
Security Tab Overview Security Details + Potential Threats
Audit Website
DevTools Feature: Check Overall Performance ตาม Parameters เฉพาะ
เข้าถึง: Lighthouse บน DevTools > Select Parameters > Tick Mobile หรือ Desktop > Generate report
Assess Runtime/Loading Performance: Performance > Record Button (Run-time) หรือ Reload Button (Load-time) > Stop > Results
ใช้ประโยชน์จาก Chrome DevTools
DevTools ทำได้มากกว่า Simple Debugging ใช้ง่ายสำหรับ Programmer ทุกระดับ เรียนรู้ Frontend Basics ได้จาก Source Code เว็บที่เยี่ยมชม
อาจพบ Options อื่นๆ ที่ไม่ได้กล่าว ลองเล่น Features ได้ ไม่ทำลาย Website
