Home-theater-designers
Chrome DevTools เป็นทรัพยากรที่จำเป็นสำหรับนักพัฒนา แม้ว่าเบราว์เซอร์อื่นๆ จะมีเครื่องมือแก้ปัญหาที่ค่อนข้างสะดวก แต่ Chrome DevTools ก็คุ้มค่ากับความสนใจของคุณเนื่องจากอินเทอร์เฟซและความนิยมที่หลากหลาย
Chrome เป็นเบราว์เซอร์ที่ได้รับความนิยมมากที่สุดสำหรับนักพัฒนา เนื่องจากมีชุดเครื่องมือดีบั๊กอันทรงพลัง การใช้ Chrome DevTools เป็นเรื่องง่าย แต่คุณต้องเข้าใจวิธีการทำงานเพื่อให้เกิดประโยชน์สูงสุด
เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome ทำงานอย่างไร
Chrome DevTools ให้คุณแก้ปัญหาบนเว็บไซต์ผ่านคอนโซลข้อผิดพลาดและเครื่องมือแก้ไขจุดบกพร่องและการตรวจสอบอื่นๆ การใช้ DevTools เผยให้เห็นช่องโหว่ส่วนหน้าและช่วยให้คุณตรวจสอบได้ว่าเว็บไซต์ของคุณปรากฏอย่างไรบนอุปกรณ์เคลื่อนที่และแท็บเล็ต
ด้วย DevTools คุณสามารถดำเนินการแก้ไขโค้ดของเว็บไซต์ได้แบบเรียลไทม์ เช่น JavaScript, HTML และ CSS และรับผลการเปลี่ยนแปลงของคุณทันที
การเปลี่ยนแปลงที่คุณทำผ่าน DevTools จะไม่ส่งผลต่อเว็บไซต์อย่างถาวร พวกเขาแสดงผลลัพธ์ที่คาดหวังไว้ชั่วคราวราวกับว่าคุณได้นำไปใช้กับซอร์สโค้ดจริง วิธีนี้ช่วยให้คุณหาวิธีทำให้เว็บไซต์ของคุณโหลดเร็วขึ้นมาก และทำให้แก้จุดบกพร่องได้ง่ายขึ้น
วิธีเข้าถึง Chrome DevTools
คุณสามารถเข้าถึง Chrome DevTools ได้หลายวิธี ในการเปิดเครื่องมือสำหรับนักพัฒนาโดยใช้วิธีทางลัดบน Mac OS ให้กด Cmd + Opt + ฉัน . หากคุณกำลังใช้ระบบปฏิบัติการ Windows ให้กดปุ่ม Ctrl + Shift + ฉัน ปุ่มบนแป้นพิมพ์ของคุณ
หรือคุณสามารถเข้าถึงเครื่องมือสำหรับนักพัฒนา Chrome ได้โดยคลิกที่จุดสามจุดที่มุมบนขวาของหน้าจอ มุ่งหน้าสู่ เครื่องมือเพิ่มเติม และเลือก เครื่องมือสำหรับผู้พัฒนา . อีกทางเลือกหนึ่งคือการคลิกขวาบนหน้าเว็บและคลิกที่ ตรวจสอบ ตัวเลือก.
การใช้เครื่องมือสำหรับนักพัฒนา Chrome สำหรับการวินิจฉัยเว็บไซต์
Chrome DevTools มีหลายวิธีในการปรับแต่งและแก้ไขปัญหาหน้าเว็บ มาดูวิธีที่ DevTools สามารถช่วยคุณได้
ดูว่าเว็บไซต์ของคุณมีลักษณะอย่างไรบนสมาร์ทโฟน
เมื่อคุณเปลี่ยนเบราว์เซอร์ Chrome เป็นโหมดนักพัฒนาซอฟต์แวร์แล้ว เบราว์เซอร์จะแสดงหน้าเว็บของคุณในเวอร์ชันครึ่งขนาด อย่างไรก็ตาม การทำเช่นนี้ไม่ได้ให้มุมมองที่แท้จริงว่าสมาร์ทโฟนหรือแท็บเล็ตจะหน้าตาเป็นอย่างไร
โชคดีที่ Chrome DevTools นอกจากการตั้งค่าขนาดหน้าจอของหน้าเว็บแล้ว Chrome DevTools ยังให้คุณสลับไปมาระหว่างหน้าจอมือถือประเภทต่างๆ และเวอร์ชันต่างๆ ได้อีกด้วย
หากต้องการเข้าถึงตัวเลือกนั้น ให้เปิดสวิตช์ ตรวจสอบ โหมด. จากนั้นคลิกที่ ตอบสนอง เลื่อนลงที่มุมบนซ้ายของ DevTools และเลือกอุปกรณ์มือถือที่คุณต้องการ จากนั้นหน้าเว็บจะแสดงผลและปรับให้พอดีกับขนาดของอุปกรณ์เคลื่อนที่ที่คุณเลือก
การใช้ดิสก์ windows 10 100 แก้ไข
เข้าถึงไฟล์ต้นฉบับของหน้าเว็บ
คุณสามารถเข้าถึงไฟล์ที่สร้างหน้าเว็บผ่าน Chrome DevTools ในการเข้าถึงไฟล์เหล่านี้ ให้คลิกที่ แหล่งที่มา ตัวเลือกที่ส่วนบนของเมนู DevTools สิ่งนี้จะเปิดเผยระบบไฟล์ของเว็บไซต์และยังช่วยให้คุณแก้ไขได้
คุณยังสามารถค้นหาไฟล์ต้นทางได้ ซึ่งจะมีประโยชน์เมื่อคุณจัดการกับหน้าเว็บที่มีทรัพยากรมากมาย หากต้องการค้นหาไฟล์ต้นฉบับผ่าน DevTools ให้คลิกที่ ค้นหา ตัวเลือกเหนือคอนโซล
แต่ถ้าคุณหา .ไม่เจอ ค้นหา ทางเลือกที่ดีกว่าคือการใช้แป้นพิมพ์ลัด บน Mac OS ให้กด Cmd + Opt + F คีย์เพื่อค้นหาไฟล์ต้นฉบับ หากคุณกำลังใช้ระบบปฏิบัติการ Windows ให้กดปุ่ม Ctrl + Shift + F คีย์เพื่อเข้าถึงแถบค้นหาไฟล์ต้นฉบับ
ดำเนินการแก้ไขแบบสดไปยังหน้าเว็บ
วัตถุประสงค์หลักประการหนึ่งของการใช้ DevTools คือการดำเนินการ แก้ไของค์ประกอบบนหน้าเว็บปลอมทันที . เมื่อคุณเปลี่ยนไปใช้เครื่องมือสำหรับนักพัฒนา คุณสามารถแก้ไขเนื้อหา HTML ของเว็บไซต์ได้โดยคลิกที่ องค์ประกอบ ตัวเลือก. จากนั้น คลิกขวาที่จุดใดก็ได้ที่คุณต้องการใช้การเปลี่ยนแปลงภายในตัวแก้ไขโค้ด แล้วเลือก แก้ไขเป็น HTML .
หากต้องการแก้ไขคุณสมบัติ CSS ที่ไม่อยู่ในบรรทัด ให้เลือก แหล่งที่มา . จากนั้นเลือกไฟล์ CSS ที่คุณต้องการแก้ไข วางเคอร์เซอร์บนบรรทัดที่คุณเลือกภายในคอนโซลโค้ดเพื่อทำการแก้ไขแบบสด การทำเช่นนี้จะช่วยให้คุณได้รับคำติชมทันทีเกี่ยวกับการเปลี่ยนแปลงรูปแบบใดๆ ที่คุณใช้กับหน้าเว็บ
โปรดทราบว่าเมื่อคุณแก้ไขหน้าผ่าน DevTools การโหลดหน้าซ้ำบนเบราว์เซอร์ของคุณจะเปลี่ยนกลับเป็นแบบฟอร์มเดิม และคุณเท่านั้นที่เห็นการแก้ไข การแก้ไขผ่าน DevTools จะไม่ส่งผลต่อการทำงานที่ราบรื่นหรือการใช้งานเว็บไซต์นั้นสำหรับผู้ใช้รายอื่น
ดีบักโค้ด JavaScript ด้วย DevTools Console
วิธีที่ดีที่สุดวิธีหนึ่งในการดีบัก JavaScript คือการใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome มันให้รายงานโดยตรงเกี่ยวกับสคริปต์ที่ไม่ถูกต้องรวมถึงตำแหน่งที่แน่นอนของจุดบกพร่อง
แนวทางปฏิบัติที่ดีในการเปิด DevTools ไว้ตลอดเวลาขณะออกแบบเว็บไซต์ด้วย JavaScript ตัวอย่างเช่น เรียกใช้ console.log() คำสั่ง JavaScript บนชุดคำสั่งจะแสดงผลลัพธ์ของบันทึกดังกล่าวในคอนโซล DevTools หากโปรแกรมทำงานสำเร็จ
โดยค่าเริ่มต้น คอนโซลจะรายงานปัญหา JavaScript บนเว็บไซต์ของคุณ คุณสามารถค้นหาคอนโซลที่ส่วนล่างของ DevTools หรือเข้าถึงได้โดยคลิกที่ คอนโซล ที่ด้านบนของหน้าต่าง Chrome DevTools
ตรวจสอบการโหลดทรัพยากรจากฐานข้อมูล
นอกจากการดีบัก JavaScript แล้ว คอนโซลยังสามารถให้รายละเอียดของทรัพยากรที่โหลดไม่ถูกต้องจากฐานข้อมูลของเว็บไซต์
แม้ว่าจะไม่ใช่วิธีที่ดีที่สุดในการดีบักปัญหาแบ็กเอนด์ แต่ก็ยังบอกคุณว่าทรัพยากรใดที่ส่งคืน 404 เกิดข้อผิดพลาดหลังจากเรียกใช้แบบสอบถามฐานข้อมูลขององค์ประกอบเหล่านั้น
ที่เกี่ยวข้อง: ข้อผิดพลาดทั่วไปของเว็บไซต์และความหมาย
เปลี่ยนการวางแนวของเครื่องมือสำหรับนักพัฒนา Chrome
หากต้องการเปลี่ยนตำแหน่งของเครื่องมือสำหรับนักพัฒนา Chrome ให้คลิกที่จุดเมนูสามจุดภายใน DevTools (ไม่ใช่จุดหลักในเบราว์เซอร์) จากนั้นเลือกตำแหน่งที่คุณต้องการจาก ฝั่งท่าเรือ ตัวเลือก.
ติดตั้งส่วนขยาย Chrome DevTools
คุณยังสามารถติดตั้งภาษาหรือส่วนขยายเฉพาะเฟรมเวิร์กที่ทำงานร่วมกับ Chrome DevTools ได้ การติดตั้งส่วนขยายเหล่านี้ช่วยให้คุณแก้ไขข้อบกพร่องของหน้าเว็บได้อย่างมีประสิทธิภาพมากขึ้น
คุณเข้าถึงรายการส่วนขยายที่มีให้สำหรับ Chrome DevTools ได้ใน Chrome's ส่วนขยาย DevTools ที่โดดเด่น แกลเลอรี่
ตรวจสอบปัญหาด้านความปลอดภัยบนเว็บไซต์
Chrome DevTools ช่วยให้คุณประเมินว่าเว็บไซต์ของคุณมีความปลอดภัยเพียงใด โดยพิจารณาจากพารามิเตอร์ต่างๆ เช่น ความพร้อมใช้งานของ ใบรับรองความปลอดภัยของเว็บ และความปลอดภัยในการเชื่อมต่อ เป็นต้น หากต้องการตรวจสอบว่าเว็บไซต์ของคุณปลอดภัยหรือไม่ ให้คลิกที่ ความปลอดภัย ตัวเลือกที่ด้านบนของ DevTools
NS ความปลอดภัย แท็บให้ภาพรวมของรายละเอียดความปลอดภัยของเว็บไซต์ของคุณและบอกถึงภัยคุกคามที่อาจเกิดขึ้น
ตรวจสอบเว็บไซต์ของคุณ
Chrome DevTools มีคุณลักษณะที่ช่วยให้คุณตรวจสอบประสิทธิภาพโดยรวมของเว็บไซต์ของคุณตามพารามิเตอร์เฉพาะ
ในการเข้าถึงคุณสมบัตินั้น ให้เลือก ประภาคาร ตัวเลือกที่ด้านบนของหน้าต่าง DevTools จากนั้นเลือกพารามิเตอร์ที่คุณต้องการตรวจสอบ จากนั้นทำเครื่องหมายที่ มือถือ หรือ เดสก์ทอป ตัวเลือกเพื่อดูว่าหน้าเว็บของคุณทำงานอย่างไรบนแพลตฟอร์มต่างๆ
จากนั้นคลิกที่ สร้างรายงาน เพื่อเรียกใช้การวิเคราะห์หน้าเว็บของคุณตามพารามิเตอร์ที่คุณเลือกไว้ก่อนหน้านี้
คุณยังสามารถประเมินรันไทม์หรือประสิทธิภาพการโหลดของเว็บไซต์ได้โดยคลิกที่ ประสิทธิภาพ ตัวเลือก. หากต้องการทำการทดสอบ ให้คลิกที่ไอคอนถัดจาก คลิกที่ปุ่มบันทึก ตัวเลือกในการวิเคราะห์รันไทม์ หรือคลิกที่ปุ่มโหลดซ้ำด้านล่างเพื่อประเมินประสิทธิภาพเวลาในการโหลด คลิกที่ หยุด เพื่อหยุดเครื่องวิเคราะห์และแสดงผล
ใช้ประโยชน์จาก Chrome DevTools
ขึ้นอยู่กับสิ่งที่คุณต้องการสำหรับ Chrome DevTools ให้คุณทำมากกว่าการดีบักเว็บไซต์อย่างง่าย โชคดีที่ DevTools ใช้งานง่ายสำหรับโปรแกรมเมอร์ทุกระดับทักษะ คุณยังสามารถเรียนรู้พื้นฐานของการพัฒนาส่วนหน้าของเว็บไซต์ได้ด้วยการค้นหาซอร์สโค้ดของเว็บไซต์ที่คุณเยี่ยมชม
ข้อยกเว้น kmmode ไม่ได้รับการจัดการ windows 10
คุณอาจค้นพบตัวเลือกอื่นๆ ที่เราไม่ได้กล่าวถึงในบทความนี้ ดังนั้น อย่าลังเลที่จะเล่นกับคุณสมบัติที่มีให้ นอกจากนี้ การปรับแต่งคุณสมบัติเหล่านี้ไม่เป็นอันตรายต่อเว็บไซต์แม้แต่น้อย
แบ่งปัน แบ่งปัน ทวีต อีเมล วิธีใช้ Chrome OS บน Raspberry Piไม่สามารถซื้อ Chromebook ได้หรือไม่? กำลังมองหาทางเลือกอื่นสำหรับ Raspbian หรือไม่? ต่อไปนี้คือวิธีการติดตั้ง Chrome OS เวอร์ชันหนึ่งบน Raspberry Pi ของคุณ
อ่านต่อไป หัวข้อที่เกี่ยวข้อง- อินเทอร์เน็ต
- การเขียนโปรแกรม
- HTML
- การพัฒนาเว็บ
- JavaScript
- Google Chrome
Idowu หลงใหลเกี่ยวกับเทคโนโลยีอัจฉริยะและประสิทธิภาพการทำงานทุกอย่าง ในเวลาว่าง เขาเล่นไปรอบๆ กับการเขียนโค้ดและเปลี่ยนไปเล่นกระดานหมากรุกเมื่อรู้สึกเบื่อ แต่เขาก็ชอบที่จะแยกตัวออกจากงานประจำบ้างเป็นบางครั้ง ความหลงใหลในการแสดงให้ผู้คนได้รู้จักเทคโนโลยีสมัยใหม่กระตุ้นให้เขาเขียนมากขึ้น
เพิ่มเติมจาก Idowu Omisolaสมัครรับจดหมายข่าวของเรา
เข้าร่วมจดหมายข่าวของเราสำหรับเคล็ดลับทางเทคนิค บทวิจารณ์ eBook ฟรี และดีลพิเศษ!
คลิกที่นี่เพื่อสมัครสมาชิก