บทนำ
การเรียนรู้วิธีตรวจสอบหน้าเว็บบน Mac เป็นการปลดล็อกทักษะทรงพลังที่ใช้ได้ในทุกวัน คุณสามารถดูได้ว่าเว็บไซต์ถูกสร้างขึ้นอย่างไร ทดสอบการเปลี่ยนแปลงการออกแบบ แก้ไขปัญหาการจัดวางเลย์เอาต์ หรือเช็คว่าทำไมฟีเจอร์บางอย่างถึงไม่ทำงาน ทุกอย่างนี้เกิดขึ้นภายในเบราว์เซอร์ของคุณและเฉพาะบน Mac ของคุณเท่านั้น
‘Inspect Element’ หรือ ‘Developer Tools’ อาจฟังดูซับซ้อน แต่การใช้งานพื้นฐานนั้นง่ายมาก เพียงไม่กี่คลิก คุณก็สามารถดูโครงสร้าง HTML ของหน้า ปรับแต่งสไตล์ CSS ตรวจสอบข้อผิดพลาดในคอนโซล และสำรวจคำขอเครือข่ายได้ เครื่องมือเหล่านี้มีประโยชน์สำหรับผู้เริ่มต้น นักการตลาด นักออกแบบ ผู้ทดสอบ QA และนักพัฒนา
คู่มือนี้เน้นวิธีตรวจสอบหน้าเว็บบน Mac ด้วยเบราว์เซอร์หลัก 4 ตัว ได้แก่ Safari, Google Chrome, Mozilla Firefox และ Microsoft Edge สำหรับแต่ละเบราว์เซอร์ คุณจะได้เรียนรู้วิธีเปิดเครื่องมือ เห็นภาพรวมของพาเนลหลัก ๆ และใช้มันในสถานการณ์จริง
ก่อนที่คุณจะลงลึกในขั้นตอนของแต่ละเบราว์เซอร์ จะเป็นประโยชน์หากได้ทำความเข้าใจเสียก่อนว่า ‘inspect’ จริง ๆ แล้วหมายถึงอะไร และทำไมมันถึงมีประโยชน์มากบน macOS
‘Inspect a Page on Mac’ หมายถึงอะไร?
การตรวจสอบหน้าเว็บบน Mac หมายถึงการเปิดเครื่องมือสำหรับนักพัฒนาที่ถูกฝังอยู่ในเบราว์เซอร์ เพื่อดูและปรับแต่งการทำงานของหน้าเว็บ เครื่องมือเหล่านี้ให้คุณดูโครงสร้าง การตกแต่ง และพฤติกรรมของหน้าเว็บแบบเรียลไทม์โดยไม่ต้องไปแตะไฟล์บนเซิร์ฟเวอร์
ทำความเข้าใจการทำงานของหน้าเว็บ (HTML, CSS, JavaScript)
ทุกหน้าเว็บที่คุณเข้าชมบน Mac ของคุณใช้เทคโนโลยีหลัก 3 อย่าง:
- HTML (HyperText Markup Language) กำหนดโครงสร้างของหน้า ควบคุมองค์ประกอบอย่างเช่น หัวข้อ ย่อหน้า รูปภาพ ลิงก์ และปุ่ม
- CSS (Cascading Style Sheets) ควบคุมหน้าตา กำหนดฟอนต์ สี ระยะห่าง เลย์เอาต์ และเอฟเฟกต์ต่าง ๆ
- JavaScript เพิ่มการโต้ตอบและพฤติกรรมให้หน้าเว็บ จัดการป๊อปอัป สไลเดอร์ คอนเทนต์ไดนามิก การตรวจสอบฟอร์ม และอื่น ๆ
เมื่อคุณตรวจสอบหน้าเว็บ เบราว์เซอร์จะแสดงเลเยอร์ต่าง ๆ เหล่านี้ คุณสามารถเลือกส่วนที่มองเห็นบนหน้าและเห็นได้ทันทีว่า HTML element และกฎ CSS ใดที่ควบคุมมัน
Inspect Element และ Developer Tools ทำอะไรจริง ๆ
เมื่อคุณเลือก ‘Inspect’ หรือ ‘Inspect Element’ บนหน้าเว็บ:
- เบราว์เซอร์จะแบ่งออกเป็น 2 ส่วนหลัก:
- มุมมองหน้าเว็บปกติ
- พาเนลเครื่องมือสำหรับนักพัฒนา (เรียกว่า DevTools หรือ Web Inspector)
- เครื่องมือจะไฮไลต์องค์ประกอบที่เลือกทั้งในมุมมองหน้าเว็บและในต้นไม้ HTML
- คุณสามารถแก้ไข HTML เปลี่ยน CSS ดูบันทึก JavaScript และตรวจสอบคำขอเครือข่ายได้
ความสามารถหลักประกอบด้วย:
- เลือกและไฮไลต์องค์ประกอบบนหน้า
- แก้ไข HTML และแอตทริบิวต์โดยตรงใน DOM tree
- ปรับกฎ CSS และเห็นการเปลี่ยนแปลงได้ทันที
- ตรวจสอบข้อความในคอนโซลและข้อผิดพลาดของ JavaScript
- ดูว่าคำขอเครือข่ายโหลดอย่างไรและเมื่อไร
ทุกอย่างนี้เกิดขึ้นในเครื่องเฉพาะในเบราว์เซอร์ของคุณ สิ่งที่คุณทำผ่าน DevTools จะไม่เปลี่ยนเว็บไซต์จริงสำหรับผู้ใช้คนอื่น
ทำไมการตรวจสอบหน้าเว็บบน Mac จึงมีประโยชน์ในปี 2024
ในปี 2024 การรู้วิธีตรวจสอบหน้าเว็บบน Mac เป็นทักษะที่มีคุณค่าสำหรับหลายบทบาท:
- ผู้เริ่มต้นและนักเรียนใช้เพื่อเรียนรู้ว่าเว็บไซต์จริง ๆ ถูกจัดโครงสร้างและตกแต่งอย่างไร
- นักออกแบบใช้ทดสอบเลย์เอาต์ ระยะห่าง ตัวพิมพ์ และการเปลี่ยนสี ก่อนส่งฟีดแบ็กด้านดีไซน์
- นักการตลาดและผู้ดูแลคอนเทนต์ใช้เพื่อพรีวิวการเปลี่ยนข้อความ ตรวจตำแหน่ง CTA และยืนยันโค้ดติดตามต่าง ๆ
- นักพัฒนาและผู้ทดสอบ QA ใช้เพื่อดีบักปัญหา HTML, CSS และ JavaScript อย่างรวดเร็ว
เพราะเบราว์เซอร์สมัยใหม่ส่วนใหญ่บน macOS มีเครื่องมือคล้ายกัน เมื่อคุณเข้าใจการตรวจสอบหน้าเว็บในเบราว์เซอร์หนึ่ง คุณก็สามารถนำทักษะเดียวกันไปใช้กับเบราว์เซอร์อื่นได้ ต่อไปคุณจะได้เตรียม Mac และเบราว์เซอร์ของคุณเพื่อให้ขั้นตอนการตรวจสอบทำงานได้อย่างราบรื่น
การเตรียมตัวก่อนตรวจสอบหน้าเว็บบน Mac ของคุณ
การเตรียมเล็กน้อยช่วยให้คุณหลีกเลี่ยงปัญหาภายหลังได้ ซอฟต์แวร์ที่อัปเดต การตั้งค่าคลิกขวาที่ใช้งานได้ และการเลือกเบราว์เซอร์ที่เหมาะสม จะทำให้การตรวจสอบหน้าเว็บบน Mac ของคุณง่ายและเชื่อถือได้มากขึ้น
อัปเดต macOS และเบราว์เซอร์ของคุณ
เริ่มจากตรวจสอบให้มั่นใจว่าทุกอย่างเป็นเวอร์ชันล่าสุด:
- อัปเดต macOS
- คลิกเมนู Apple แล้วไปที่ System Settings
- เปิด General → Software Update
-
ติดตั้งอัปเดตที่มีอยู่เพื่อให้ Mac ของคุณปลอดภัยและเข้ากันได้
-
อัปเดตเบราว์เซอร์ของคุณ
- Safari จะอัปเดตมาพร้อมกับ macOS
- ใน Chrome, Firefox และ Edge ให้เปิดเมนูหลักแล้วไปที่หน้า ‘About’ เพื่อเรียกใช้อัปเดต
เบราว์เซอร์ที่อัปเดตแล้วจะมี DevTools ที่เสถียรขึ้นและรองรับฟีเจอร์เว็บสมัยใหม่ได้ดียิ่งขึ้น
เลือกเบราว์เซอร์ที่เหมาะสำหรับการตรวจสอบ
บน Mac คุณมีตัวเลือกที่ดีหลายตัวสำหรับการตรวจสอบหน้าเว็บ:
- Safari: เบราว์เซอร์เริ่มต้น เหมาะสำหรับทดสอบการทำงานของหน้าเว็บสำหรับผู้ใช้ Apple บน macOS และ iOS
- Google Chrome: เป็นที่นิยมในหมู่นักพัฒนา มี DevTools ทรงพลังและอัปเดตบ่อย
- Mozilla Firefox: ยอดเยี่ยมสำหรับการแสดงภาพเลย์เอาต์ CSS อย่าง flexbox และ grid
- Microsoft Edge: พัฒนาบน Chromium ดังนั้น DevTools จึงคล้ายกับ Chrome มาก
คุณไม่จำเป็นต้องใช้ทุกเบราว์เซอร์ทุกวัน แต่การมีอย่างน้อย Safari และ Chrome ติดตั้งไว้จะเป็นประโยชน์ สิ่งนี้ทำให้คุณเปรียบเทียบพฤติกรรมระหว่าง WebKit (Safari) และ Chromium (Chrome และ Edge) ได้ เมื่ออัปเดตและเลือกเบราว์เซอร์เรียบร้อยแล้ว ให้ตั้งค่าอีกอย่างที่สำคัญคือการคลิกขวา
การตั้งค่า Trackpad และเมาส์พื้นฐานสำหรับการคลิกขวาบน Mac
การตรวจสอบหน้าเว็บมักเริ่มจากการคลิกขวาหรือคลิกเสริม เพื่อให้มั่นใจว่าทำงานได้:
- เปิด System Settings บน Mac ของคุณ
- ไปที่ Trackpad หรือ Mouse ตามอุปกรณ์ที่คุณใช้
- เปิดใช้งาน Secondary click
- เลือกท่าทางที่คุณต้องการ:
- แตะหรือคลิกสองนิ้วบน trackpad
- คลิกด้านขวาหรือมุมขวาของเมาส์
คุณยังสามารถกดปุ่ม Control ค้างไว้แล้วคลิก หากคุณชอบใช้คีย์บอร์ดช่วยได้ เมื่อการตั้งค่าพื้นฐานเสร็จเรียบร้อย คุณก็พร้อมเรียนรู้วิธีตรวจสอบหน้าเว็บบน Mac ในแต่ละเบราว์เซอร์ เริ่มจาก Safari
วิธีตรวจสอบหน้าเว็บใน Safari บน Mac
Safari เป็นเบราว์เซอร์เริ่มต้นบน macOS และเป็นเป้าหมายสำคัญในการทดสอบ การเรียนรู้วิธีตรวจสอบหน้าเว็บบน Mac ด้วย Safari จะช่วยให้คุณเข้าใจว่าหน้าเว็บทำงานอย่างไรสำหรับผู้ใช้ Apple จำนวนมาก
เปิดใช้งานเมนู Develop ใน Safari
Safari ซ่อนเครื่องมือสำหรับนักพัฒนาจนกว่าคุณจะเปิดใช้งาน เพื่อเปิดเมนู Develop:
- เปิด Safari
- คลิก Safari ในแถบเมนูด้านบนแล้วเลือก Settings (หรือ Preferences ในบางเวอร์ชัน)
- ไปที่แท็บ Advanced
- ติ๊กถูกที่ช่อง ‘Show Develop menu in menu bar’
ขณะนี้คุณจะเห็นเมนู Develop ในแถบเมนูของ macOS เมนูนี้มี Web Inspector ตัวเลือก JavaScript console และฟีเจอร์สำหรับนักพัฒนาอื่น ๆ
เปิด Web Inspector ด้วยการคลิกขวา (Inspect Element)
เมื่อเมนู Develop ทำงานแล้ว คุณสามารถตรวจสอบองค์ประกอบบนหน้าใดก็ได้:
- เข้าเว็บไซต์ใน Safari
- คลิกขวา (หรือ Control-คลิก) ที่องค์ประกอบที่คุณต้องการตรวจสอบ
- เลือก Inspect Element
Safari จะเปิด Web Inspector ซึ่งมักจะถูกยึดไว้ที่ด้านล่างหรือด้านข้างของหน้าต่าง องค์ประกอบที่คุณคลิกจะถูกไฮไลต์ทั้งในหน้าและในพาเนล HTML
ใช้เมนู Develop เพื่อแสดง Web Inspector
คุณยังสามารถเปิด Web Inspector ได้โดยไม่ต้องคลิกขวา:
- ในแถบเมนู คลิก Develop
- เลือก Show Web Inspector
บนการตั้งค่าหลายแบบ คุณยังสามารถใช้ Option + Command + I เพื่อสลับเปิด/ปิด Web Inspector ได้ วิธีนี้เป็นประโยชน์เมื่อคุณต้องการตรวจสอบทั้งหน้า ไม่ใช่แค่บางองค์ประกอบ
ภาพรวมของพาเนลใน Safari Web Inspector (Elements, Styles, Console, Network)
Safari Web Inspector มีพาเนลหลายส่วน ส่วนที่สำคัญที่สุดคือ:
- Elements: แสดงโครงสร้าง HTML (DOM tree) การเลือก node จะไฮไลต์บนหน้า
- Styles: แสดงกฎ CSS ที่ใช้กับองค์ประกอบที่เลือก คุณสามารถเปิด/ปิดกฎหรือเพิ่มกฎใหม่ได้
- Console: แสดงข้อความจาก JavaScript และให้คุณรันคำสั่ง JavaScript ได้
- Network: แสดงรายการคำขอเครือข่ายทั้งหมดของหน้า รวมถึงรูปภาพ CSS สคริปต์ และการเรียก API
คุณสามารถสลับระหว่างพาเนลได้จากไอคอนด้านบนของหน้าต่าง Web Inspector การสำรวจพาเนลเหล่านี้ช่วยให้คุณเห็นภาพชัดเจนว่าหน้าเว็บถูกประกอบขึ้นอย่างไร
ตัวอย่างง่าย ๆ ใน Safari: แก้ไขข้อความ เปลี่ยนสี ซ่อนองค์ประกอบ
ต่อไปนี้คือวิธีใช้ Web Inspector ใน Safari แบบเร็ว ๆ:
- แก้ไขข้อความ
- ในพาเนล Elements ค้นหาข้อความที่คุณต้องการเปลี่ยน
- ดับเบิลคลิกที่ข้อความภายใน HTML element
-
พิมพ์ข้อความใหม่แล้วกด Enter
-
เปลี่ยนสีหรือขนาดฟอนต์
- เลือกองค์ประกอบในพาเนล Elements
- ใน sidebar ของ Styles ให้มองหากฎ ‘color’ หรือ ‘font-size’
-
คลิกค่าที่มีอยู่แล้วปรับเปลี่ยน หน้าเว็บจะอัปเดตทันที
-
ซ่อนองค์ประกอบ
- เมื่อเลือกองค์ประกอบแล้ว ให้เพิ่ม
display: none;ในพาเนล Styles - องค์ประกอบที่เลือกจะหายไปจากหน้า
การแก้ไขเหล่านี้จะเปลี่ยนเฉพาะมุมมองในเบราว์เซอร์ของคุณ เมื่อคุณรีเฟรชหน้า ทุกอย่างจะกลับค่าเดิม หลังจากคุณใช้ Safari ได้คล่องแล้ว คุณสามารถใช้ขั้นตอนคล้ายกันนี้ใน Google Chrome ได้
วิธีตรวจสอบหน้าเว็บใน Google Chrome บน Mac
Google Chrome มี DevTools ที่ทรงพลังและใช้งานง่ายที่สุดชุดหนึ่ง หากคุณรู้วิธีตรวจสอบหน้าเว็บบน Mac ใน Safari แล้ว Chrome จะให้ความรู้สึกคุ้นเคยแต่มีฟีเจอร์มากกว่า
เปิด Chrome DevTools ด้วยการคลิกขวาและคีย์ลัด
วิธีเปิด DevTools ใน Chrome:
- วิธีคลิกขวา
- คลิกขวา (หรือ Control-คลิก) ที่องค์ประกอบบนหน้า
-
เลือก Inspect จากเมนู
-
คีย์ลัด
- กด Command + Option + I เพื่อเปิดหรือปิด DevTools
- กด Command + Option + J เพื่อเปิด DevTools โดยโฟกัสที่แท็บ Console
Chrome จะเปิด DevTools ยึดไว้ด้านขวาหรือด้านล่างของหน้าต่าง คุณสามารถเปลี่ยนตำแหน่งหรือเปิดในหน้าต่างแยกได้จากเมนูจุดสามจุดในแถบเครื่องมือของ DevTools
นำทางในพาเนล Elements และ Styles
พาเนล Elements เป็นหัวใจของ Chrome DevTools สำหรับการตรวจสอบโครงสร้างหน้าเว็บ:
- ด้านซ้ายแสดง DOM tree ของ HTML
- ด้านขวาแสดงพาเนล Styles พร้อม box model
การกระทำที่มีประโยชน์ได้แก่:
- คลิกไอคอนตัวเลือกองค์ประกอบ (รูปเคอร์เซอร์บนสี่เหลี่ยม) เพื่อเลือกองค์ประกอบโดยตรงบนหน้า
- ขยายและยุบ node HTML เพื่อดูองค์ประกอบลูก
- แก้ไขข้อความ แอตทริบิวต์ และแท็กด้วยการดับเบิลคลิก
- เพิ่มหรือปรับกฎ CSS ในพาเนล Styles และดูผลลัพธ์ทันที
Chrome ยังแสดง margin padding และ border รอบองค์ประกอบในส่วน box model ซึ่งช่วยให้ดีบักปัญหาระยะห่างและการจัดตำแหน่งได้ง่ายขึ้น
ใช้ Console เพื่อดูข้อผิดพลาดและรันคำสั่งง่าย ๆ
แท็บ Console เป็นหน้าต่างสู่กิจกรรมของ JavaScript:
- แสดงข้อผิดพลาดและคำเตือนเมื่อสคริปต์ล้มเหลวหรือเกิดปัญหา
- แสดงข้อความ log จากโค้ดที่ใช้
console.log() - ให้คุณรันคำสั่ง JavaScript โดยตรงบนหน้าปัจจุบัน
แม้ว่าคุณจะไม่ใช่นักพัฒนา การตรวจสอบคอนโซลช่วยให้เข้าใจได้ว่าทำไมฟีเจอร์บางอย่างถึงเสีย ตัวอย่างเช่น คุณอาจเห็นว่าไฟล์โหลดไม่สำเร็จหรือคำขอ API คืนค่าด้วยข้อผิดพลาด
ตรวจสอบกิจกรรมเครือข่ายและประสิทธิภาพของหน้า
พาเนล Network และ Performance ช่วยวิเคราะห์หน้าที่ช้าหรือโหลดไม่สำเร็จ:
- พาเนล Network
- แสดงทุกคำขอที่หน้าทำ: HTML, CSS, JavaScript รูปภาพ ฟอนต์ และ API
- แสดงรหัสสถานะ ขนาดไฟล์ และเวลาในการโหลด
-
ให้คุณกรองคำขอตามประเภทหรือค้นหาตามชื่อไฟล์ได้
-
พาเนล Performance
- บันทึกการทำงานด้านประสิทธิภาพ
- ไฮไลต์สคริปต์และงานที่บล็อก main thread
- ช่วยให้คุณเห็นว่าการเรนเดอร์และการรันสคริปต์ใช้เวลามากที่สุดที่จุดใด
พาเนลเหล่านี้มีประโยชน์เป็นพิเศษเมื่อผู้ใช้รายงานว่าหน้าดูช้าหรือโหลดคอนเทนต์บางอย่างไม่ขึ้น
ตัวอย่างใช้งานจริงใน Chrome: แก้เลย์เอาต์และทดสอบการเปลี่ยนดีไซน์
นี่คือตัวอย่างการใช้ Chrome DevTools ในทางปฏิบัติ:
- แก้ปุ่มที่จัดตำแหน่งผิด
- ใช้ตัวเลือกองค์ประกอบเพื่อเลือกปุ่ม
- ตรวจสอบ margin padding และการตั้งค่า flex หรือ grid ในพาเนล Styles
-
ปรับค่าจนปุ่มจัดตำแหน่งได้ถูกต้อง
-
ทดสอบชุดสีใหม่
- เลือกส่วนหรือส่วนหัว
- เปลี่ยนกฎ ‘background-color’ และ ‘color’
-
ใช้ color picker เพื่อทดลองเฉดสีและระดับคอนทราสต์ต่าง ๆ
-
แสดงคอนเทนต์ที่ถูกซ่อน
- ตรวจสอบ overlay, modal หรือแบนเนอร์
- เพิ่ม
display: none;ชั่วคราวหรือปรับค่า z-index - ดูว่าหน้าตาและการทำงานของหน้าเปลี่ยนไปอย่างไรเมื่อไม่มีองค์ประกอบเหล่านั้น
เมื่อคุณทำงานกับ Chrome ได้คล่องแล้ว ควรลองใช้ Firefox ซึ่งมีเครื่องมือที่ยอดเยี่ยมสำหรับเลย์เอาต์ CSS ที่ซับซ้อนบน Mac ของคุณ
วิธีตรวจสอบหน้าเว็บใน Firefox บน Mac
Firefox Developer Tools มีเครื่องมือช่วยมองภาพเลย์เอาต์ CSS grid และ flexbox ได้ดีมาก สิ่งนี้เป็นประโยชน์เมื่อคุณต้องการทำความเข้าใจหรือดีบักดีไซน์แบบ responsive สมัยใหม่บน Mac ของคุณ
เปิด Firefox Developer Tools ด้วย Inspect Element
วิธีเริ่มตรวจสอบใน Firefox:
- คลิกขวา (หรือ Control-คลิก) บนองค์ประกอบใดก็ได้แล้วเลือก Inspect
- หรือกด Command + Option + I เพื่อสลับเปิด/ปิดเครื่องมือ
Firefox จะเปิด Inspector ที่ด้านล่างหรือด้านข้างของหน้าต่าง และไฮไลต์องค์ประกอบที่เลือกทั้งบนหน้าและในมุมมอง HTML
ใช้พาเนล Inspector, Rules และ Layout
ส่วนสำคัญใน Firefox DevTools ได้แก่:
- Inspector: แสดง DOM tree และให้คุณเลือกองค์ประกอบบนหน้าได้
- Rules: แสดงกฎ CSS สำหรับองค์ประกอบที่เลือกและให้คุณแก้ไขได้
- Layout: ให้การควบคุมโดยละเอียดสำหรับคอนเทนเนอร์ flexbox และ grid
คุณสามารถแก้ไข HTML และ CSS ได้เช่นเดียวกับใน Chrome และ Safari การเปลี่ยนแปลงจะแสดงบนหน้าทันที ทำให้คุณเห็นผลลัพธ์ได้รวดเร็ว
แสดงภาพ Box Model, Flexbox และ Grid
Firefox โดดเด่นด้านการแสดงภาพเลย์เอาต์:
- มุมมอง box model แสดง content padding border และ margin อย่างชัดเจน
- เครื่องมือ flexbox ไฮไลต์ flex container และแสดงทิศทางและการจัดตำแหน่งของ items
- เครื่องมือ grid แสดงโอเวอร์เลย์บนหน้าให้เห็นเส้นกริด แทร็ก และช่องว่าง
เครื่องมือเหล่านี้ทำให้การทำความเข้าใจเลย์เอาต์ responsive ที่ซับซ้อนและการดูว่าเหตุใดองค์ประกอบจึงอยู่ตำแหน่งนั้นเป็นเรื่องง่ายขึ้น
ลองใช้โหมด Responsive Design สำหรับขนาดหน้าจอต่าง ๆ
Firefox มีโหมด Responsive Design ที่ให้คุณจำลองอุปกรณ์ต่าง ๆ ได้:
- เปิด DevTools
- คลิกไอคอน responsive design หรือกด Command + Option + M
- เลือกขนาดอุปกรณ์สำเร็จรูปหรือระบุขนาดเอง
คุณสามารถหมุน viewport, จำกัดความเร็วเครือข่าย และทดสอบเลย์เอาต์และการทำงานบนขนาดหน้าจอต่าง ๆ ได้โดยไม่ต้องออกจาก Mac หลังจากสำรวจ Firefox แล้ว คุณอาจต้องการเบราว์เซอร์ที่ใช้ Chromium อย่าง Microsoft Edge เพื่อการทดสอบที่ครอบคลุมและความคุ้นเคยกับเครื่องมือแบบ Chrome
วิธีตรวจสอบหน้าเว็บใน Microsoft Edge บน Mac
Microsoft Edge สำหรับ macOS พัฒนาบน Chromium ดังนั้น DevTools จึงแทบจะเหมือนกับ Chrome หากคุณรู้วิธีตรวจสอบหน้าเว็บบน Mac ด้วย Chrome แล้ว คุณจะใช้งาน Edge ได้อย่างคุ้นเคย
ติดตั้งและเปิด Microsoft Edge บน macOS
หากยังไม่ได้ติดตั้ง Edge:
- เปิดเบราว์เซอร์ใดก็ได้แล้วไปที่หน้าเว็บดาวน์โหลด Microsoft Edge อย่างเป็นทางการ
- ดาวน์โหลดเวอร์ชัน macOS ของ Edge
- ลากแอป Edge ไปไว้ในโฟลเดอร์ Applications
- เปิด Edge จากโฟลเดอร์ Applications หรือผ่านการค้นหาด้วย Spotlight
เมื่อ Edge ทำงานแล้ว คุณสามารถตรวจสอบหน้าเว็บได้เช่นเดียวกับใน Chrome
เปิด Edge DevTools (คล้ายกับ Chrome)
วิธีตรวจสอบองค์ประกอบใน Edge:
- คลิกขวา (หรือ Control-คลิก) บนอองค์ประกอบบนหน้าแล้วเลือก Inspect
- หรือกด Command + Option + I เพื่อสลับเปิด/ปิด DevTools
DevTools จะเปิดยึดไว้ด้านข้างหรือด้านล่างของหน้าต่าง เลย์เอาต์ พาเนล และไอคอนต่าง ๆ จะเหมือนกับ Chrome DevTools อย่างมาก
พาเนลสำคัญที่ควรรู้ใน Edge สำหรับการตรวจสอบอย่างรวดเร็ว
พาเนลหลักใน Edge ที่ควรโฟกัสคือ:
- Elements: แสดง DOM ของ HTML และให้คุณเลือก node บนหน้าได้
- Styles: แสดงกฎ CSS และ box model; ให้แก้ไขแบบสดได้
- Console: แสดงข้อความและข้อผิดพลาดจาก JavaScript; ให้คุณรันคำสั่งได้
- Network: แสดงคำขอเครือข่ายทั้งหมดและสถานะ
คุณสามารถทำสิ่งเดียวกับใน Chrome ได้ เช่น แก้ไข HTML และ CSS ซ่อนหรือปรับสไตล์องค์ประกอบ และวิเคราะห์พฤติกรรมเครือข่าย เมื่อครอบคลุมเบราว์เซอร์หลักทั้งหมดแล้ว ถึงเวลาไปดูวิธีใช้ Inspect tools บน Mac ในสถานการณ์จริง
วิธีใช้ Inspect Element บน Mac ในทางปฏิบัติ
การรู้วิธีตรวจสอบหน้าเว็บบน Mac จะมีคุณค่าสูงสุดเมื่อคุณนำไปใช้กับงานจริง บทบาทต่าง ๆ สามารถใช้เครื่องมือเดียวกันเพื่อแก้ปัญหาและสำรวจไอเดียที่แตกต่างกัน
ทดสอบการเปลี่ยนแปลงด้านภาพอย่างรวดเร็วโดยไม่ต้องยุ่งกับโค้ดจริง
นักออกแบบและนักพัฒนามักใช้ DevTools เพื่อทดลองปรับแต่งภาพก่อนเปลี่ยนโค้ดจริง:
- ปรับฟอนต์ สี และขนาดตัวอักษรเพื่อเพิ่มความอ่านง่าย
- ปรับ margin padding และการจัดตำแหน่งเพื่อให้เลย์เอาต์สะอาดตาขึ้น
- ทดลองความกว้างและความสูงต่าง ๆ เพื่อปรับเลย์เอาต์บนหน้าจอหลายขนาด
เพราะการเปลี่ยนแปลงเป็นแบบชั่วคราว คุณจึงสามารถทดลองไอเดียที่กล้าได้โดยไม่เสี่ยง
ซ่อนป๊อปอัป โอเวอร์เลย์ และองค์ประกอบที่น่ารำคาญเพื่อภาพหน้าจอที่สะอาด
ป๊อปอัปและโอเวอร์เลย์สามารถทำให้ภาพหน้าจอหรือเดโมดูแย่ลง เครื่องมือ Inspect ช่วยให้คุณลบออกชั่วคราวได้:
- ใช้ตัวเลือกองค์ประกอบเพื่อเลือกป๊อปอัปหรือโอเวอร์เลย์
- เพิ่ม
display: none;ในพาเนล Styles - ตรวจสอบว่าองค์ประกอบหายไป แล้วค่อยจับภาพหน้าจอ
วิธีนี้มีประโยชน์สำหรับงานนำเสนอ เอกสาร และสื่อการฝึกอบรม
พรีวิวการเปลี่ยนข้อความสำหรับทีมการตลาดและคอนเทนต์
ทีมการตลาดและคอนเทนต์สามารถใช้เครื่องมือ Inspect เพื่อพรีวิวการเปลี่ยนข้อความ:
- แก้ไขพาดหัว ข้อความบนปุ่ม และเนื้อความโดยตรงในมุมมอง HTML
- ตรวจว่าความยาวของข้อความส่งผลต่อการตัดบรรทัดบนมือถือและเดสก์ท็อปอย่างไร
- ทดลองคำทางเลือกและเปรียบเทียบผลด้านภาพ
สิ่งนี้ทำให้การปรับข้อความให้ลงตัวง่ายขึ้นก่อนส่งคอนเทนต์สุดท้ายให้นักพัฒนาหรือเผยแพร่ใน CMS
เรียนรู้การออกแบบเว็บด้วยการสำรวจ HTML และ CSS ของเว็บไซต์อื่น
ถ้าคุณอยากเรียนรู้การออกแบบเว็บสมัยใหม่ เครื่องมือ Inspect ให้ตัวอย่างจริงจากโลกใช้งาน:
- ตรวจสอบส่วนต่าง ๆ ของเว็บไซต์ที่คุณชื่นชอบ
- ดูว่าพวกเขาจัดโครงสร้าง HTML สำหรับ header, hero section และ grid อย่างไร
- ศึกษากฎ CSS สำหรับตัวพิมพ์ ระยะห่าง และคอมโพเนนต์
เมื่อคุณดูตัวอย่างจำนวนมาก คุณจะเริ่มมองเห็นแพทเทิร์นและแนวทางปฏิบัติที่ดี ซึ่งสามารถนำมาปรับใช้กับโปรเจกต์ของคุณเองได้
ดีบักพื้นฐานสำหรับปุ่ม ลิงก์ และเลย์เอาต์ที่เสีย
เครื่องมือ Inspect ยังจำเป็นสำหรับการดีบักอย่างรวดเร็ว:
- ตรวจว่าปุ่มถูกองค์ประกอบที่มองไม่เห็นบังอยู่จนคลิกไม่ได้หรือไม่
- ยืนยันว่าลิงก์มี ‘href’ ถูกต้องหรือช่องฟอร์มมีแอตทริบิวต์ที่เหมาะสม
- มองหากฎ CSS ที่ซ่อนองค์ประกอบหรือดันให้หลุดออกนอกหน้าจอ
เมื่อเข้าใจวิธีใช้จริงแล้ว การพบปัญหาเล็กน้อยระหว่างการตรวจสอบถือเป็นเรื่องปกติ ส่วนถัดไปจะอธิบายปัญหาทั่วไปและวิธีแก้
การแก้ปัญหาทั่วไปเมื่อใช้ Inspect หน้าเว็บบน Mac
แม้ว่าคุณจะเข้าใจวิธีตรวจสอบหน้าเว็บบน Mac แล้ว แต่อาจเจอปัญหาอย่างเมนูหาย เครื่องมือไม่ตอบสนอง หรือพฤติกรรมแปลก ๆ ส่วนใหญ่สามารถแก้ได้ง่ายเมื่อคุณรู้ว่าจะดูตรงไหน
‘Inspect Element’ ไม่แสดงในเมนู
หากคุณไม่เห็นตัวเลือก ‘Inspect’ หรือ ‘Inspect Element’ เมื่อคลิกขวา:
- ใน Safari ตรวจสอบให้แน่ใจว่าเปิดเมนู Develop แล้ว ใน Settings → Advanced
- มั่นใจว่าคุณกำลังคลิกภายในเนื้อหาหน้าเว็บ ไม่ใช่บนแถบเครื่องมือหรือแท็บของเบราว์เซอร์
- ลองใช้คีย์ลัดสำหรับเปิด DevTools แทนการคลิกขวา
หากปัญหายังคงอยู่ ให้รีสตาร์ตเบราว์เซอร์แล้วลองใหม่
DevTools ไม่ยอมเปิดหรือแครชบ่อย
หาก DevTools ไม่ยอมเปิดหรือแครชบ่อย:
- ปิดทุกแท็บในเบราว์เซอร์แล้วออกจากแอป
- เปิดเบราว์เซอร์อีกครั้งแล้วลองเปิด DevTools บนเว็บไซต์ง่าย ๆ
- ปิดส่วนขยายของเบราว์เซอร์ที่อาจรบกวน DevTools
- หากจำเป็น ลองเปิดหน้าเดียวกันในเบราว์เซอร์อื่นอย่าง Chrome หรือ Firefox
การรีสตาร์ต Mac ของคุณก็ช่วยเคลียร์ปัญหาชั่วคราวที่ส่งผลต่อพฤติกรรมของเบราว์เซอร์ได้เช่นกัน
การเปลี่ยนแปลงไม่แสดงบนหน้าหรือหายไปเมื่อรีเฟรช
หากดูเหมือนว่าการเปลี่ยนแปลงของคุณไม่มีผล:
- ตรวจสอบว่าคุณเลือกองค์ประกอบที่ถูกต้องใน DOM tree
- มองหากฎ CSS ที่ถูกขีดฆ่าในพาเนล Styles ซึ่งหมายความว่ามันถูก override ด้วยกฎที่เฉพาะเจาะจงกว่าหรือมีความสำคัญกว่า
- มั่นใจว่าคุณกำลังแก้ไขพร็อพเพอร์ตีที่ถูกต้อง (เช่น ‘color’ สำหรับตัวอักษร ‘background-color’ สำหรับพื้นหลัง)
จำไว้ว่าการแก้ไขใน DevTools เป็นแบบชั่วคราว เมื่อคุณรีเฟรชหน้าเว็บหรือเปลี่ยนหน้า การเปลี่ยนแปลงของคุณจะหายไปและเว็บไซต์จะกลับสู่สภาพเดิม
จัดการกับคอนเทนต์ไดนามิก iFrames และ Shadow DOM
เว็บไซต์สมัยใหม่ใช้โครงสร้างขั้นสูงที่อาจทำให้ผู้เริ่มต้นสับสน:
- คอนเทนต์ไดนามิกอาจปรากฏหรือย้ายตำแหน่งหลังจากสคริปต์ทำงาน ดังนั้นองค์ประกอบอาจเปลี่ยนตำแหน่งใน DOM
- iFrames ฝังหน้าอื่นไว้ภายในหน้าหลัก คุณอาจต้องตรวจสอบภายในเฟรมเอง
- Shadow DOM ซ่อนโครงสร้างภายในของบางคอมโพเนนต์ DevTools มักจะแสดงหัวข้อพิเศษสำหรับ shadow root
หากคุณหาองค์ประกอบที่มองเห็นอยู่ไม่เจอ ให้ตรวจสอบเฟรม เอกสารที่ฝังอยู่ หรือส่วนของ Shadow DOM ใน DOM tree เมื่อคุณเข้าใจโครงสร้างเหล่านี้แล้ว การนำทางในหน้าที่ซับซ้อนจะง่ายขึ้นมาก
ชีตโกงคีย์ลัดสำหรับการตรวจสอบหน้าเว็บบน Mac
คีย์ลัดช่วยให้คุณตรวจสอบหน้าเว็บได้เร็วและมีประสิทธิภาพยิ่งขึ้นบน macOS แม้ว่าแต่ละเบราว์เซอร์จะมีชุดปุ่มของตัวเอง แต่หลายคีย์ลัดมีรูปแบบคล้ายกัน
คีย์ลัด Safari Web Inspector บน macOS
คีย์ลัด Safari ที่มีประโยชน์ ได้แก่:
- เปิดหรือปิด Web Inspector: Option + Command + I
- แสดง JavaScript Console (ในที่ที่รองรับ): Option + Command + C
จำไว้ว่าคุณต้องเปิดเมนู Develop ก่อนในการตั้งค่า Advanced ของ Safari เพื่อให้คีย์ลัดเหล่านี้ทำงาน
คีย์ลัด Chrome DevTools บน macOS
ใน Google Chrome ลองใช้คีย์ลัดเหล่านี้:
- เปิดหรือปิด DevTools: Command + Option + I
- เปิด DevTools พร้อม Console: Command + Option + J
- เปิด Command Menu: Command + Shift + P
- สลับ device toolbar (โหมด responsive): Command + Shift + M
Command Menu ช่วยให้คุณสลับระหว่างพาเนลและคำสั่งต่าง ๆ ได้รวดเร็วโดยไม่ต้องคลิกผ่านเมนู
คีย์ลัด Firefox และ Edge บน macOS
ใน Firefox บน Mac:
- เปิดหรือปิด DevTools: Command + Option + I
- สลับ Responsive Design Mode: Command + Option + M
ใน Microsoft Edge บน Mac (คล้าย Chrome):
- เปิดหรือปิด DevTools: Command + Option + I
- เปิด Console: Command + Option + J
รูปแบบที่คล้ายกันนี้ทำให้คุณย้ายไปมาระหว่างเบราว์เซอร์ได้ง่ายโดยไม่ต้องเรียนรู้ใหม่ทั้งหมด
เคล็ดลับทำงานให้เร็วขึ้นด้วยพาเนลและแท็บ
เพื่อเร่งขั้นตอนการทำงานของคุณเมื่อใช้ Inspect หน้าบน Mac:
- ใช้ไอคอนตัวเลือกองค์ประกอบเพื่อเลือกองค์ประกอบโดยตรงบนหน้า แทนการไล่หาใน DOM tree
- กด Command + F ภายใน DevTools เพื่อค้นหาข้อความ HTML หรือ selector
- จัดเรียงใหม่หรือยก DevTools ออกไปในหน้าต่างแยก หากคุณต้องการพื้นที่หรือเลย์เอาต์เฉพาะ
เมื่อคุณใช้คีย์ลัดและการจัดเลย์เอาต์ได้คล่อง การตรวจสอบหน้าจะลื่นไหลและมีประสิทธิภาพ ตอนนี้คุณสามารถสรุปทุกอย่างเข้าด้วยกันได้แล้ว
บทสรุป
การรู้วิธีตรวจสอบหน้าเว็บบน Mac เปลี่ยนเบราว์เซอร์ของคุณให้กลายเป็นเวิร์กช็อปทรงพลัง ด้วยการใช้ Safari, Chrome, Firefox และ Edge คุณสามารถเห็น HTML, CSS และ JavaScript ที่กำหนดรูปแบบของทุกเว็บไซต์ ทดสอบไอเดียด้านดีไซน์ทันที ตรวจหาปัญหาเลย์เอาต์ และตรวจสอบกิจกรรมใน Console และ Network ได้
คุณได้เรียนรู้วิธีเปิดใช้งานเมนู Develop ใน Safari วิธีเปิด DevTools ด้วยการคลิกขวาและคีย์ลัด และวิธีสลับไปมาระหว่างพาเนลหลักอย่าง Elements, Styles, Console และ Network นอกจากนี้คุณยังเห็นวิธีใช้เครื่องมือเหล่านี้อย่างเป็นรูปธรรมสำหรับการทดลองด้านดีไซน์ การจับภาพหน้าจอที่สะอาด การพรีวิวคอนเทนต์ การเรียนรู้การออกแบบเว็บ และการดีบักพื้นฐาน
เนื่องจากการเปลี่ยนแปลงผ่าน DevTools เป็นเพียงชั่วคราวและมีผลเฉพาะมุมมองของคุณ คุณจึงสามารถทดลองได้อย่างอิสระโดยไม่เสี่ยง ด้วยการฝึกใช้งานสม่ำเสมอ การตรวจสอบหน้าเว็บบน Mac จะกลายเป็นเรื่องธรรมชาติและเป็นส่วนสำคัญของการท่องเว็บ ออกแบบ ทดสอบ และพัฒนาเว็บของคุณ
คำถามที่พบบ่อย
การตรวจสอบหน้าเว็บบน Mac ของฉันจะทำให้เกิดการเปลี่ยนแปลงถาวรกับเว็บไซต์หรือไม่?
ไม่ เมื่อคุณตรวจสอบหน้าเว็บบน Mac และแก้ไข HTML หรือ CSS ใน DevTools การเปลี่ยนแปลงของคุณจะมีผลเฉพาะสิ่งที่คุณเห็นในเบราว์เซอร์เท่านั้น การเปลี่ยนแปลงเหล่านี้เป็นแบบชั่วคราวและเก็บไว้ในหน่วยความจำ ทันทีที่คุณรีเฟรชหน้าเว็บหรือปิดแท็บ เว็บไซต์จะกลับสู่สภาพเดิม หากต้องการเปลี่ยนแปลงแบบถาวร คุณต้องแก้ไขไฟล์ซอร์สจริงหรือใช้ CMS ของเว็บไซต์และเผยแพร่การอัปเดตบนเซิร์ฟเวอร์
ในปี 2024 เบราว์เซอร์ใดบน Mac เหมาะที่สุดสำหรับการตรวจสอบหน้าเว็บ?
สำหรับผู้ใช้ส่วนใหญ่ Chrome และ Safari เป็นจุดเริ่มต้นที่ดีที่สุดบน Mac Chrome DevTools ทรงพลังมากและถูกใช้อย่างแพร่หลายในทีมพัฒนา ในขณะที่ Safari Web Inspector แสดงให้เห็นว่าเว็บไซต์ทำงานอย่างไรสำหรับผู้ใช้ macOS และ iOS Firefox เหมาะมากสำหรับการมองเห็นเลย์เอาต์แบบ flexbox และ grid และ Edge เป็นตัวเลือกทางเลือกที่แข็งแกร่งซึ่งใช้พื้นฐานจาก Chromium ผู้เชี่ยวชาญจำนวนมากติดตั้งเบราว์เซอร์อย่างน้อยสองตัวเพื่อใช้ตรวจสอบข้ามเบราว์เซอร์
ฉันสามารถตรวจสอบหน้าเว็บบน Mac ได้โดยไม่ต้องมีความรู้ด้านการเขียนโค้ดหรือไม่?
ได้ คุณสามารถตรวจสอบหน้าเว็บบน Mac ได้แม้ว่าคุณจะไม่รู้วิธีเขียนโค้ด เริ่มจากการทำสิ่งง่ายๆ เช่น คลิกขวาเพื่อ inspect เปลี่ยนข้อความ สลับสี หรือซ่อนป๊อปอัป เมื่อเวลาผ่านไปคุณจะเริ่มคุ้นเคยกับแท็ก HTML พื้นฐานและคุณสมบัติ CSS แต่คุณไม่จำเป็นต้องมีทักษะการเขียนโค้ดเชิงลึกเพื่อให้ได้ประโยชน์จาก DevTools นักการตลาด นักออกแบบ นักเรียน และผู้ใช้ที่อยากรู้อยากเห็นทุกคนสามารถได้รับประโยชน์จากการเรียนรู้พื้นฐานของการตรวจสอบหน้าเว็บ