Chrome Developer Mode คืออะไร และมีประโยชน์อย่างไร?

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

คุณไม่ควรทดสอบเว็บไซต์โดยไม่ลอง Google Chrome DevTools ก่อน Chrome developer mode ช่วยให้คุณลองใช้และทดสอบเว็บไซต์ใหม่ (หรือเว็บไซต์ที่มีอยู่) อย่างละเอียดเพื่อค้นหาและแก้ไขบั๊ก มันยังให้ข้อมูลเชิงลึกเกี่ยวกับวิธีการทำงานของเว็บไซต์อื่นๆ รวมถึงการดูซอร์สโค้ด

นี่คือทุกสิ่งที่คุณต้องรู้เกี่ยวกับ Google Chrome browser developer mode เครื่องมือที่มันมี และวิธีใช้งานอย่างมีประสิทธิภาพ

Chrome Developer Mode คืออะไร?

เมื่อเราพูดถึง Chrome developer mode เราไม่ได้หมายถึงโหมดนักพัฒนาเดียวกันที่คุณจะเห็นบน Chromebook สิ่งที่เราหมายถึงคือเครื่องมือพัฒนา Chrome ที่ครอบคลุม (เรียกว่า Google DevTools) ที่สร้างไว้ในเบราว์เซอร์เอง

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

Google DevTools เสนอไม่ רקแค่นั้น คุณสามารถใช้ Chrome developer mode เพื่อเปลี่ยนหน้าหลังจากโหลดแล้ว รันคำสั่งคอนโซล Google Chrome เพื่อควบคุมและจัดการหน้า รวมถึงรันการทดสอบความเร็วและเครือข่ายเพื่อติดตามトラフィกเว็บ

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

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

วิธีเข้าถึงเมนู Google Chrome DevTools

มีหลายวิธีที่คุณสามารถเข้าถึงเมนู Google Chrome DevTools ได้ ขึ้นอยู่กับเครื่องมือที่คุณต้องการใช้

วิธีที่ง่ายที่สุดคือจากเมนู Google Chrome คลิกไอคอน สามจุด ที่มุมขวาบน จากเมนูที่ปรากฏ คลิก More Tools > Developer Tools

สิ่งนี้จะเปิด DevTools kit ในเมนูใหม่ทางด้านขวาของแท็บหรือหน้าต่าง Chrome ที่เปิดอยู่

คุณยังสามารถทำได้ด้วยคีย์บอร์ดชอร์ตคัท จาก Windows หรือ Linux PC เปิดเบราว์เซอร์ Chrome และกดปุ่ม F12 คุณยังสามารถกด Ctrl + Alt + J หรือ Ctrl + Alt + I ในแท็บหรือหน้าต่าง Chrome ที่เปิดอยู่

บน macOS กด F12 หรือกด Option + Command + J หรือ Option + Command + I เพื่อเปิดเมนู Chrome DevTools แทน จะเปิดคอนโซล Chrome พร้อมตัวเลือกย้ายไปเครื่องมือ Chrome อื่นๆ ที่ด้านบนของเมนู DevTools

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

การใช้งาน Chrome DevTools

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

คุณยังสามารถดูแหล่งที่มาต่างๆ สำหรับเนื้อหาจากเว็บไซต์ภายใต้แท็บ Sources ตัวอย่างเช่น หากเว็บไซต์ใช้ Content Delivery Network (CDN) สื่อจากเว็บไซต์จะถูกแสดงเป็นแหล่งที่มาที่แตกต่างกันที่นี่

Chrome developer mode ช่วยให้คุณดาวน์โหลดเนื้อหานั้นได้โดยตรง หรือทำการวิเคราะห์ที่ซับซ้อนยิ่งขึ้นของเนื้อหา

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

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

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

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

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

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

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

นี่เพียงแค่ขูดผิวศักยภาพที่ Chrome developer mode นำมาให้กับนักพัฒนา หากคุณต้องการเรียนรู้เพิ่มเติม เอกสาร Chrome DevTools ควรช่วยคุณกับเครื่องมือและคุณสมบัติที่เสนอ รวมถึงวิธีสร้างการทดสอบผู้ใช้ของตัวเองด้วยมัน

เทคนิค Google Chrome ขั้นสูง

ผู้ใช้ Chrome ส่วนใหญ่จะไม่เคยรู้ว่าชุดเครื่องมือ Google Chrome DevTools มีอยู่ในเบราว์เซอร์ของพวกเขา แต่สำหรับผู้ใช้ระดับมืออาชีพ มันยังคงเป็นวิธีที่มีประโยชน์อย่างยוצאת דופןในการทดสอบและวิเคราะห์เว็บไซต์ มีส่วนขยาย Chrome ของบุคคลที่สามสำหรับนักพัฒนาเว็บอีกด้วยที่ช่วยทดสอบเว็บไซต์ของคุณเพิ่มเติม

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