ทำไมคุณควรเริ่มใช้เครื่องมือสำหรับนักพัฒนา Chrome ตอนนี้

การมีชุดเครื่องมือที่มีประโยชน์มากมายเพื่อช่วยทดสอบเว็บไซต์ของคุณเป็นสิ่งจำเป็นสำหรับนักพัฒนา ที่ไหนดีที่สุดที่จะเก็บไว้? ในเบราว์เซอร์ของคุณแน่นอน! เว็บเบราว์เซอร์ยอดนิยมของ Google Chrome มีเครื่องมือสำหรับนักพัฒนาในตัว ซึ่งเป็นชุดเครื่องมือที่สร้างขึ้นสำหรับการเขียนเว็บและการดีบัก เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome (เรียกว่า DevTools) ช่วยให้นักพัฒนาสามารถเข้าถึงการทำงานภายในของเว็บเบราว์เซอร์และเว็บแอปได้

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

อยู่ในเบราว์เซอร์ของคุณ

เครื่องมือเหล่านี้เข้าถึงได้ง่าย มีสามวิธีในการเปิด:

1. ในเบราว์เซอร์ Chrome ของคุณ – เลือกเมนู Chrome (แถบแนวนอนสามแถบที่มุมบนขวา) เลือก เครื่องมือเพิ่มเติม จากนั้นเลือก เครื่องมือสำหรับนักพัฒนา
2. คลิกขวาที่องค์ประกอบในหน้าใดก็ได้และเลือกตรวจสอบองค์ประกอบ
3. บนแป้นพิมพ์ของคุณใน Windows ให้เลือก ctrl + shift + i บน Mac เลือก cmnd + opt + i

สิ่งเหล่านี้จะเปิดหน้าต่าง DevTools ที่ด้านล่างของเบราว์เซอร์ของคุณ

หน้าต่างหลัก

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

เครื่องมือถูกจัดกลุ่มเป็นงาน มี 8 กลุ่มที่ประกอบด้วย Elements, Network, Sources, Timeline, Profiles, Resources, Audits และ Console

องค์ประกอบ

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

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

เครือข่าย

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

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

แหล่งที่มา

นี่แสดงสคริปต์และตัวอย่างที่จะโหลดและที่มาของสคริปต์

เส้นเวลา

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

โปรไฟล์

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

ทรัพยากร

ที่นี่คุณสามารถตรวจสอบทรัพยากรที่โหลดได้ คุณสามารถดูคุกกี้ แคชของแอปพลิเคชัน ฐานข้อมูล HTML5 เป็นต้น

การตรวจสอบ

ซึ่งช่วยให้คุณวิเคราะห์หน้าได้ คุณสามารถตรวจสอบได้หลังจากโหลดหรือขณะโหลด

ตรวจสอบสถานะปัจจุบัน

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

มันให้รายการสิ่งของ ระบายสีตามความสำคัญ และแสดงจำนวนปัญหา ฉันสามารถดูรายละเอียดเพิ่มเติมได้โดยคลิกที่พวกเขา

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

โหลดหน้าใหม่และการตรวจสอบเมื่อโหลด

ฉันกลับไปและเลือกเพื่อตรวจสอบการโหลด ผลลัพธ์จะคล้ายกัน แต่ตามที่คาดไว้จะมีปัญหาในการโหลดหน้ามากกว่าหลังจากที่โหลดหน้าแล้ว

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

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

คอนโซล

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

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

นี่เป็นเครื่องมือที่ทรงพลัง แต่มีหลายอย่างให้ใช้ โชคดีที่มีเอกสารอ้างอิงที่ดีพร้อมตัวอย่างการใช้งาน

แก้จุดบกพร่อง

การเลือก ctrl + p ใน Windows หรือ cmd + p บน Mac จะเปิดหน้าจอการดีบักซึ่งคุณสามารถเลือกสคริปต์ที่จะดีบักได้ เครื่องมือนี้ให้คุณสมบัติการดีบักที่คุณคาดว่าจะเห็นในสภาพแวดล้อมการเขียนโปรแกรมใดๆ: หยุดชั่วคราว ดำเนินการต่อ ก้าวเข้าสู่ ก้าวข้าม จุดพัก โค้ดที่จัดรูปแบบ ฯลฯ

ไฟล์วิธีใช้โดยละเอียดมีไว้เพื่อให้คุณใช้โหมดแก้ไขข้อบกพร่อง

หน้าต่างสไตล์ CSS

กล่องด้านขวาสุดมีข้อมูล CSS ทั้งหมด เมื่อคุณเลือกองค์ประกอบ หน้าต่างสไตล์ทางด้านขวาจะแสดงข้อมูลสไตล์สำหรับองค์ประกอบนั้น ภาคนี้น่าสนใจ เครื่องมือมีห้ากลุ่ม: สไตล์, คอมพิวเตอร์, ตัวฟังเหตุการณ์, เบรกพอยต์ DOM และคุณสมบัติ

สไตล์

คุณสามารถเลือกสไตล์และเปลี่ยนแปลงได้ด้วยตนเองในหน้าต่างนี้ ตัวอย่างเช่น คุณสามารถเลือกขนาดแบบอักษรและสีได้

เลือกขนาดตัวอักษรและป้อนขนาดของคุณเอง เมื่อคุณทำเช่นนั้น ขนาดแบบอักษรของแบบอักษรที่คุณเลือกจะเปลี่ยนบนหน้าจอ

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

