วิธีตรวจสอบองค์ประกอบใน Chrome, Safari และ Firefox บน Mac

เว็บไซต์เป็นแก่นของยุคปัจจุบันของเรา เราใช้เพื่อค้นหาข้อมูลทางธุรกิจ เรายังใช้เพื่อการวิจัยสำหรับกิจกรรมการทำงานหรือโรงเรียนของเรา ด้วยเหตุนี้ เว็บไซต์จึงถูกสร้างขึ้นจากภาษาโปรแกรมเว็บที่ยากต่อการเข้าใจด้วยตาเปล่า

หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับส่วนต่างๆ ของเว็บไซต์ คุณต้องรู้วิธีตรวจสอบองค์ประกอบบน Mac . คุณลักษณะ "ตรวจสอบองค์ประกอบ" นี้ช่วยให้คุณสามารถดูหรือแก้ไขส่วนหน้าของเว็บไซต์ได้ การรู้วิธีตรวจสอบองค์ประกอบบน Mac เป็นเรื่องดีเมื่อคุณต้องการสร้างเว็บไซต์ของคุณเอง (หรือแม้แต่เรียนรู้วิธีการทำงานของไซต์เหล่านี้)

นอกจากการตรวจสอบเว็บไซต์แล้ว การล้างคุกกี้ยังเป็นการดำเนินการที่หลายคนจะทำ คลิกลิงค์เพื่อดูรายละเอียด

โพสต์นี้จะให้รายละเอียดเกี่ยวกับวิธีการตรวจสอบองค์ประกอบบน Mac เราจะพูดถึงสาเหตุที่คุณไม่สามารถดูหรือ "ตรวจสอบ" องค์ประกอบของเว็บไซต์ได้ในบางโอกาส จากนั้นเราจะสอนวิธีตรวจสอบองค์ประกอบเว็บไซต์โดยใช้เบราว์เซอร์ต่างๆ

ส่วนที่ 1 ทำไมฉันตรวจสอบใน Mac ไม่ได้

หากคุณต้องการทราบวิธีการตรวจสอบองค์ประกอบบน Mac คุณต้องทราบสาเหตุที่ทำให้คุณไม่สามารถใช้งานได้ตั้งแต่แรก การตรวจสอบเว็บไซต์จะทำได้ก็ต่อเมื่อคุณเปิดใช้งานเมนูพัฒนาบนเบราว์เซอร์ Safari ของคุณเท่านั้น ดังนั้นควรเปิดใช้งาน Develop Menu ซึ่งจะทำให้คุณใช้ Web Inspector ของ Apple ได้

ต่อไปนี้คือขั้นตอนในการเปิดใช้งานการพัฒนาเมนูเพื่อให้สามารถใช้วิธีการตรวจสอบองค์ประกอบบน Mac:

1. เปิด Safari
2. ค้นหาส่วนการตั้งค่าของเบราว์เซอร์ในอินเทอร์เฟซ
3. เลือกป้ายกำกับขั้นสูงโดยคลิก
4. ไปที่ส่วนล่างของบานหน้าต่าง จากนั้นเลือกช่องที่ระบุว่า "แสดงเมนูพัฒนาในแถบเมนู"
5. เลือกตัวเลือกสำหรับการพัฒนา
6. คลิกตัวเลือกเพื่อแสดง Web Inspector

ส่วนที่ 2 จะตรวจสอบองค์ประกอบบนเบราว์เซอร์ Mac ได้อย่างไร

มีหลายวิธีในการตรวจสอบองค์ประกอบบน Mac สำหรับเบราว์เซอร์ต่างๆ มาดูวิธีตรวจสอบองค์ประกอบบน Mac โดยใช้ Chrome, Safari และ Firefox ด้านล่าง

วิธีตรวจสอบองค์ประกอบบน Mac โดยใช้เบราว์เซอร์ Chrome

ด้านล่างนี้คือวิธีการบางส่วนที่คุณสามารถใช้ตรวจสอบองค์ประกอบใน Chrome บน Mac:

1. วิธีการคลิกขวา

• เปิด Chrome บน Mac ของคุณ
• ไปที่หน้าใดก็ได้ที่คุณต้องการตรวจสอบองค์ประกอบของ
• ตอนนี้ ให้คลิกขวาที่หน้าแล้วคลิกตัวเลือกสำหรับตรวจสอบ หากคุณคลิกขวาที่องค์ประกอบใด ๆ บนหน้า องค์ประกอบนี้จะเปิดขึ้นภายในมุมมองตัวตรวจสอบ

2. วิธีการแถบเมนู

• คลิกแถบเมนูด้านบนสุดสำหรับเมนูมุมมอง
• จากนั้น เลือกตัวเลือกสำหรับนักพัฒนา จากนั้นไปที่เครื่องมือสำหรับนักพัฒนา
• เปิดตัวเลือกปรับแต่งและควบคุม

3. ไอคอนการตั้งค่าการเยี่ยมชม

• ไปที่เครื่องมือเพิ่มเติมโดยคลิกที่ไอคอนที่ดูเหมือนสามจุด สามารถพบได้ที่ส่วนบนขวาของเบราว์เซอร์
• คลิกเครื่องมือสำหรับนักพัฒนา

4. วิธีแป้นพิมพ์ลัด

• พิมพ์ CMD + OPTION + C บน macOS
• เปลี่ยนตำแหน่งแผง (ไม่บังคับ) โดยคลิกไอคอนที่ดูเหมือนสามจุด เลือกตำแหน่งท่าเทียบเรือที่คุณต้องการ ตัวอย่างเช่น คุณสามารถเลือก Dock To Right ได้

