การแก้จุดบกพร่องระยะไกล iOS

ด้วย Chrome รุ่นล่าสุดสำหรับ iOS ฉันสงสัยว่าคุณจะเปิดใช้งานการดีบักแบบรีโมทสำหรับ Chrome iOS ได้อย่างไร

ปรับปรุง: ด้วยการเปิดตัว iOS 6, การแก้จุดบกพร่องระยะไกลขณะนี้คุณสามารถทำได้ด้วยSafari

ปรับปรุง:

นี่ไม่ใช่คำตอบที่ดีที่สุดอีกต่อไปโปรดทำตามคำแนะนำของgregers

คำตอบใหม่:

ใช้Weinre

คำตอบเก่า:

ตอนนี้คุณสามารถใช้ Safari สำหรับการดีบักแบบรีโมทได้แล้ว แต่ต้องใช้ iOS 6

นี่คือการแปลอย่างรวดเร็วของhttp://html5-mobile.de/blog/ios6-remote-debugging-web-inspector

1. เชื่อมต่อ iDevice ของคุณผ่าน USB ด้วย Mac ของคุณ
2. เปิด Safari บน Mac ของคุณและเปิดใช้งานเครื่องมือ dev
3. บน iDevice ของคุณ: ไปที่การตั้งค่า> ซาฟารี> ขั้นสูงและเปิดใช้งานตัวตรวจสอบเว็บ
4. ไปที่เว็บไซต์ใด ๆ ด้วย iDevice ของคุณ
5. บน Mac ของคุณ: เปิดเมนูนักพัฒนาซอฟต์แวร์และเลือกไซต์จาก iDevice ของคุณ (ที่ด้านบนเมนู Safari)

ดังที่Simons ตอบไว้เราจำเป็นต้องปิดการเรียกดูแบบส่วนตัวเพื่อให้การดีบักแบบรีโมททำงานได้

การตั้งค่า> Safari> การดูเว็บส่วนตัว> ปิด

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

เพื่อติดตั้ง:

• ติดตั้งnodejs
• npm install -g weinre
• weinre --boundHost -all-
• เปิด http: // {wifi-ip-address}: 8080 / และคัดลอกรหัสสคริปต์เป้าหมาย
• วางแท็กสคริปต์ลงในหน้าของคุณ (หรือใช้ bookmarklet)
• คลิกที่ลิงก์ไปยังอินเทอร์เฟซผู้ใช้ของดีบักไคลเอ็นต์ (http: // {wifi-ip-address}: 8080 / client / # ไม่ระบุชื่อ)
• เมื่อคุณได้รับสายสีเขียวใต้ไคลเอนต์เบราว์เซอร์จะเชื่อมต่อ

bookmarklet เป็นเรื่องยุ่งยากในการติดตั้งอีกเล็กน้อย เป็นเรื่องที่ง่ายที่สุดหากคุณเปิดการซิงค์บุ๊กมาร์กไว้สำหรับทั้งเดสก์ท็อปและมือถือ Chrome คัดลอก URLlet bookmarklet จากเซิร์ฟเวอร์ weinre ท้องถิ่น (เหมือนข้างบน) น่าเสียดายที่มันใช้งานไม่ได้เพราะมันเข้ารหัส URL ไม่ถูกต้อง ดังนั้นเปิดคอนโซล JavaScript และพิมพ์ใน:

copy(encodeURI('')); // paste bookmarklet inside quotes

ตอนนี้คุณควรมี bookmarklet ที่เข้ารหัส url ในคลิปบอร์ดของคุณ วางลงในบุ๊คมาร์คใหม่ภายใต้บุ๊กมือถือ เรียกมันว่า weinre หรืออะไรที่ง่าย ๆ ควรซิงค์กับมือถือของคุณอย่างรวดเร็วดังนั้นโหลดหน้าเว็บที่คุณต้องการตรวจสอบ จากนั้นพิมพ์ชื่อบุ๊กมาร์กใน url-bar และคุณควรเห็น bookmarklet เป็นการแนะนำอัตโนมัติ คลิกเพื่อเรียกใช้รหัส bookmarklet :)

