ต้องรู้
-
ใน Safari: คลิกขวาที่หน้าเว็บแล้วเลือก ตรวจสอบองค์ประกอบ.
- ใน Chrome คุณสามารถคลิกขวาแล้วคลิก ตรวจสอบ.
- ในการเปิดใช้งานคุณลักษณะใน Safari: Safari > Preferences > Advanced > ตรวจสอบ แสดงเมนูพัฒนาในแถบเมนู box.
บทความนี้จะสอนวิธีตรวจสอบองค์ประกอบของเว็บไซต์บน Mac ดูวิธีการทำผ่าน Safari และ Google Chrome
คุณใช้คุณสมบัติตรวจสอบองค์ประกอบบน Mac อย่างไร
ก่อนตรวจสอบองค์ประกอบบน Mac เมื่อใช้ Safari คุณต้องเปิดใช้งานเมนูนักพัฒนาภายในเบราว์เซอร์ มาดูวิธีการเปิดและสิ่งที่ต้องทำเพื่อตรวจสอบองค์ประกอบ
หากคุณเห็นการพัฒนาระหว่างบุ๊กมาร์กและหน้าต่าง แสดงว่าเมนูนักพัฒนาซอฟต์แวร์เปิดใช้งานแล้ว และคุณสามารถข้ามไปยังขั้นตอนที่ 4
การใช้คุณสมบัติตรวจสอบองค์ประกอบใน Safari
นี่คือวิธีใช้ Inspect Element ใน Safari ซึ่งเป็นเบราว์เซอร์เริ่มต้นบนคอมพิวเตอร์ Mac
-
ใน Safari คลิก Safari > Preferences.
Image -
คลิก ขั้นสูง.
Image -
คลิก แสดงเมนูพัฒนา ในแถบเมนูแล้วปิดหน้าต่าง
Image - เมื่อเรียกดูเว็บไซต์ ให้คลิกขวาที่รายการที่คุณต้องการตรวจสอบ
-
คลิก ตรวจสอบองค์ประกอบ.
Image -
คุณสามารถดูรหัสหลังเว็บไซต์ที่คุณตรวจสอบได้แล้ว
Image
การใช้คุณสมบัติตรวจสอบองค์ประกอบใน Chrome บน Mac
หากคุณใช้ Chrome แทน Safari บน Mac การดูองค์ประกอบจะง่ายยิ่งขึ้น เนื่องจากไม่จำเป็นต้องเปิดใช้งานคุณสมบัติ สิ่งที่ต้องทำ
- ใน Chrome เรียกดูเว็บไซต์
- คลิกขวาที่องค์ประกอบที่คุณต้องการตรวจสอบ
-
คลิก ตรวจสอบ.
Image -
คุณสามารถดูรหัสในหน้าต่างด้านข้างบน Chrome ได้แล้ว
Image
ทำไมฉันตรวจสอบใน Mac ของฉันไม่ได้
คุณอาจตรวจสอบองค์ประกอบบน Mac ไม่ได้หากไม่ได้เปิดใช้งานเมนูนักพัฒนาใน Safari นี่คือการช่วยเตือนเกี่ยวกับวิธีการทำ
-
ใน Safari คลิก Safari > Preferences.
Image -
คลิก ขั้นสูง.
Image -
คลิก แสดงเมนูพัฒนา ในแถบเมนูแล้วปิดหน้าต่าง
Image
วิธีเปลี่ยนแปลงเว็บไซต์โดยการตรวจสอบองค์ประกอบ
นอกจากจะให้คุณดูโค้ดบนเว็บไซต์แล้ว คุณยังเปลี่ยนองค์ประกอบของเว็บไซต์ได้ชั่วคราวผ่าน Inspect Element วิธีดำเนินการผ่าน Safari ทำได้ดังนี้
กระบวนการนี้คล้ายกันมากในเบราว์เซอร์อื่น
- เมื่อเรียกดูเว็บไซต์ ให้คลิกขวาที่รายการที่คุณต้องการตรวจสอบ
- คลิก ตรวจสอบองค์ประกอบ.
- ดับเบิลคลิกที่ข้อความในโค้ดเพื่อให้แก้ไขได้
- ลบหรือป้อนสตริงข้อความใหม่
- แตะ Enter
- เปลี่ยนรหัสชั่วคราวเพื่อประโยชน์ของคุณเท่านั้น
ทำไมคุณถึงต้องการใช้ฟีเจอร์ตรวจสอบองค์ประกอบ
ความสามารถในการตรวจสอบองค์ประกอบนั้นมีประโยชน์หลายประการ
- เปลี่ยนรหัสได้ทันที นักออกแบบเว็บไซต์สามารถเปลี่ยนแปลงสิ่งต่างๆ ในเว็บไซต์ได้ชั่วคราวเพื่อดูว่าการเปลี่ยนแปลงส่งผลต่อสิ่งต่างๆ อย่างไร
- ตรวจสอบรหัส ทั้งนักออกแบบและนักการตลาดสามารถตรวจสอบโค้ดเพื่อยืนยันว่ามีรายละเอียดต่างๆ เช่น Google Analytics
- หากต้องการดูภาพแยกจากเว็บไซต์ หากไซต์ไม่อนุญาตให้คุณเปิดรูปภาพในแท็บหรือหน้าต่างใหม่ การดูองค์ประกอบทำให้เป็นไปได้
-
ทิงเกอร์. การดูโค้ดของหน้าเว็บสามารถช่วยให้คุณเข้าใจสิ่งที่คุณเห็น ขจัดความลึกลับของสิ่งที่และเหตุผลของสิ่งที่เกิดขึ้นกับไซต์ที่คุณอยู่ มันเหมือนกับการแยกชิ้นส่วนอุปกรณ์เพื่อดูว่ามันทำงานอย่างไร แต่ไม่มีสกรูให้เสียในกรณีนี้
คำถามที่พบบ่อย
การตรวจสอบเว็บไซต์ถูกกฎหมายหรือไม่
ใช่ อย่างไรก็ตาม หากคุณวางแผนที่จะใช้รหัสหรือทรัพย์สินใดๆ จากเว็บไซต์ โปรดตรวจสอบกับเจ้าของและเพิ่มหมายเหตุลิขสิทธิ์
ฉันจะคัดลอก HTML จากเว็บไซต์ที่มีองค์ประกอบตรวจสอบได้อย่างไร
ใน Chrome ให้คลิกขวาที่หน้าและเลือก Inspect จากนั้นไปที่ส่วนบนสุดแล้วคลิกขวาที่แท็ก (เช่น) เลือก Copy > Copy outerHTML จากนั้นวางโค้ดลงในข้อความหรือไฟล์ HTML
ฉันสามารถคัดลอก CSS จากเว็บไซต์ที่มีองค์ประกอบตรวจสอบได้หรือไม่
ใช่ คลิกขวาที่องค์ประกอบที่คุณต้องการคัดลอกแล้วเลือก ตรวจสอบ คลิกขวาที่โค้ดที่ไฮไลต์แล้วเลือก Copy > Copy styles.
ฉันจะดูรหัสผ่านที่บันทึกไว้โดยใช้องค์ประกอบตรวจสอบได้อย่างไร
หากต้องการเปิดเผยรหัสผ่านที่ซ่อนอยู่ ให้คลิกขวาที่กล่องข้อความรหัสผ่านแล้วเลือก ตรวจสอบ ในส่วนที่ไฮไลต์ ให้มองหา type=”password” และแทนที่ password ด้วย text มีวิธีที่ง่ายกว่าในการแสดงรหัสผ่านทั้งหมดใน Chrome
