โหมดนักพัฒนาซอฟต์แวร์ Chrome คืออะไรและมีประโยชน์อย่างไร

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

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

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

โหมดนักพัฒนาซอฟต์แวร์ Chrome คืออะไร

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

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

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

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

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

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

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

วิธีที่ง่ายที่สุดในการทำเช่นนี้คือจากเมนู Google Chrome ในการดำเนินการนี้ ให้คลิกไอคอนเมนูสามจุด ที่มุมขวาบน จากเมนูที่ปรากฏขึ้น ให้คลิก เครื่องมือเพิ่มเติม> เครื่องมือสำหรับนักพัฒนา .

ซึ่งจะเป็นการเปิดชุดเครื่องมือ DevTools ในเมนูใหม่ทางด้านขวามือของแท็บหรือหน้าต่าง Chrome ที่เปิดอยู่

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

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

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

การใช้ Chrome DevTools

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

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

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

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

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

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

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

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

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

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

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

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

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

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