วิธีตรวจสอบองค์ประกอบบน Mac

สารบัญ:

วิธีตรวจสอบองค์ประกอบบน Mac
วิธีตรวจสอบองค์ประกอบบน Mac
Anonim

ต้องรู้

  • ใน Safari: คลิกขวาที่หน้าเว็บแล้วเลือก ตรวจสอบองค์ประกอบ.

  • ใน Chrome คุณสามารถคลิกขวาแล้วคลิก ตรวจสอบ.
  • ในการเปิดใช้งานคุณลักษณะใน Safari: Safari > Preferences > Advanced > ตรวจสอบ แสดงเมนูพัฒนาในแถบเมนู box.

บทความนี้จะสอนวิธีตรวจสอบองค์ประกอบของเว็บไซต์บน Mac ดูวิธีการทำผ่าน Safari และ Google Chrome

คุณใช้คุณสมบัติตรวจสอบองค์ประกอบบน Mac อย่างไร

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

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

การใช้คุณสมบัติตรวจสอบองค์ประกอบใน Safari

นี่คือวิธีใช้ Inspect Element ใน Safari ซึ่งเป็นเบราว์เซอร์เริ่มต้นบนคอมพิวเตอร์ Mac

  1. ใน Safari คลิก Safari > Preferences.

    Image
    Image
  2. คลิก ขั้นสูง.

    Image
    Image
  3. คลิก แสดงเมนูพัฒนา ในแถบเมนูแล้วปิดหน้าต่าง

    Image
    Image
  4. เมื่อเรียกดูเว็บไซต์ ให้คลิกขวาที่รายการที่คุณต้องการตรวจสอบ
  5. คลิก ตรวจสอบองค์ประกอบ.

    Image
    Image
  6. คุณสามารถดูรหัสหลังเว็บไซต์ที่คุณตรวจสอบได้แล้ว

    Image
    Image

การใช้คุณสมบัติตรวจสอบองค์ประกอบใน Chrome บน Mac

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

  1. ใน Chrome เรียกดูเว็บไซต์
  2. คลิกขวาที่องค์ประกอบที่คุณต้องการตรวจสอบ
  3. คลิก ตรวจสอบ.

    Image
    Image
  4. คุณสามารถดูรหัสในหน้าต่างด้านข้างบน Chrome ได้แล้ว

    Image
    Image

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

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

  1. ใน Safari คลิก Safari > Preferences.

    Image
    Image
  2. คลิก ขั้นสูง.

    Image
    Image
  3. คลิก แสดงเมนูพัฒนา ในแถบเมนูแล้วปิดหน้าต่าง

    Image
    Image

วิธีเปลี่ยนแปลงเว็บไซต์โดยการตรวจสอบองค์ประกอบ

นอกจากจะให้คุณดูโค้ดบนเว็บไซต์แล้ว คุณยังเปลี่ยนองค์ประกอบของเว็บไซต์ได้ชั่วคราวผ่าน Inspect Element วิธีดำเนินการผ่าน Safari ทำได้ดังนี้

กระบวนการนี้คล้ายกันมากในเบราว์เซอร์อื่น

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

ทำไมคุณถึงต้องการใช้ฟีเจอร์ตรวจสอบองค์ประกอบ

ความสามารถในการตรวจสอบองค์ประกอบนั้นมีประโยชน์หลายประการ

  • เปลี่ยนรหัสได้ทันที นักออกแบบเว็บไซต์สามารถเปลี่ยนแปลงสิ่งต่างๆ ในเว็บไซต์ได้ชั่วคราวเพื่อดูว่าการเปลี่ยนแปลงส่งผลต่อสิ่งต่างๆ อย่างไร
  • ตรวจสอบรหัส ทั้งนักออกแบบและนักการตลาดสามารถตรวจสอบโค้ดเพื่อยืนยันว่ามีรายละเอียดต่างๆ เช่น Google Analytics
  • หากต้องการดูภาพแยกจากเว็บไซต์ หากไซต์ไม่อนุญาตให้คุณเปิดรูปภาพในแท็บหรือหน้าต่างใหม่ การดูองค์ประกอบทำให้เป็นไปได้
  • ทิงเกอร์. การดูโค้ดของหน้าเว็บสามารถช่วยให้คุณเข้าใจสิ่งที่คุณเห็น ขจัดความลึกลับของสิ่งที่และเหตุผลของสิ่งที่เกิดขึ้นกับไซต์ที่คุณอยู่ มันเหมือนกับการแยกชิ้นส่วนอุปกรณ์เพื่อดูว่ามันทำงานอย่างไร แต่ไม่มีสกรูให้เสียในกรณีนี้

คำถามที่พบบ่อย

    การตรวจสอบเว็บไซต์ถูกกฎหมายหรือไม่

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

    ฉันจะคัดลอก HTML จากเว็บไซต์ที่มีองค์ประกอบตรวจสอบได้อย่างไร

    ใน Chrome ให้คลิกขวาที่หน้าและเลือก Inspect จากนั้นไปที่ส่วนบนสุดแล้วคลิกขวาที่แท็ก (เช่น) เลือก Copy > Copy outerHTML จากนั้นวางโค้ดลงในข้อความหรือไฟล์ HTML

    ฉันสามารถคัดลอก CSS จากเว็บไซต์ที่มีองค์ประกอบตรวจสอบได้หรือไม่

    ใช่ คลิกขวาที่องค์ประกอบที่คุณต้องการคัดลอกแล้วเลือก ตรวจสอบ คลิกขวาที่โค้ดที่ไฮไลต์แล้วเลือก Copy > Copy styles.

    ฉันจะดูรหัสผ่านที่บันทึกไว้โดยใช้องค์ประกอบตรวจสอบได้อย่างไร

    หากต้องการเปิดเผยรหัสผ่านที่ซ่อนอยู่ ให้คลิกขวาที่กล่องข้อความรหัสผ่านแล้วเลือก ตรวจสอบ ในส่วนที่ไฮไลต์ ให้มองหา type=”password” และแทนที่ password ด้วย text มีวิธีที่ง่ายกว่าในการแสดงรหัสผ่านทั้งหมดใน Chrome

แนะนำ: