Google Chrome DevTools สำหรับผู้ที่ไม่ใช่นักพัฒนา

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

แต่มีมากกว่าด้านผู้ใช้ มันสร้างมาอย่างดีสำหรับนักพัฒนาเช่นกัน Firefox เป็นอีกหนึ่งเบราว์เซอร์ที่ยอดเยี่ยมที่มอบประสบการณ์การพัฒนาที่ยอดเยี่ยมแม้ว่าฐานผู้ใช้จะค่อนข้างเล็ก ด้วยเหตุนี้เราจึงมุ่งเน้นไปที่ Chrome และเป็น DevTools แต่โชคดีที่ UI ของเบราว์เซอร์ส่วนใหญ่ยังคงคล้ายกันมากดังนั้นคำแนะนำที่นี่จะถูกแปลเป็นอย่างดีกับ Firefox, Safari, Edge และเบราว์เซอร์อื่น ๆ

Chrome DevTools คืออะไร

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

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

เครื่องมือ dev คือสิ่งที่คุณเห็นในภาพหน้าจอด้านบนโดยมีรหัสทางด้านซ้ายและคุณสมบัติต่างๆทางด้านขวา นั่นคือมุมมองเริ่มต้นที่คุณจะเห็นหากคุณกด Command + Option + C (Mac) หรือ Control + Shift + C (Windows, Linux, Chrome OS)

DevTools มีความสามารถมากมาย แต่สิ่งที่โดดเด่นกว่านั้นคือ:

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

นี่เป็นรายการสั้น ๆ แต่ครอบคลุมคุณสมบัติที่โดดเด่นบางประการซึ่งส่วนใหญ่เราจะกล่าวถึง

ที่เกี่ยวข้อง : วิธีสร้างส่วนขยาย Chrome แรกของคุณ

ทำไมคุณถึงต้องการ DevTools กรณีการใช้งานคืออะไร?

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

ใช้ CSS Code

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

เช่นเดียวกับเบราว์เซอร์อื่น ๆ ส่วนใหญ่แม้ว่าข้อความรายการเมนูอาจแตกต่างกันเล็กน้อย เมื่อคุณทำเช่นนั้นคุณจะเห็น DevTools เปิดขึ้นและเลือกองค์ประกอบที่คุณต้องการโดยตรง ในนั้นคุณจะเห็นสองส่วนหลักของเครื่องมือ dev ด้าน HTML และ CSS (ซ้ายและขวา):

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

ทันทีที่คุณพิมพ์สไตล์ในเพจจะอัปเดต คุณสามารถเขียน CSS ใดก็ได้ที่นี่และจะนำไปใช้เช่นเดียวกับสไตล์ที่มีอยู่แล้วในหน้า หากคุณกดใกล้จุดสิ้นสุดของกฎ (ภายใต้ "ความกว้าง") กฎจะเริ่มเพิ่มรูปแบบใหม่ หรือคุณสามารถเขียนไว้ที่ด้านบนโดยระบุว่า“ element.style” จากนั้นหากคุณต้องการแบ่งปันสิ่งนี้กับนักพัฒนาของคุณคุณสามารถเลือกรหัสและคัดลอกวางได้ เคล็ดลับสำหรับมืออาชีพยังจับ "ตัวเลือก" ไปที่สไตล์ นี่คือ“ .RNNXgb” ในภาพหน้าจอด้านบน สิ่งนี้จะบอกนักพัฒนาว่าคุณกำลังเพิ่มสไตล์องค์ประกอบใด

ที่เกี่ยวข้อง : WordPress CSS: คู่มือพื้นฐานสำหรับผู้เริ่มต้น

เลือกสี

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

ค้นหาแบบอักษรที่ใช้

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

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

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

ที่เกี่ยวข้อง : วิธีเลือกแบบอักษรที่ดีที่สุดสำหรับเว็บไซต์ของคุณ

แคชเค้นและความเร็ว