คุณไม่สามารถดีบัก Chrome ระยะไกลโดยตรงบน iOS ในขณะนี้ มันใช้ uiWebView ที่อาจทำหน้าที่แตกต่างจาก Mobile Safari อย่างละเอียด

คุณมีตัวเลือกน้อย

ตัวเลือก 1: Remote-debug Mobile Safari โดยใช้ตัวตรวจสอบของ Safari หากปัญหาของคุณเกิดขึ้นอีกครั้งใน Mobile Safari นี่เป็นวิธีที่ดีที่สุดในการไป ในความเป็นจริงการผ่านตัวจำลอง iOS ง่ายยิ่งขึ้น

ตัวเลือกที่ 2: ใช้ Weinre สำหรับ slimmed ลงประสบการณ์การแก้จุดบกพร่อง Weinre มีคุณสมบัติไม่มากนัก แต่บางครั้งก็ดีพอ

ตัวเลือก 3: ดีบักแบบรีโมท uiWebView ที่เหมาะสมซึ่งทำหน้าที่เหมือนกัน

นี่คือวิธีที่ดีที่สุดในการทำเช่นนี้ คุณจะต้องติดตั้ง XCode

1. ไปที่github.com/paulirish/iOS-WebView-Appและ "ดาวน์โหลด Zip" หรือโคลน
2. เปิด XCode เปิดโครงการที่มีอยู่และเลือกโครงการที่คุณเพิ่งดาวน์โหลด
3. เปิด WebViewAppDelegate.m และเปลี่ยนurlStringเป็น URL ที่คุณต้องการทดสอบ
4. เรียกใช้แอพใน iOS Simulator
5. เปิด Safari เปิดเมนูพัฒนาเลือกiOS Simulatorและเลือกมุมมองเว็บของคุณ
6. Safari Inspector จะทำการตรวจสอบ uiWebView ของคุณ

จากความเข้าใจของฉัน Google Chrome ใช้ UIWebView ของ iOS แทนการใช้ Chrome อย่างเต็มรูปแบบเหมือนกับอุปกรณ์ Android

คอนโซลระยะไกลจำนวนมากทำงานได้ดี http://farjs.comเป็นโครงการของฉันและฉันสามารถแก้ไขปัญหาที่เฉพาะเจาะจงสำหรับ Crome iOS และไม่ประสบความสำเร็จในการใช้ซาฟารี (และอาจเป็นเบราว์เซอร์มือถืออื่น ๆ ทั้งหมด)

ปัญหาคือการฉีดรหัสการแก้จุดบกพร่องนั้นยุ่งยากเล็กน้อยเนื่องจาก Chrome ไม่อนุญาตให้คุณติดตั้ง bookmarklet

แต่คุณสามารถเปิดหนึ่งแท็บบนหน้าเว็บที่คุณจะทำการดีบักและอีกแท็บหนึ่งใน farjs.com จากนั้นคลิก "bookmarklet"

คัดลอกโค้ด JS ของ bookmarklet กลับไปที่แท็บแรกพร้อมกับหน้าเว็บที่ควรจะดีบั๊กและวางโค้ด bookmarklet ในแถบที่ตั้ง

ขั้นตอนสุดท้ายคือเลื่อนไปที่จุดเริ่มต้นของแถบตำแหน่งและเพิ่ม "javascript:" เนื่องจาก Chrome จะลบออก

ฉันแนะนำVorlonทำงานเหมือน weinre ฉันชอบ UI ของ Vorlon และรองรับSSLแอปพลิเคชันของฉันอยู่ใน HTTPS ฉันลอง weinre ด้วย ngrok, ghostlab และ vorlon เพียง vorlon ก็ใช้ได้ดี

