spy debugger

เกี่ยวกับสายลับดีบักเกอร์

เครื่องมือแก้ไขข้อบกพร่องหน้าและจับแพ็คเก็ตแบบครบวงจร ดีบักหน้าเบราว์เซอร์บนมือถือและ WebView บนมือถือจากระยะไกล (เช่น WeChat, HybridApp ฯลฯ) รองรับ HTTP/HTTPS ไม่จำเป็นต้องใช้อุปกรณ์เชื่อมต่อ USB

ภาษา: อังกฤษ

ลักษณะเฉพาะ

1. การดีบักหน้า + การจับภาพแพ็กเก็ต
2. ใช้งานง่าย ไม่ต้องใช้อุปกรณ์เชื่อมต่อ USB
3. รองรับ HTTPS
4. spy-debugger รวม weinre , node-mitmproxy และ AnyProxy
5. ละเว้นคำขอ https ที่เริ่มต้นโดยแอปเนทีฟโดยอัตโนมัติ และสกัดกั้นเฉพาะคำขอ https ที่เริ่มต้นโดย webview มันจะไม่ส่งผลกระทบใดๆ กับแอพเนทีฟที่ใช้เทคโนโลยีการปักหมุด SSL [ป.ล.: เนื่องจากการปรับเปลี่ยนโปรโตคอลพร็อกซี iOS 15 ทำให้ iOS 15 ไม่สามารถตรวจพบได้อีกต่อไปว่าคำขอนั้นเริ่มต้นโดยเบราว์เซอร์หรือไม่]
6. สามารถใช้กับเครื่องมือพร็อกซีอื่น ๆ ได้ (ใช้ AnyProxy เป็นค่าเริ่มต้น) (ตั้งค่าพร็อกซีภายนอก)

กรณีการใช้งาน

โหมดการแก้ไขหน้า

คำสั่งเริ่มต้น: spy-debugger -w true

อินเทอร์เฟซการดีบักหน้า Weiner

อินเทอร์เฟซการจับแพ็กเก็ต anyproxy

ติดตั้ง

ภายใต้วินโดวส์

    npm install spy-debugger -g

ภายใต้แม็ค

    sudo npm install spy-debugger -g

เริ่มต้นในสามนาที

ขั้นตอนที่ 1: ให้โทรศัพท์มือถือและพีซีอยู่ในเครือข่ายเดียวกัน (เช่น เชื่อมต่อกับ Wi-Fi ในเวลาเดียวกัน)

ขั้นตอนที่ 2: ป้อน spy-debugger บนบรรทัดคำสั่ง และปฏิบัติตามบรรทัดคำสั่งเพื่อเปิดที่อยู่ที่เกี่ยวข้องด้วยเบราว์เซอร์

ขั้นตอนที่ 3: ตั้งค่าพร็อกซี HTTP ของโทรศัพท์มือถือ ที่อยู่ IP ของพร็อกซีถูกตั้งค่าเป็นที่อยู่ IP ของพีซี และพอร์ตคือพอร์ตเริ่มต้นของ spy-debugger (พอร์ตเริ่มต้น: 9888)

• ขั้นตอนในการตั้งค่าพร็อกซีบน Android:设置- WLAN - 长按选中网络- 修改网络- 高级- 代理设置- 手动
• ขั้นตอนพร็อกซีการตั้งค่า iOS:设置- 无线局域网- 选中网络- HTTP代理手动

ขั้นตอนที่ 4: ติดตั้งใบรับรองบนโทรศัพท์ของคุณ หมายเหตุ: โทรศัพท์มือถือจะต้องตั้งค่าพรอกซีก่อน จากนั้นจึงเข้าถึง http://s.xxx (地址二维码) ผ่านเบราว์เซอร์มือถือ (ที่ไม่ใช่ WeChat) เพื่อติดตั้งใบรับรอง (การดีบักครั้งแรกของโทรศัพท์มือถือจำเป็นต้องมีการติดตั้ง ของใบรับรอง โทรศัพท์มือถือที่ติดตั้งใบรับรองแล้วไม่จำเป็นต้องติดตั้งซ้ำ) ใบรับรองที่ติดตั้งใหม่บน iOS จำเป็นต้องเปิดความน่าเชื่อถือของใบรับรองด้วยตนเอง

