วิธีดีบักหน้าเว็บใน Chrome สำหรับ Android บนคอมพิวเตอร์

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

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

การดีบักหน้าเว็บ

ขั้นตอนที่ 1: ดาวน์โหลดและติดตั้ง Android SDK บนคอมพิวเตอร์ของคุณและเรียกใช้ โปรแกรมติดตั้งจะขอให้คุณดาวน์โหลด Java หากคุณยังไม่ได้ติดตั้ง

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

เครื่องมือแพลตฟอร์ม Android SDK และคลิก ติดตั้งแพ็คเกจ ปุ่ม.

ขั้นตอนที่ 2: หลังจากติดตั้งเครื่องมือแพลตฟอร์ม Android แล้ว ให้เปิด กล่องรัน (Windows+R) และวิ่ง %userprofile%\AppData\Local\Android\android-sdk\platform-tools เพื่อเปิดไดเร็กทอรีเครื่องมือแพลตฟอร์ม Android

ขั้นตอนที่ 3: ตอนนี้กดแป้น Ctrl+Shift ค้างไว้แล้วคลิกขวาในโฟลเดอร์เพื่อเปิดพรอมต์คำสั่งที่นั่น คุณยังสามารถเปิดพรอมต์คำสั่งโดยใช้กล่องเรียกใช้และไปที่โฟลเดอร์ด้วยตนเอง

ขั้นตอนที่ 4: เมื่อทำเสร็จแล้ว เปิด Chrome บนโทรศัพท์ Android ของคุณ เปิด การตั้งค่า—>เครื่องมือสำหรับนักพัฒนา และตรวจสอบตัวเลือกเปิดใช้งานการดีบักเว็บ USB

ขั้นตอนที่ 5: ตอนนี้บนพรอมต์คำสั่งให้เรียกใช้คำสั่ง adb forward tcp: 9222 localabstract: chrome_devtools_remote และเปิดเบราว์เซอร์ Chrome บน Windows เมื่อดำเนินการสำเร็จ

ขั้นตอนที่ 6: เปิดหน้าที่คุณต้องการแก้ไขข้อบกพร่องบนเบราว์เซอร์ Chrome ของ Android แล้วเปิด URL localhost: 9222 บนเบราว์เซอร์ Chrome ของคอมพิวเตอร์ของคุณ

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

บทสรุป

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