ฉันไม่ได้ลอง แต่พร็อกซีดีบักiOS WebKit (ios_webkit_debug_proxy / iwdp) ควรจะช่วยให้คุณดีบัก UIWebView จากระยะไกล จาก README.md

ios_webkit_debug_proxy (aka iwdp) ช่วยให้นักพัฒนาสามารถตรวจสอบ MobileSafari และUIWebViewsบนอุปกรณ์ iOS จริงและจำลองผ่าน Chrome DevTools UI และ Chrome Remote Debugging Protocol คำขอ DevTools ได้รับการแปลเป็นการโทรบริการ Remote Web Inspector ของ Apple

Vorlon.JSสามารถใช้สำหรับการดีบักแบบรีโมทของ iOS หรือไคลเอนต์อื่น ๆ

1. เพียงแค่ติดตั้งทั่วโลกโดยใช้ npm i -g vorlon
2. เริ่มต้นเซิร์ฟเวอร์โดยใช้ vorlon
3. ขณะที่เซิร์ฟเวอร์กำลังทำงานอยู่ให้เปิดhttp: // localhost: 1337ในเบราว์เซอร์ของคุณเพื่อดูแผงควบคุม Vorlon.JS
4. ขั้นตอนสุดท้ายคือการเปิดใช้งาน Vorlon.JS โดยเพิ่มแท็กสคริปต์นี้ในแอปของคุณ:
   <script src="http://<yourExternalIP>:1337/vorlon.js"></script>
5. ลูกค้าที่เชื่อมต่อทั้งหมดเช่น iPhone, Android จะพร้อมใช้งานในรายชื่อลูกค้าใน Vorlon.JS

หมายเหตุว่าวิธีนี้ยังสามารถนำมาใช้เพื่อแก้ปัญหาปพลิเคชันไม่ได้ทำงานใน localhost ใช้ngrok ดูhttps://stackoverflow.com/a/45443203/2073920เพื่อดูรายละเอียด

คำปฏิเสธ

ฉันเป็นแค่ผู้ใช้และฉันไม่ได้มีส่วนเกี่ยวข้องกับ Vorlon.JS และ ngrok

คุณต้องปิดการใช้งาน 'การดูเว็บส่วนตัว'

การตั้งค่า> Safari> การดูเว็บส่วนตัว> ปิด

แม้ฉันกำลังมองหาคุณสมบัติเดียวกันและ ณ วันนี้มันยังไม่ได้ใช้งาน ฉันคิดได้สองทางเลือก

1. ฉันสังเกตเห็นว่าพฤติกรรมของ Chrome และ Safari ค่อนข้างเหมือนกัน Chrome ยังรองรับ Gyroscope และกิจกรรมอื่น ๆ ที่เกี่ยวข้องซึ่งสนับสนุนโดย Safari ขณะนี้ฉันกำลังดีบักเว็บแอปของฉันโดยเปิดใช้งานคอนโซลการดีบักบน Safari (ผ่านการตั้งค่า -> Safari)

2. ลองใช้ Adobe Shadow ซึ่งอนุญาตการดีบัก / ตรวจสอบและซิงค์จากระยะไกล

HTH