ตอนนี้ คุณจะเห็นแท็บต่างๆ มากมายเมื่อคุณทำหนึ่งในสี่วิธีในการตรวจสอบองค์ประกอบบน Mac แท็บเหล่านี้ประกอบด้วย Elements, Sources, Console เป็นต้น โดยปกติแล้ว ทุกสิ่งที่คุณต้องการจะอยู่ในแท็บ Elements

คุณสามารถเลือกองค์ประกอบเพื่อดูซอร์สโค้ดได้ นอกจากการดูโค้ดแล้ว คุณยังสามารถแก้ไขข้อความ ลบองค์ประกอบ ซ่อนองค์ประกอบ และแก้ไขเป็น HTML และอื่นๆ ได้

แท็บสำหรับสไตล์ช่วยให้คุณตรวจสอบการจัดรูปแบบขององค์ประกอบ โดยเฉพาะองค์ประกอบข้อความ นอกจากนี้ คุณสามารถตรวจสอบหน้าในมุมมองมือถือได้ นี่อาจเป็นแหล่งข้อมูลที่ดีสำหรับนักพัฒนาเว็บและเจ้าของธุรกิจที่ต้องการไซต์ที่เหมาะกับอุปกรณ์เคลื่อนที่

วิธีตรวจสอบองค์ประกอบบน Mac โดยใช้เบราว์เซอร์ Safari

ก่อนที่คุณจะใช้วิธีการตรวจสอบ Safari บน Mac โดยใช้เบราว์เซอร์ของคุณ คุณควรเปิดใช้งานเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์สำหรับ Safari ก่อน นี่คือขั้นตอนในการทำ:

1. เปิดเบราว์เซอร์ Safari และเลือกตัวเลือกสำหรับการตั้งค่า
2. ไปที่ขั้นสูง
3. เลือกช่องทำเครื่องหมายที่ระบุว่า "แสดงเมนูพัฒนาในแถบเมนู"
4. ตรวจสอบอีกครั้งว่าเมนูมีตัวเลือกใหม่ที่เรียกว่า Develop หรือไม่

วิธีตรวจสอบองค์ประกอบบน Mac โดยใช้ Safari นี่คือวิธีการบางส่วนที่คุณสามารถนำไปใช้ได้:

1. วิธีการคลิกขวา

• ไปที่หน้าที่คุณต้องการตรวจสอบองค์ประกอบ
• คลิกขวาที่หน้านั้นในส่วนใดก็ได้
• เลือก ตรวจสอบ

2. พัฒนาวิธีการเมนู

• สิ่งแรกในการตรวจสอบองค์ประกอบบน Mac โดยใช้ Safari คือการไปที่เมนู Develop
• คลิกตัวเลือกสำหรับ Show Web Inspector

3. วิธีคีย์ลัด

• ใช้ทางลัดที่ถูกต้อง ในการดำเนินการนี้ เพียงคลิกตัวเลือกสำหรับ CMD + OPTION + I .

ตอนนี้คุณสามารถใช้วิธีการตรวจสอบองค์ประกอบบน Mac โดยใช้ Safari อย่างไรก็ตาม หากคุณโหลดช้าเกินไปเมื่อเปิด Safari คุณสามารถดูวิธีแก้ปัญหาได้ในบทความลิงก์

วิธีตรวจสอบองค์ประกอบบน Mac โดยใช้เบราว์เซอร์ Firefox

มีหลายวิธีในการตรวจสอบโดยใช้เบราว์เซอร์ Firefox บน Mac นี่คือวิธีการบางส่วนที่คุณสามารถใช้ได้:

1. วิธีการคลิกขวา

• สิ่งแรกที่ต้องทำคือไปที่หน้าเว็บและคลิกขวาที่หน้านั้น
• จากนั้น คลิกตัวเลือกเพื่อตรวจสอบองค์ประกอบ
• ตัวเลือกที่ต้องทำคือคลิกขวาที่องค์ประกอบเฉพาะภายในหน้าแล้วตรวจสอบ

2. วิธีการเมนูเครื่องมือ

• คุณยังสามารถเปิดเมนูเครื่องมือภายในเบราว์เซอร์ Firefox ของคุณได้อีกด้วย
• จากนั้น คลิกตัวเลือกสำหรับนักพัฒนาเว็บ หลังจากนั้น คลิกตัวเลือกสำหรับตรวจสอบ

3. วิธีคีย์ลัด

• ใช้ทางลัด ตัวอย่างเช่น คุณสามารถคลิก CTRL + Shift + C (บน Windows) และคุณยังสามารถคลิก COMMAND + OPTION + C (บนคอมพิวเตอร์ Mac)

วิธีการตรวจสอบองค์ประกอบบน Mac โดยไม่ต้องคลิกขวา

มีหลายวิธีในการตรวจสอบองค์ประกอบบน Mac โดยไม่ต้องคลิกขวาที่หน้า คุณสามารถใช้ปุ่มลัดเพื่อดำเนินการได้ ด้านล่างนี้คือปุ่มลัดเพื่อตรวจสอบองค์ประกอบในเบราว์เซอร์ต่างๆ บนคอมพิวเตอร์ Mac ของคุณ:

• ซาฟารี – COMMAND + OPTION + I
• Chrome – COMMAND + OPTION + C
• Firefox – COMMAND + OPTION + C

นอกจากนี้ คุณยังสามารถใช้การตั้งค่าหรือเครื่องมือหรือเมนูสำหรับเบราว์เซอร์ทั้งสามนี้เพื่อตรวจสอบองค์ประกอบบนคอมพิวเตอร์ Mac ของคุณโดยไม่ต้องคลิกขวาที่หน้า คุณสามารถดูวิธีการเหล่านี้ด้านบนสำหรับ Safari, Chrome และ Firefox