ไม่มีการสร้างเว็บไซต์อย่างสมบูรณ์แบบ เช่นเดียวกับผลิตภัณฑ์ทั้งหมดที่ผลิตโดยมนุษย์ข้อผิดพลาดของรหัสเป็นส่วนหนึ่งของกระบวนการ จึงเป็นสิ่งสำคัญที่จะต้องทดสอบเว็บไซต์ใหม่ที่คุณสร้างขึ้นอย่างละเอียดเพื่อให้แน่ใจว่าไม่มีข้อผิดพลาดมากที่สุดเพื่อให้ผู้ใช้ได้รับประสบการณ์ที่ดีที่สุด
คุณไม่ควรทดสอบเว็บไซต์โดยไม่ลองใช้ชุด DevTools ของ Google Chrome ก่อน โหมดนักพัฒนาซอฟต์แวร์ของ Chrome ช่วยให้คุณสามารถทดลองและทดสอบไซต์ใหม่ (หรือเว็บไซต์ที่มีอยู่) อย่างละเอียดเพื่อค้นหาและแก้ไขข้อบกพร่อง นอกจากนี้ยังสามารถให้ข้อมูลเชิงลึกเกี่ยวกับวิธีการเรียกใช้ไซต์อื่น ๆ รวมถึงการดูซอร์สโค้ด
นี่คือทุกสิ่งที่คุณต้องรู้เกี่ยวกับโหมดนักพัฒนาเบราว์เซอร์ Google Chrome เครื่องมือที่มีและวิธีการใช้อย่างมีประสิทธิภาพ
Chrome คืออะไร โหมดนักพัฒนาซอฟต์แวร์หรือไม่
เมื่อเราอ้างถึงโหมดนักพัฒนาซอฟต์แวร์ Chrome เราไม่ได้พูดถึง โหมดผู้พัฒนาเดียวกัน ที่คุณจะเห็นใน Chromebooks สิ่งที่เราหมายถึงคือเครื่องมือพัฒนา Chrome ที่กว้างขวาง (เรียกว่า Google DevTools) ซึ่งสร้างไว้ในเบราว์เซอร์เอง
เครื่องมือเหล่านี้ออกแบบมาเพื่อทดสอบวิเคราะห์และใช้เพื่อจุดประสงค์ ทำลาย (ถ้าคุณต้องการ) หน้าเว็บที่คุณโหลดในเบราว์เซอร์ Google Chrome เพื่อการทดสอบ ในระดับพื้นฐานคุณสามารถใช้ DevTools เพื่อดูซอร์สโค้ดของเว็บไซต์ช่วยให้คุณดูภายใต้ประทุนเพื่อดูว่าไซต์นั้นถูกสร้างขึ้นมาได้อย่างไรและมันทำงานได้ดีแค่ไหน
Google อย่างไรก็ตาม DevTools มีมากกว่านี้ คุณสามารถใช้โหมดนักพัฒนาซอฟต์แวร์ของ Chrome เพื่อเปลี่ยนหน้าหลังจากโหลดแล้วให้รันคำสั่งคอนโซล Google Chrome เพื่อควบคุมและจัดการหน้าเช่นเดียวกับการทดสอบความเร็วและเครือข่ายเพื่อตรวจสอบปริมาณการใช้เว็บ
In_content_1 ทั้งหมด: [300x250] / dfp: [640x360]->คุณสามารถเลียนแบบอุปกรณ์อื่น ๆ รวมถึงระบบปฏิบัติการและความละเอียดหน้าจอที่แตกต่างกันในโหมด Chrome DevTools สิ่งนี้จะช่วยให้คุณเห็นว่าเว็บไซต์มีการออกแบบเว็บไซต์ที่ตอบสนองได้ดีหรือไม่และเนื้อหาของไซต์และเค้าโครงจะเปลี่ยนไปตามความละเอียดหรือประเภทของอุปกรณ์
แม้ว่าเครื่องมือเหล่านี้จะมุ่งเน้นไปที่นักพัฒนาเว็บหรือนักทดสอบมืออาชีพ เพื่อให้ผู้ใช้ Chrome มาตรฐานทราบวิธีการใช้ชุด DevTools หากคุณพบปัญหากับเว็บไซต์ที่ไม่สามารถแก้ไขได้ให้สลับไปที่โหมดนักพัฒนาซอฟต์แวร์ของ Chrome สามารถช่วยคุณดูว่าปัญหาเกิดขึ้นกับเว็บไซต์หรือเบราว์เซอร์ของคุณ
วิธีเข้าถึง Google เมนู Chrome DevTools
คุณสามารถเข้าถึงเมนู Google Chrome DevTools ได้หลายวิธีขึ้นอยู่กับเครื่องมือที่คุณต้องการใช้
วิธีที่ง่ายที่สุดในการทำเช่นนี้ มาจากเมนู Google Chrome หากต้องการทำสิ่งนี้ให้คลิก ไอคอนเมนูสามจุดที่ด้านบนขวา จากเมนูที่ปรากฏขึ้นให้คลิก เครื่องมือเพิ่มเติม>เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
สิ่งนี้จะเปิดชุด DevTools ในเมนูใหม่ทางด้านขวาของแท็บหรือหน้าต่าง Chrome ที่เปิดอยู่
คุณสามารถทำได้โดยใช้แป้นพิมพ์ลัด จาก Windows หรือ Linux PC ให้เปิดเบราว์เซอร์ Chrome แล้วกดปุ่ม F12คุณสามารถกดปุ่ม Ctrl + Alt + Jหรือ Ctrl + Alt + Iในแท็บหรือหน้าต่าง Chrome ที่เปิดอยู่
สำหรับ macOS ให้กด F12หรือกดปุ่ม ตัวเลือก + คำสั่ง + Jหรือ ตัวเลือก + คำสั่ง + ฉันเพื่อเปิดเมนู Chrome DevTools แทน สิ่งนี้จะเปิดคอนโซล Chrome พร้อมตัวเลือกเพื่อย้ายไปยังเครื่องมือ Chrome อื่น ๆ ที่ด้านบนของเมนู DevTools
หากต้องการคุณสามารถดูซอร์สโค้ดของเว็บไซต์ (เปิด องค์ประกอบ)แท็บของเมนู DevTools ในกระบวนการ) บนหน้าเว็บใด ๆ ที่เปิดอยู่โดยคลิกขวาที่และคลิก ตรวจสอบตัวเลือก
ใช้ Chrome DevTools
ตามที่เราได้สัมผัสสั้น ๆ คุณสามารถใช้ชุด Chrome DevTools เพื่อดูซอร์สโค้ดสำหรับเว็บไซต์ภายใต้แท็บ องค์ประกอบมันจะช่วยให้คุณวิเคราะห์รหัสที่อยู่ด้านหลังหน้าที่คุณโหลดรวมถึงดูข้อความแสดงข้อผิดพลาด (ระบุปัญหาที่ไซต์โหลด) ในคอนโซล Chrome ภายใต้แท็บ คอนโซล
นอกจากนี้คุณยังสามารถดูแหล่งข้อมูลที่แตกต่างกันสำหรับเนื้อหาจากเว็บไซต์ภายใต้แท็บ แหล่งที่มาตัวอย่างเช่นหากไซต์เป็น ใช้เครือข่ายการจัดส่งเนื้อหา (CDN) สื่อจากไซต์จะถูกระบุว่าเป็นแหล่งข้อมูลอื่นที่นี่
โหมดผู้พัฒนา Chrome ช่วยให้คุณสามารถดาวน์โหลดเนื้อหานั้นโดยตรงหรือดำเนินการเพิ่มเติม การวิเคราะห์ที่ซับซ้อนของเนื้อหา
หากคุณต้องการทดสอบการทำงานของไซต์คุณสามารถตรวจสอบและบันทึกการใช้เครือข่ายของคุณได้ภายใต้แท็บ เครือข่ายสิ่งนี้จะแสดงความเร็วขนาดและประเภทของคำขอเครือข่ายระหว่างเบราว์เซอร์ของคุณกับเว็บไซต์
ตัวอย่างเช่นเมื่อหน้าเว็บโหลดครั้งแรกไซต์จะโหลดเนื้อหาของหน้าเว็บเอง แต่มันอาจ ขอข้อมูลจากฐานข้อมูลบุคคลที่สาม ตัวอย่างเช่นเมื่อคุณลงชื่อเข้าใช้สิ่งนี้อาจทำการสืบค้นฐานข้อมูลซึ่งจะแสดงเป็นคำขอเครือข่ายที่นี่
คุณสามารถวิเคราะห์เพิ่มเติมได้ในแท็บ ประสิทธิภาพที่ซึ่งคุณสามารถบันทึกการใช้งานเบราว์เซอร์ Chrome ของคุณในเชิงลึกยิ่งขึ้นรวมถึงการบันทึกภาพหน้าจอที่จุดต่างๆ วิธีนี้จะบันทึกเวลาที่ใช้ในการโหลดเว็บไซต์ของคุณเพื่อการวิเคราะห์เพิ่มเติม
Google Chrome มีชื่อเสียงในด้าน เป็นเรื่องยากในหน่วยความจำพีซีของคุณ ดังนั้นคุณสามารถทดสอบการใช้หน่วยความจำ JavaScript ของเว็บไซต์ของคุณได้ภายใต้แท็บ หน่วยความจำสามารถใช้โปรไฟล์การทดสอบ Chrome ที่แตกต่างกันได้ที่นี่พร้อมข้อมูลเพิ่มเติมเกี่ยวกับการทดสอบนี้ที่ หน้าเอกสารประกอบ Chrome DevTools
สำหรับการวิเคราะห์เชิงลึกของเนื้อหาเว็บไซต์ของคุณเช่นกัน เช่นที่เก็บข้อมูลเบราว์เซอร์ที่อาจใช้งานอยู่ (ตัวอย่างเช่นเพื่อบันทึกข้อมูล) คุณสามารถค้นหาผ่านแท็บ แอปพลิเคชันคุณสามารถดูข้อมูลคุกกี้ไซต์ได้ที่นี่ภายใต้ส่วน คุกกี้หรือล้างที่เก็บข้อมูลที่ใช้โดยคลิกตัวเลือก ล้างที่เก็บข้อมูล
หากคุณกังวลเกี่ยวกับความปลอดภัยของเว็บไซต์คุณสามารถตรวจสอบประสิทธิภาพในการทำงานของแท็บ ความปลอดภัยสิ่งนี้จะให้ภาพรวมโดยย่อของการวิเคราะห์ความปลอดภัยของ Chrome สำหรับหน้าเว็บรวมถึงว่าหน้านั้นมีใบรับรอง SSL ที่ถูกต้องและเชื่อถือได้หรือไม่
หากคุณต้องการสร้างรายงานในเว็บไซต์ของคุณ ประสิทธิภาพรวมถึงหากเป็นไปตามมาตรฐานผู้ใช้ทั่วไปและหากประสิทธิภาพของไซต์อาจมีผลต่อการเพิ่มประสิทธิภาพของเครื่องมือค้นหาคุณสามารถคลิกแท็บ ประภาคารข้อเสนอนี้เป็นการตั้งค่าที่คุณสามารถตรวจสอบหรือยกเลิกการเลือกรายงานของคุณ - คลิก สร้างรายงานเพื่อสร้างรายงานที่จะดู
สิ่งนี้แทบจะไม่ทำให้พื้นผิวของ Chrome นั้นมีโอกาส โหมดผู้พัฒนาสามารถนำมาให้นักพัฒนา หากคุณต้องการเรียนรู้เพิ่มเติม เอกสาร Chrome DevTools ควรช่วยคุณเกี่ยวกับเครื่องมือและคุณสมบัติที่มีให้รวมถึงวิธีการสร้างการทดสอบผู้ใช้ของคุณเอง
เคล็ดลับ Google Chrome ขั้นสูง
ผู้ใช้ Chrome ส่วนใหญ่ไม่เคยรู้ว่าชุด Google Chrome DevTools มีอยู่ในเบราว์เซอร์ แต่สำหรับผู้ใช้ระดับสูง ยังคงเป็นวิธีที่มีประโยชน์มากในการทดสอบและวิเคราะห์เว็บไซต์ นอกจากนี้ยังมี ส่วนขยายของ Chrome สำหรับนักพัฒนาเว็บ ของบุคคลที่สามเพื่อช่วยทดสอบเว็บไซต์ของคุณเพิ่มเติม
หากคุณ สร้างเว็บไซต์พื้นฐาน การสลับไปใช้โหมดนักพัฒนาซอฟต์แวร์ของ Chrome จะช่วยคุณได้ พบข้อผิดพลาดกับเว็บไซต์ของคุณที่มองไม่เห็นทันที คุณสามารถทำได้หาก Chrome ทำงานอย่างถูกต้องดังนั้นหากคุณ ดิ้นรนกับ Chrome ขัดข้อง คุณอาจต้องรีเซ็ตหรือติดตั้งเบราว์เซอร์ใหม่เสียก่อน