หากคุณคลิกที่ site.CSS ทางด้านขวา คุณจะเปิดหน้าต่างขนาดใหญ่ขึ้นพร้อมรายละเอียดข้อมูล ที่นี่ คุณสามารถพิมพ์ชื่อฟอนต์ที่ต้องการใช้ ระบุสี ระบุขนาด ฯลฯ

คำนวณ

นี่แสดงการปรับขนาดกล่องเป็นพิกเซล มีช่องว่างภายใน ขอบ และระยะขอบ

โหมดอุปกรณ์

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

อุปกรณ์

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

ฉันเลือก Amazon Kindle Fire HDX 7” และหน้าจอก็เลียนแบบอุปกรณ์นั้น ดังนั้นฉันจึงได้เห็นว่าเว็บไซต์จะมีลักษณะเป็นอย่างไรบนหน้าจอและการทำงานของระบบสัมผัสเป็นอย่างไร

คุณสามารถเปลี่ยนการวางแนวของหน้าจอได้โดยกดปุ่มสลับขนาด

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

เครือข่าย

นอกจากนี้ยังมีการเลือกประเภทเครือข่ายที่คุณกำลังเข้าถึงเว็บไซต์อีกด้วย วิธีนี้ช่วยให้คุณเห็นประสิทธิภาพของเว็บไซต์ผ่านประเภทการเชื่อมต่อและความเร็วที่หลากหลาย คุณสามารถทดสอบความเร็วได้หลายระดับตั้งแต่ 50 Kbps GPRS ถึง 30 Mbps WiFi และความเร็วในการเชื่อมต่อ 2G, 3G และ 4G นี่เป็นวิธีที่ยอดเยี่ยมในการทดสอบความเร็วของเว็บไซต์ของคุณผ่านเครือข่ายต่างๆ และรับข้อมูลเชิงลึกเกี่ยวกับสิ่งที่ต้องปรับปรุง

แบบสอบถามสื่อ

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

• ข้อความค้นหาที่กำหนดเป้าหมายความกว้างสูงสุด
• ความกว้างภายในช่วง
• ข้อความค้นหาที่กำหนดเป้าหมายความกว้างขั้นต่ำ

ซึ่งช่วยให้คุณปรับสไตล์และเนื้อหาสื่อสำหรับการออกแบบที่ตอบสนองได้อย่างเต็มที่

ลิ้นชัก

มีอีกส่วนหนึ่งของเครื่องมือภายใต้หน้าจอหลักที่เรียกว่าลิ้นชัก สิ่งนี้เพิ่ม:

คอนโซล – นี่คือคอนโซลเดียวกับในหน้าต่างหลัก คุณสามารถใช้ร่วมกับเครื่องมือใดก็ได้ในหน้าต่างหลักโดยวางไว้ที่นี่

ค้นหา - ให้คุณค้นหาแหล่งที่มา

การจำลอง – คุณสามารถเลือกอุปกรณ์ (คุณสามารถเลือกรุ่น ความละเอียด เครือข่าย ฯลฯ) สื่อ เครือข่าย (ทรูพุตและตัวแทนผู้ใช้) และเซ็นเซอร์ (หน้าจอสัมผัส มาตรวัดความเร่ง ฯลฯ) ได้

การแสดงผล – แสดงรูปสี่เหลี่ยมผืนผ้าของสี เส้นขอบของเลเยอร์แบบผสม เครื่องวัด FPS การทาสีหน้าใหม่อย่างต่อเนื่อง และปัญหาคอขวดของการเลื่อนที่อาจเกิดขึ้น

การตั้งค่าและอื่นๆ

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

มีการตั้งค่ามากมายที่คุณสามารถปรับเปลี่ยนได้ คุณจึงสามารถปรับเปลี่ยนเครื่องมือให้ทำงานตามที่คุณต้องการได้

Chrome Canary

หากคุณต้องการได้รับ Chrome DevTools ของ Google จริงๆ ให้ลองใช้ Chrome Canary ไอคอนของมันคือสีเหลือง รับไหม มันต้องการผ้าคลุม ใหม่ล่าสุดและยิ่งใหญ่ที่สุดจาก Google ออกแบบมาสำหรับนักพัฒนาและมี DevTools เวอร์ชันล่าสุด ยังไม่เสถียรเพียงพอสำหรับการใช้งานทั่วไป ดังนั้นระบบของคุณอาจเสียหายได้

หากคุณมีแนวโน้มที่จะสร้างความเสียหายร้ายแรงต่อสภาพแวดล้อมของคุณเมื่อระบบของคุณเสียหาย ให้ดูที่ไอคอน Chrome Canary ในภาพด้านบนและอย่ากะพริบเป็นเวลาห้าวินาที

ตอนนี้คุณสามารถไปยังจุดสิ้นสุด คุณจะจำส่วนนี้ไม่ได้

ห่อ

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

ตาคุณ! คุณใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome หรือไม่ ฉันละทิ้งคุณลักษณะที่คุณชื่นชอบหรือไม่? คุณมีอะไรจะเพิ่มไหม ฉันต้องการจะได้ยินเกี่ยวกับเรื่องนี้ในความคิดเห็นด้านล่าง!

ภาพขนาดย่อของบทความโดย Anikei / shutterstock.com