โดยปกติเมื่อทำการแก้ไขเว็บเพจเราใช้เครื่องมือแก้ไขเฉพาะเช่น Adobe Dreamweaver, CoffeeCup, Bluefish หรือหนึ่งในเครื่องมือพัฒนาอื่น ๆ แต่ถ้าเราเป็นเพียงการระดมสมองหรือต้องการทดลองบางสิ่งในหน้าเว็บสด เราสามารถทำสำเนาของหน้าในเครื่องมือที่เราเลือกและเล่นกับมัน หรือเราสามารถทำได้ภายในเว็บเบราว์เซอร์ของเรา บทช่วยสอนนี้จะแสดงวิธีแก้ไขหน้าเว็บในเบราว์เซอร์ของคุณ
เรียกว่าเป็นเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Firefox เรียกคุณลักษณะตรวจสอบองค์ประกอบขณะที่ Chrome เรียกว่าเครื่องมือตรวจสอบ ไม่ว่าจะด้วยวิธีใดก็เป็นวิธีที่เบราว์เซอร์มองหาเบื้องหลังการออกแบบของคุณและดูรหัสที่ขับเคลื่อนมัน คุณสมบัตินี้ค่อนข้างเป็นที่รู้จักและใช้กันมาก สิ่งที่ไม่ค่อยเป็นที่รู้จักนักคือความสามารถในการเปลี่ยนแปลงโค้ดในทันที
การเปลี่ยนแปลงใด ๆ ที่คุณทำจะไม่ได้รับการบันทึกและจะไม่มีผลกับการแสดงสด หากคุณไม่ต้องการโหลดหน้าเว็บในเครื่องมือนักพัฒนาของคุณนี่เป็นวิธีทดสอบที่เป็นระเบียบ
แก้ไขหน้าเว็บใด ๆ ในเบราว์เซอร์ของคุณ
Dreamweaver และเครื่องมือเช่นนั้นมีตัวจำลองเบราว์เซอร์ในตัวที่จำลองการออกแบบที่จะมีลักษณะเหมือนเบราว์เซอร์ที่แตกต่างกัน สิ่งที่ดีคือพวกมันไม่ถูกต้องเสมอไปและคุณมักพบเมื่อเปิดตัวเว็บไซต์ที่สิ่งที่ดูดีในเครื่องมือนักพัฒนาของคุณจะดูแตกต่างออกไปเล็กน้อยในเบราว์เซอร์แบบสแตนด์อโลน
โดยปกติแล้วคุณจะเปิดเว็บไซต์ในเว็บเซิร์ฟเวอร์ภายในและทดสอบในเบราว์เซอร์ก่อนเปิดใช้งานด้วยเหตุผลนี้ หากหน้าเว็บมีอยู่แล้วหรือคุณต้องการทดลองใช้งานไม่จำเป็นต้องคัดลอกและโหลดลงในเครื่องมือพัฒนาของคุณคุณสามารถใช้เครื่องมือนักพัฒนาของเบราว์เซอร์
ฉันใช้ Firefox ดังนั้นฉันจะแสดงวิธีการใช้ Chrome นั้นเหมือนกันมาก
- เปิดหน้าเว็บที่คุณต้องการทดสอบในเบราว์เซอร์ของคุณ
- คลิกขวาที่ใดก็ได้บนหน้าและเลือกตรวจสอบ
คุณควรเห็นหน้าของคุณแบ่งออกเป็นสองส่วนโดยมีบานหน้าต่างใหม่ปรากฏขึ้นที่ด้านล่างพร้อมรหัสบางส่วน รหัสนี้เป็นแรงผลักดันของหน้าเว็บที่คุณเลือก องค์ประกอบของหน้าต่างๆสามารถเข้าถึงได้จากแท็บที่ด้านบนของแท็บด้านล่าง ตัวอย่างเช่นเราเห็น Inspector, Console, Debugger, Style Editor และอื่น ๆ ใน Firefox
หากคุณเลื่อนเคอร์เซอร์ไปที่บรรทัดในบานหน้าต่างด้านล่างคุณจะเห็นส่วนต่าง ๆ ของไฮไลต์เว็บเพจ บรรทัดของรหัสที่คุณเปิดอยู่ระหว่างการเน้นคือรหัสที่มีผลต่อส่วนนั้นของหน้า
- หากคุณต้องการดูลักษณะของหน้าให้ลองใช้ Style Editor
- หากคุณต้องการดูว่าเพจทำงานอย่างไรให้ลองใช้คอนโซลหรือการช่วยสำหรับการเข้าถึง
- หากคุณต้องการกำจัดข้อบกพร่องหรือแก้ไขปัญหาให้ใช้ Console หรือ Debugger
ประสิทธิภาพมีประโยชน์สำหรับ SEO ในสถานที่ แต่หน่วยความจำเครือข่ายและพื้นที่จัดเก็บไม่ค่อยได้ใช้มากนัก
จำไว้ว่าคุณสามารถเข้าไปยุ่งเกี่ยวกับเครื่องมือสำหรับนักพัฒนาได้มากเท่าที่คุณต้องการและมันจะไม่ส่งผลกระทบต่อเว็บไซต์ การเปลี่ยนแปลงใด ๆ ที่เกิดขึ้นกับหน้าแสดงผลในเบราว์เซอร์แต่ละรายการของคุณเท่านั้นคุณจะไม่ส่งผลกระทบต่อเว็บไซต์ เมื่อคุณปิดเครื่องมือการเปลี่ยนแปลงทั้งหมดจะหายไป
การเปลี่ยนแปลงหน้า
ตอนนี้คุณรู้แล้วว่าคุณสามารถเปลี่ยนแปลงอะไรก็ได้ที่คุณต้องการโดยไม่ส่งผลกระทบต่อเว็บไซต์จริงมาสนุกกันบ้าง ค้นหาองค์ประกอบในหน้าเว็บที่คุณต้องการแก้ไข คุณสามารถเปลี่ยนแบบอักษรสีแบบอักษรภาพพื้นหลังหรืออะไรก็ได้ที่คุณต้องการ สำหรับตัวอย่างนี้ฉันจะเปลี่ยนสีตัวอักษรของพาดหัวแบนเนอร์
- คลิกขวาที่องค์ประกอบที่แน่นอนที่คุณต้องการเปลี่ยนและเลือกตรวจสอบ
- เน้นบรรทัดด้วย 'ชื่อ' หรือ 'H1' ดังนั้นข้อความจะถูกเน้นในบานหน้าต่างด้านบน
- นำทางไปทางซ้ายสองบานหน้าต่างและค้นหาสีตัวอักษร
- เปลี่ยนค่าเป็นสิ่งที่แตกต่างหรือเลือกจุดสีเพื่อใช้ตัวเลือก
การเปลี่ยนแปลงของคุณจะปรากฏขึ้นแบบไดนามิกเมื่อคุณเสร็จสิ้นการเปลี่ยนแปลง คุณสามารถเปลี่ยนสีขนาดแบบอักษรพื้นหลังและทุกอย่างเกี่ยวกับแบบอักษรได้ คุณไม่สามารถบันทึกงาน แต่การเปลี่ยนแปลงของคุณจะยังคงอยู่สำหรับเซสชันนั้น
คุณสามารถเปลี่ยนแปลงทุกอย่างเกี่ยวกับหน้าเว็บที่เหมาะถ้าคุณมีความคิดและต้องการตรวจสอบอย่างรวดเร็วก่อนที่จะเริ่มแอพพัฒนาทั้งหมดของคุณ สิ่งที่คุณต้องทำคือจดจำการเปลี่ยนแปลงที่คุณทำและสิ่งที่คุณไม่สามารถบันทึกได้ที่นี่ คุณจะต้องใช้ภาพหน้าจอหรือบันทึกการเปลี่ยนแปลงและทำซ้ำภายในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของคุณ
การแก้ไขหน้าเว็บในเบราว์เซอร์ของคุณเป็นวิธีที่เรียบร้อยในการทดลองหรือเล่นกับหน้าต่างๆ นอกจากนี้ยังเป็นวิธีที่ดีในการเรียนรู้เล็กน้อยเกี่ยวกับการพัฒนาเว็บโดยไม่ต้องซื้อเป็นเครื่องมือสำหรับนักพัฒนาที่มีราคาแพง ตอนนี้คุณรู้วิธีไปและเล่น!