Adobe Edge Inspect ( https://creative.adobe.com/products/inspect ) เป็นอีกวิธีหนึ่งในการดีบักอุปกรณ์เคลื่อนที่ IOS และ Android ของคุณทั้งหมด (ไม่มี Windows Phone) มันใช้ weinre สำหรับการตรวจสอบ / เปลี่ยน DOM ระยะไกล มันไม่ใช่วิธีที่เร็วที่สุด แต่ใช้ได้กับ Windows

มีข้อผิดพลาดแบบเปิดใน Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=584905

น่าเสียดายที่พวกเขาขึ้นอยู่กับ Apple ในการเปิด API ใน WKView เพื่อให้สิ่งนี้เกิดขึ้นหลังจากนั้นอาจมีการดีบั๊กจาก Safari

ฉันใช้ remotedebug-ios-webkit-adapter ทำงานได้ดีสำหรับฉันด้วย IOS และดีบักเกอร์ที่เปิดใน Chrome บน Windows 10

จะดีใจถ้ามันช่วยลิงค์ได้บ้าง

หมายเหตุ: ฉันไม่มีส่วนเกี่ยวข้องกับผู้สร้าง Ghostlab Vanamco แต่อย่างใด

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

แนะนำเป็นอย่างยิ่ง

เปิด Safari Desktop iOS

พัฒนา -> โหมดตอบสนองต่อการออกแบบ

คลิก "อื่น ๆ " ภายใต้อุปกรณ์

วางสิ่งนี้: Mozilla / 5.0 (iPad; CPU OS 10_2_1 เช่น Mac OS X) AppleWebKit / 602.1.50 (KHTML เช่น Gecko) CriOS / 56.0.2924.79 มือถือ / 14D27 Safari / 602.1

ใช้เครื่องมือตรวจสอบ Safari

คำเตือน: ฉันทำงานที่ BrowserStack ^{[ยืนยันแล้ว] ว่าอนุญาตให้โพสต์สิ่งนี้ได้หรือไม่ ( ฉันสามารถแนะนำผลิตภัณฑ์ของ บริษัท ที่กำลังทำงานอยู่ได้หรือไม่ )}

แก้ไขข้อผิดพลาด Safari บน iOS (ไม่ใช่สำหรับ Chrome ณ ตอนนี้อ่านรายละเอียดเพิ่มเติมล่วงหน้า)

มันทำงานอย่างไร

• คุณต้องเริ่มเซสชันบนอุปกรณ์จริง ๆ (มีอีมูเลเตอร์ แต่คุณต้องเริ่มเซสชันบนอุปกรณ์จริง) บน BrowserStack พูด iPhone 6S - Safari / Chrome (ไม่มี devtools สำหรับ Chrome แต่อยู่ใน Roadmap ของเรา)
• พิมพ์ URL
• คุณสามารถเรียกใช้ DevTools เพื่อตรวจสอบเว็บเพจที่เปิดบนอุปกรณ์ระยะไกลของ BrowserStacks ฉันได้แชร์หน้าจอในแบบเดียวกันด้านล่าง

การใช้ DevTools กับโทรศัพท์จริง

เลื่อนเมาส์ไปที่องค์ประกอบแล้วแก้ไข HTML และ CSS เหมือนกับที่เบราว์เซอร์เดสก์ท็อป devtools ทำงาน

ดำเนินการจาวาสคริปต์ในโทรศัพท์จริงโดยใช้ DevTools

สลับไปที่Consoleแท็บเรียกใช้โค้ด JavaScript ตรวจสอบconsole.log()ผลลัพธ์และอื่น ๆ ...

แท็บเครือข่ายตรวจสอบส่วนหัวคำขอการตอบสนองและอื่น ๆ ...

สนับสนุน DevTools บน BrowserStack หรือไม่

• DevTools มีอยู่ใน:

  • อุปกรณ์จริง - iOS - Safari (DevTools สำหรับ iOS Chrome อยู่ใน Roadmap ของเรา)
  • อุปกรณ์จริง - Android - Chrome (Chrome เท่านั้นที่มีให้บริการบนอุปกรณ์ Android ในตอนนี้)

• เบราว์เซอร์ไคลเอ็นต์จำเป็นต้องเป็น Chrome หรือ Firefox นั่นหมายความว่าคุณต้องใช้เบราว์เซอร์ Chrome หรือ Firefox บน MacOSX หรือ Windows เพื่อใช้ BrowserStack Real Device DevTools

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

รายละเอียดเพิ่มเติมเกี่ยวกับเรื่องนี้โปรดดูที่DevToolsส่วนที่เกี่ยวกับโทรศัพท์มือถือหน้าคุณลักษณะ