วิธีแก้จุดบกพร่องหน้าเว็บใน chrome สำหรับ Android บนคอมพิวเตอร์

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

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

แก้ไขจุดบกพร่องของเว็บเพจ

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

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

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

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

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

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

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

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

ข้อสรุป

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