แคชคืออะไร? พูดง่ายๆคือทรัพยากรที่บันทึกไว้ในเครื่องของคุณเพื่อใช้ในอนาคต ทรัพยากรอาจเป็นไฟล์ JS, CSS หรือรูปภาพ ถ้าไม่เปลี่ยนทุกครั้งที่เปิดเพจก็ไม่จำเป็นต้องดาวน์โหลดทุกครั้งใช่ไหม ดังนั้นเบราว์เซอร์ก็จะเก็บไว้ในเครื่องของคุณชั่วขณะ

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

เปิดเครื่องมือ dev และไปที่แท็บ "เครือข่าย" จากนั้นคลิก“ ปิดการใช้งานแคช” และทำการ“ ฮาร์ดรีเฟรช”:

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

บนแท็บเดียวกันหลังจากรีเฟรชแล้วคุณจะเห็นการวัดความเร็วและน้ำหนักของหน้าด้วย ระยะเวลาที่จะเรียก "โหลด" (เหตุการณ์เมื่อสคริปต์อื่นแนบเพื่อทำงานเพิ่มเติม) จำนวนไฟล์ที่ร้องขอ (31 คำขอข้างต้นจำนวนที่ค่อนข้างดี) จำนวนไฟล์ที่ดาวน์โหลดและอื่น ๆ ง่ายๆคือยิ่งต่ำยิ่งดีสำหรับแต่ละค่า สิ่งใดก็ตามที่สูงกว่า 100-150 คำขอและคุณจะเริ่มเห็นปัญหาความเร็วสูง

DevTools ยังมีการจำลองการเชื่อมต่อที่ช้า คุณลักษณะที่มีประโยชน์มากในการดูว่าไซต์ของคุณทำงานอย่างไรบนเครือข่ายที่ช้ากว่าเช่น 3G หากต้องการเปิดใช้งานเพียงแค่เปลี่ยนค่าข้าง“ ปิดการใช้งานแคช” แล้วกดรีเฟรช เมื่อคุณรีเฟรชคุณจะเห็นแต่ละขั้นตอนของการโหลดไซต์ เมื่อปิดใช้งานแคชนี่จะเป็นการเข้าชมครั้งแรกสำหรับการใช้งานปกติ

ดูความแตกต่างของความเร็วเมื่อเราเลือก“ Slow 3G” และรีเฟรชเทียบกับตัวอย่างแรกที่ใช้ความเร็วในการเชื่อมต่อจริง คุณยังสามารถทดสอบ "ออฟไลน์" ได้อีกด้วย - ไซต์จะทำงานอย่างไรโดยไม่ต้องเชื่อมต่ออินเทอร์เน็ต หากฟังดูแปลก ๆ ไม่ใช่แอปพลิเคชันเว็บแบบก้าวหน้าก็อนุญาตให้เว็บไซต์ทำงานได้แม้ไม่มีการเชื่อมต่ออินเทอร์เน็ตหากผู้เยี่ยมชมเข้าถึงอย่างน้อยหนึ่งครั้ง

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

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

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

ที่เกี่ยวข้อง :“ การเร่งไซต์ของคุณ” หมายความว่าอย่างไรและจะบรรลุได้อย่างไร

คอนโซล DevTools

มุมมองสุดท้ายที่เราจะครอบคลุมคือคอนโซล เข้าถึงได้ง่ายเพียงแค่กดปุ่ม ESC หรือไปที่แท็บ“ คอนโซล” ตามที่คาดไว้ไม่มีข้อผิดพลาดมีเพียงคำเตือนเล็กน้อยที่ไม่ควรทำให้เกิดปัญหามากเกินไป:

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

นี่คือตัวอย่างของข้อผิดพลาดดังกล่าว:

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

ที่เกี่ยวข้อง : เส้นทางสู่การเป็นนักออกแบบเว็บไซต์ที่ดี

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

สรุป

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

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

มีคุณสมบัติอื่น ๆ อีกมากมายที่รอให้ใช้อย่ากลัวที่จะสำรวจ!