วิธีใช้ Chrome DevTools เพื่อแก้ไขปัญหาเว็บไซต์

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

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

วิธีการทำงานของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome

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

เมื่อใช้ DevTools คุณจะแก้ไขโค้ดของเว็บไซต์ได้แบบเรียลไทม์ เช่น JavaScript, HTML และ CSS และรับผลการเปลี่ยนแปลงทันที

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

วิธีเข้าถึง Chrome DevTools

คุณสามารถเข้าถึง Chrome DevTools ได้หลายวิธี หากต้องการเปิดเครื่องมือสำหรับนักพัฒนาโดยใช้วิธีทางลัดบน Mac OS ให้กด Cmd + Opt + I . หากคุณกำลังใช้ระบบปฏิบัติการ Windows ให้กด Ctrl + Shift + I ปุ่มบนแป้นพิมพ์ของคุณ

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

การใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome สำหรับการวินิจฉัยเว็บไซต์

Chrome DevTools มีหลายวิธีในการปรับแต่งและแก้ไขปัญหาหน้าเว็บ มาดูวิธีที่ DevTools ช่วยคุณได้

ดูว่าเว็บไซต์ของคุณมีลักษณะอย่างไรบนสมาร์ทโฟน

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

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

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

เข้าถึงไฟล์ต้นฉบับของหน้าเว็บ

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

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

อย่างไรก็ตาม หากคุณไม่พบ ค้นหา ทางเลือกที่ดีกว่าคือการใช้แป้นพิมพ์ลัด บน Mac OS ให้กด Cmd + Opt + F คีย์เพื่อค้นหาไฟล์ต้นฉบับ หากคุณใช้ Windows OS ให้กด Ctrl + Shift + F เพื่อเข้าสู่แถบค้นหาไฟล์ต้นฉบับ

ดำเนินการแก้ไขหน้าเว็บแบบสด

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

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

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

ดีบักโค้ด JavaScript ด้วยคอนโซล DevTools

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

แนวทางปฏิบัติที่ดีในการเปิด DevTools ไว้ตลอดเวลาขณะออกแบบเว็บไซต์ด้วย JavaScript ตัวอย่างเช่น การเรียกใช้ console.log() คำสั่ง JavaScript บนชุดคำสั่งจะแสดงผลลัพธ์ของบันทึกดังกล่าวในคอนโซล DevTools หากโปรแกรมทำงานสำเร็จ

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

ตรวจสอบการโหลดทรัพยากรจากฐานข้อมูล

นอกจากการดีบัก JavaScript แล้ว คอนโซลยังสามารถให้รายละเอียดของทรัพยากรที่โหลดไม่ถูกต้องจากฐานข้อมูลของเว็บไซต์ได้อีกด้วย

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

เปลี่ยนการวางแนวของเครื่องมือสำหรับนักพัฒนา Chrome

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

ติดตั้งส่วนขยาย Chrome DevTools

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

คุณเข้าถึงรายการส่วนขยายที่มีให้สำหรับ Chrome DevTools ได้ในแกลเลอรีส่วนขยาย DevTools เด่นของ Chrome

ตรวจสอบปัญหาด้านความปลอดภัยบนเว็บไซต์

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

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

ตรวจสอบเว็บไซต์ของคุณ

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

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

จากนั้น ให้คลิกที่สร้างรายงาน เพื่อเรียกใช้การวิเคราะห์หน้าเว็บของคุณตามพารามิเตอร์ที่คุณเลือกไว้ก่อนหน้านี้

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

ใช้ประโยชน์จาก Chrome DevTools

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

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