ขั้นตอนที่ 5: ใช้เบราว์เซอร์มือถือของคุณเพื่อเข้าถึงเพจที่คุณต้องการแก้ไข

ตัวเลือกที่กำหนดเอง

ท่าเรือ

(พอร์ตเริ่มต้น: 9888)

 spy-debugger -p 8888

ตั้งค่าพร็อกซีภายนอก (ใช้ AnyProxy เป็นค่าเริ่มต้น)

 spy-debugger -e http://127.0.0.1:8888

AnyProxy ในตัวของ spy-debugger มีฟังก์ชันการจับแพ็คเก็ต แต่ยังสามารถใช้กับเครื่องมือพร็อกซีการจับแพ็คเก็ตอื่น ๆ ได้ด้วยการตั้งค่าพร็อกซีภายนอก เช่น Charles และ Fiddler

ตั้งค่าเนื้อหาของหน้าเป็นโหมดแก้ไขได้

ฟังก์ชันนี้ทำให้การแก้ไขเนื้อหาของหน้าใช้งานง่ายและสะดวกยิ่งขึ้น (ค่าเริ่มต้น: เท็จ)

 spy-debugger -w true

หลักการใช้งานภายใน: แทรกโค้ดลงในเพจที่ต้องแก้ไขจุดบกพร่อง: document.body.contentEditable=true ยังไม่รองรับเพจที่ใช้เฟรม iscroll

ว่าจะอนุญาตให้ weinre ตรวจสอบหน้าที่โหลดโดย iframe หรือไม่

(ค่าเริ่มต้น: เท็จ)

 spy-debugger -i true

ว่าจะสกัดกั้นเฉพาะคำขอ https ที่เริ่มต้นโดยเบราว์เซอร์หรือไม่ [PS: เนื่องจากการปรับโปรโตคอลพร็อกซี iOS 15 จึงไม่สามารถตรวจพบได้อีกต่อไปว่าคำขอนั้นเริ่มต้นโดยเบราว์เซอร์]

(ค่าเริ่มต้น: เท็จ)

 spy-debugger -b true

คำขอเชื่อมต่อที่ออกโดยเบราว์เซอร์บางตัวไม่สามารถส่ง userAgent ได้อย่างถูกต้อง และการตัดสินใจนี้บางครั้งก็ผิดพลาด เช่น UC Browser คราวนี้จะต้องตั้งค่าเป็นเท็จ ในกรณีส่วนใหญ่ ขอแนะนำให้เปิดใช้งานการกำหนดค่าเริ่มต้น: จริง เนื่องจากปัจจุบันมีคำขอจำนวนมากที่ออกโดยตัวแอป (ที่ไม่ใช่ WebView) ใช้เทคโนโลยีการปักหมุด SSL ใบรับรองแบบกำหนดเองจะไม่ผ่านการตรวจสอบใบรับรองของแอป

ว่าจะอนุญาตแคช HTTP หรือไม่

(ค่าเริ่มต้น: เท็จ)

 spy-debugger -c true

มากกว่า

• แก้ไขข้อผิดพลาดที่ weinre จะขัดข้องในเวอร์ชัน node.js V7

• ปรับปรุงและแก้ไขปัญหาที่ไม่ weinre พิมพ์บันทึก console.log ก่อนเหตุการณ์ document ready หน้า

• ปรับปรุงฟังก์ชันการพิมพ์ข้อยกเว้นที่ไม่ได้ตรวจ weinre (Uncaught Exceptions)

• หลักการของ spy-debugger คือการผสานรวม weinre ซึ่งทำให้ความจำเป็นของ weinre ในการเพิ่มโค้ด js ลงในแต่ละหน้าการดีบักนั้นง่ายขึ้น หลักการของ spy-debugger คือการสกัดกั้นคำขอเพจ html ทั้งหมด และแทรกโค้ด js ที่ weinre ต้องการ ทำให้การดีบักหน้าสะดวกยิ่งขึ้น