ด้วย Chrome DevTools เราสามารถเห็นผลของการแก้ไขในโค้ดได้ทันที
Chrome DevTools คือไฟล์ ชุดเครื่องมือสร้างและแก้ไขข้อบกพร่องของเว็บไซต์ที่มีอยู่ใน Google Chrome แน่นอนว่าเราสามารถใช้มันได้ด้วย ในเวอร์ชันโอเพนซอร์ส โครเมียม.
เป็นไปได้ที่จะเข้าถึงเครื่องมือ Chrome สำหรับนักพัฒนาโดยการกดคีย์ผสม Ctrl + Shift + I และโดยการวางเมาส์เหนือองค์ประกอบและคลิกขวาที่ตรวจสอบ
Componentes
เมื่อเราเปิด Chrome DevTools เราจะเห็นว่าคุณปรากฏขึ้นn แผงทางด้านขวาของหน้าที่เรากำลังเรียกดู. ในส่วนของแผงนี้ eแบ่งออกเป็นแท็บที่สอดคล้องกับแต่ละเครื่องมือ. ในทางกลับกันเครื่องมือจะถูกแบ่งออกเป็นส่วน ๆ
ส่วนต่างๆ ได้แก่ :
- องค์ประกอบ: แสดงส่วนประกอบต่างๆของหน้า
- คอนโซล: ช่วยให้คุณสามารถเรียกใช้การวินิจฉัยระหว่างการพัฒนาหรือโต้ตอบกับโค้ด Javascript ได้เช่นเดียวกับที่คุณทำกับเทอร์มินัล Linux
- แหล่งที่มา: ทำให้ง่ายต่อการดีบักโค้ด Javascript และทำงานกับไฟล์ในเครื่อง
- เครือข่าย: ช่วยตรวจสอบและปรับปรุงประสิทธิภาพของเพจ
- ไทม์ไลน์: อนุญาตให้บันทึกและสำรวจเหตุการณ์ต่างๆที่เกิดขึ้นระหว่างการเยี่ยมชมไซต์
- แอปพลิเคชัน: ตรวจสอบทรัพยากรทั้งหมดที่โหลด ฐานข้อมูล IndexedDB หรือ Web SQL พื้นที่จัดเก็บข้อมูลในเครื่องและเซสชันคุกกี้แคชแอปรูปภาพฟอนต์และสไตล์ชีต
- ความปลอดภัย: ตรวจพบปัญหาด้านความปลอดภัยในรหัส
มาดูกันว่าเราสามารถใช้ Chrome DevTools เพื่ออะไรได้บ้าง
แก้ไขสิ่งที่ไม่ได้ผล
มันเกิดขึ้นกับนักพัฒนาทุกคน เขียนโค้ดตรวจสอบว่าไม่มีข้อผิดพลาดใด ๆ และในขณะนี้หน้าเว็บยังไม่ทำงานเท่าที่ควร เครื่องมือคอนโซล แสดงข้อผิดพลาดที่เกิดขึ้นในเวลาดำเนินการ
ลดเวลาในการโหลด
หากหน้าเว็บใช้เวลาโหลดนานผู้ใช้จะเบื่อและไปที่ไซต์อื่น โชคดีที่ยุคของเว็บไซต์ Flash และช่วงแนะนำภาพเคลื่อนไหวสิ้นสุดลงแล้ว อย่างไรก็ตามแท็บเครือข่ายของ Chrome DevTools ช่วยให้ค้นหาได้ง่ายขึ้นว่าองค์ประกอบใดที่ทำให้โหลดล่าช้า เราสามารถทดสอบซ้ำสำหรับความเร็วในการเชื่อมต่อที่แตกต่างกันได้
แก้ไขรหัส
ในแท็บองค์ประกอบเราสามารถทำได้ ดูองค์ประกอบของเพจโค้ด html ที่เกี่ยวข้องและคุณสมบัติ css นอกจากนี้เรายังสามารถเปลี่ยนได้
เราสามารถแก้ไขข้อความของเพจโดยใช้คำสั่ง
document.designMode = 'on';
ลองใช้ขนาดหน้าจอที่แตกต่างกัน
แท็บเล็ตสมาร์ทโฟนสมาร์ททีวีคอมพิวเตอร์เดสก์ท็อป รายการอุปกรณ์ที่เราท่องอินเทอร์เน็ตมีจำนวนมากขึ้นเรื่อย ๆ ด้วย Chrome DevTools เราสามารถทำได้ ทดสอบว่าเพจดูดีในขนาดต่างๆกันหรือไม่
เปรียบเทียบ
ในการจัดการคำว่า Benchmarking หมายถึงการเรียนรู้จากแนวทางปฏิบัติที่ดีที่สุดของผู้ที่ทำเช่นเดียวกับเรา ด้วย Chrome DevTolls หากเราชอบการออกแบบเว็บไซต์เราสามารถทำได้ ดูโค้ด html และสไตล์ชีท css แล้วคัดลอกไปที่ไซต์ของเรา
รับ Chrome DevTools
Chrome DevTools พร้อมใช้งานบนเบราว์เซอร์ Google Chrome และ Chromium โครเมียมอยู่ในที่เก็บของการแจกแจงหลัก ๆ นอกจากนี้ยังสามารถติดตั้งได้จากร้านค้า ตะครุบ. สำหรับ Google chrome คุณสามารถทำได้ มาที่นี่ ในรูปแบบ DEB และ RPM