10 เคล็ดลับคอนโซล Chrome ที่คุณต้องรู้

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

ขณะนี้เว็บเบราว์เซอร์เกือบทั้งหมดได้รับการสนับสนุนสำหรับเครื่องมือสำหรับนักพัฒนา แต่ดูเหมือนว่า Google มุ่งมั่นที่จะจัดหาสภาพแวดล้อมที่ดีที่สุดสำหรับกระบวนการดีบักที่รวดเร็ว

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

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

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

วิธีเปิดคอนโซล Chrome

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

แป้นพิมพ์ลัด: Ctrl + Shift + I สำหรับ Windows และ Cmd + Options + I สำหรับ Macintosh

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

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

10 เคล็ดลับสำหรับคอนโซล Chrome ที่นักพัฒนาซอฟต์แวร์ทุกคนควรรู้

1. จำลองอุปกรณ์มือถือ

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

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

แป้นพิมพ์ลัด: Ctrl + Shift + M (Cmd + Shift + M)

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

2. ตรวจสอบกิจกรรมเครือข่าย

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

คลิกแท็บเครือข่ายในหน้าต่าง DevTools การดำเนินการนี้จะเปิดแผงเครือข่ายพร้อมบันทึกที่ว่างเปล่า เนื่องจากเครื่องมือจะบันทึกเฉพาะกิจกรรมเครือข่ายในขณะที่เปิดอยู่ กด Ctrl + R (Cmd +R) หรือโหลดเว็บไซต์ซ้ำเพื่อดูกิจกรรมบันทึกเครือข่ายของเพจ

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

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

3. การควบคุมปริมาณเครือข่าย

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

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

4. เพิ่มข้อมูลโค้ดสคริปต์

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

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

ใช้ Ctrl + Shift + P หรือ Cmd + Shift + P (Mac) เพื่อเปิดเมนูคำสั่ง พิมพ์ snippets แล้วคลิก create new snippets

ใช้ Ctrl + Enter หรือ Cmd + Enter เพื่อเรียกใช้โค้ดหรือคลิกที่ไอคอน Run Snippet ด้านล่างหน้าต่างข้อความ

5. จับภาพหน้าจอของเว็บไซต์

Chrome DevTools ช่วยให้คุณสามารถจับภาพหน้าจอของส่วนต่างๆ ของเว็บไซต์ได้ เปิดเมนูคำสั่งโดยใช้ Ctrl + Shift + P หรือ Cmd + Shift + P (Mac) แล้วพิมพ์ ภาพหน้าจอ เลือกประเภทของภาพหน้าจอที่คุณต้องการ DevTool จะจับภาพหน้าจอโดยอัตโนมัติและดาวน์โหลดรูปภาพเป็นไฟล์ .png ลงในไดเร็กทอรีการดาวน์โหลดเริ่มต้นของคุณ

6. เปิดโหมดแก้ไขข้อความเนื้อหา

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

document.body.contentEditable = 'จริง';

หรือ

document.designMode='on';

กดปุ่ม Enter เพื่อเปิดคุณสมบัติ

7. ตัวเลือกสี

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

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

8. แก้ไขคุณสมบัติ CSS

คอนโซล Chrome ให้การเข้าถึงที่ง่ายดายในการปรับคุณสมบัติ CSS ขององค์ประกอบใดๆ บนเว็บไซต์ คลิกที่ปุ่มเลือก (Ctrl + Shift + C หรือ Cmd + Options + C) เลื่อนเคอร์เซอร์ไปที่องค์ประกอบที่คุณต้องการแก้ไขเพื่อดูภาพรวมของคุณสมบัติขององค์ประกอบ คลิกที่องค์ประกอบ

สิ่งนี้ควรเน้นที่รูท HTML ขององค์ประกอบภายใต้บานหน้าต่างองค์ประกอบและคุณสมบัติ CSS ที่ด้านขวามือของแผง DevTools ไปที่บานหน้าต่างลักษณะและเลื่อนไปที่คุณสมบัติที่คุณต้องการแก้ไขสำหรับการเปลี่ยนแปลงแบบเรียลไทม์ คุณสามารถดูคุณสมบัติทั้งหมดของสไตล์โดย Ctrl + คลิก (Cmd + คลิก) บนคุณสมบัติ

9. จุดแตกหักของ JavaScript

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

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

หรือ คุณสามารถใช้ตัวฟังเหตุการณ์ในบานหน้าต่างดีบักเกอร์เพื่อกำหนดจุดแตกหักโดยอ้างอิงถึงเหตุการณ์เฉพาะที่คุณกำหนดเป้าหมายในสคริปต์ เช่น การ คลิกเมาส์ หรือ การเล่นสื่อ รีเฟรชหน้าโดยใช้ Ctrl + R (Cmd + R) และใช้เครื่องมือบานหน้าต่างดีบักเกอร์เพื่อย้ายขั้นตอน

10. จัดเก็บองค์ประกอบ HTML เป็นตัวแปร JS ส่วนกลาง

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

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

บทสรุป

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

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