มีวิธีการแก้ปัญหาจริงในการแก้ปัญหาแอพ Cordova [ปิด]

ฉันใช้เวลาสองวันสุดท้ายพยายามหาวิธีแก้ไขข้อบกพร่องของแอป HTML5 ที่ฉันสร้างขึ้นโดยใช้ Cordova 3.2 และปรับใช้กับอุปกรณ์ Android 2.3 บทความ / โพสต์ทั้งหมดที่ฉันเคยเห็นให้แฮ็กมากกว่าการแก้ปัญหาที่แท้จริง :( และส่วนใหญ่ไม่มีพวกเขาทำงานให้กับเคสของฉันดีบั๊กสไตล์ css และโค้ด Angularjs ภายในแอปของฉัน ..

จนถึงตอนนี้ฉันทดสอบ;

debug.phonegap.com

ฉันฉีดสคริปต์ไปยังindex.htmlไฟล์จากนั้นเยี่ยมชม URL ที่สร้างขึ้นใน debug.phonegap.com แต่ไม่มีอะไรเกิดขึ้น หน้าว่างเท่านั้น

Weinre

บทความส่วนใหญ่ที่ฉันพบชี้ไปที่ล้าสมัยที่เก็บ Github ที่นับไฟล์ Jar .. แต่ไม่พบ :(

ตรวจสอบขอบ

มันใช้งานได้และแสดงหน้าเว็บที่ฉันเรียกดูบนพีซีภายในมือถือ .. แต่ปัญหาคือมันใช้เบราว์เซอร์แบบรวม (หรืออีมูเลเตอร์) อื่น ๆ ที่ไม่ใช่เบราว์เซอร์แอพ phonegap; ดังนั้นผลลัพธ์ไม่ถูกต้อง

Chrome emulator

เช่นเดียวกับการตรวจสอบขอบ; มันไม่อนุญาตให้ดู v530 web-kit จริงที่มาพร้อมกับ Android 2.3

ทางออกในฝัน

โซลูชันที่สมบูรณ์แบบจะเป็นส่วนเสริมไปยัง Google Chrome (เดสก์ท็อป) ที่ช่วยให้คุณเปลี่ยนเบราว์เซอร์เดสก์ท็อปเป็นอันเดียวที่พบในแพลตฟอร์ม Android 2.3; ไม่มีการจำลองไม่มีแฮ็คเพียงเบราว์เซอร์เองที่มี web-kit v 530

น่าเสียดายที่โซลูชันดังกล่าวไม่มีอยู่ :( หรือฉันผิด

ข้อเสนอแนะใด ๆ

สำหรับ Android:

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

ใช้ลิงค์นี้: chrome://inspect/#devicesในเบราว์เซอร์ Chrome (คุณจะต้องวางลงในแถบนำทาง)

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

อ่านบทความนี้สำหรับข้อมูลเพิ่มเติมเกี่ยวกับขั้นตอนที่ต้องดำเนินการ

สิ่งนี้จะทำงานได้เฉพาะกับอุปกรณ์ที่ใช้ Android 4.4 ขึ้นไป

สำหรับ iOS:

ใช้ Safari สำหรับ iOS ให้ทำตามขั้นตอนเหล่านี้:

1. ในอุปกรณ์ iOS ของคุณไปที่การตั้งค่า> Safari> ขั้นสูง> Web Inspector เพื่อเปิดใช้งาน Web Inspector

2. เปิด Safari บนอุปกรณ์ iOS ของคุณ

3. เชื่อมต่อกับคอมพิวเตอร์ของคุณผ่าน USB

4. เปิด Safari บนคอมพิวเตอร์ของคุณ

5. ในเมนูของ Safari ไปที่พัฒนาและค้นหาชื่ออุปกรณ์ของคุณ

6. เลือกแท็บที่คุณต้องการแก้ปัญหา

ข้อสังเกต

คำตอบนี้เก่า (มกราคม 2014) มีการแก้ปัญหาการแก้จุดบกพร่องใหม่ ๆ มากมายตั้งแต่นั้นมา

ในที่สุดฉันก็ทำงานได้! ใช้ weinre และ Cordova (ไม่มี Phonegap build) และเพื่อประหยัดความยุ่งยากสำหรับผู้พัฒนาในอนาคตซึ่งอาจเผชิญปัญหาเดียวกันฉันได้ทำกวดวิชา YouTube ;)

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

Cordova builds ล่าสุดเปิดใช้งานการดีบักชนิดนี้โดยอัตโนมัติตราบใดที่มันเป็น debug build (ถูกปิดใน - ปล่อย builds)

ที่ดีที่สุดสำหรับฉันคือการแนบ debugger Chrome

ในการทำเช่นนั้นให้เรียกใช้แอปของคุณในอีมูเลเตอร์หรืออุปกรณ์ (ใช้ $ Cordova emulate)

จากนั้นเปิด Google Chrome และไปที่ chrome://inspect/

คุณจะเห็นรายการที่มีแอพที่ใช้งานอยู่ แอปของคุณควรอยู่ที่นั่น คลิกที่ "ตรวจสอบ"

หน้าต่างใหม่จะเปิดขึ้นพร้อมกับเครื่องมือสำหรับนักพัฒนา คุณสามารถคลิกที่ "คอนโซล" เพื่อตรวจสอบข้อผิดพลาด

หากแอปของคุณกำลังเรียกใช้ Cordova 3.3+ และอุปกรณ์ของคุณใช้ Android 4.4 ขึ้นไปคุณสามารถใช้การดีบัก Chrome Remote Webviewเพื่อแก้ไขข้อบกพร่องของแอป Cordova ได้

เพื่อให้สามารถทำได้คุณต้องเปิดใช้งานการแก้ไขข้อบกพร่อง USB บนโทรศัพท์ก่อน

จากนั้นเปิดแท็บ "ตรวจสอบอุปกรณ์" ใน Chrome ให้ไปที่การตั้งค่า > เครื่องมือเพิ่มเติม > ตรวจสอบอุปกรณ์

หากคุณเปิดแอปบนอุปกรณ์ของคุณขณะที่เชื่อมต่อกับคอมพิวเตอร์ของคุณ Webview ควรปรากฏในรายการอุปกรณ์ คลิกที่ลิงค์ "ตรวจสอบ" ของ Webview ของคุณและเครื่องมือดีบั๊กสำหรับ Webview ของคุณควรปรากฏขึ้น

นี่คือบทความอธิบายวิธีการทำอย่างเต็มที่: http://geeklearning.io/apache-cordova-and-remote-debugging-on-android/

คุณลอง'GapDebug' แล้วหรือยัง แจกฟรี.

ดูเหมือนว่าจะรวมเวอร์ชันของ Safari Webkit Inspector และ Chrome Dev Tools เพื่อนำเสนอประสบการณ์การดีบักแบบรวมใน OS X และ Windows

ตัวเลือกอื่นคือ Visual Studio ซึ่งมีการสนับสนุนการดีบักแอป Cordova ล่วงหน้าก่อนกำหนด :

ประสบการณ์การแก้จุดบกพร่องแบบครบวงจร การพัฒนาข้ามแพลตฟอร์มมักจะต้องใช้เครื่องมือที่แตกต่างกันสำหรับการดีบักอุปกรณ์แต่ละตัวจำลองหรือจำลอง เครื่องมือที่แตกต่างกันหมายถึงเวิร์กโฟลว์ที่แตกต่างกันและสูญเสียประสิทธิภาพในการทำงานทุกครั้งที่คุณสลับอุปกรณ์ ด้วย Visual Studio คุณสามารถใช้เครื่องมือการดีบักระดับโลกเดียวกันสำหรับเป้าหมายการปรับใช้ทั้งหมดรวมถึง Windows, Android emulator, อุปกรณ์ Android ที่เชื่อมต่อ, อุปกรณ์ iOS และเครื่องจำลองและ Apache Ripple emulator

ขณะนี้ Microsoft ได้เปิดตัวVisual Studio Community edition ฟรีคุณสามารถทดลองใช้งานได้ฟรี คุณจะต้องดาวน์โหลดทั้ง Visual Studio และเครื่องมือ Studio Visual สำหรับ Apache คอร์โดวา

เท่าที่ผมรู้ว่าเครื่องมือการผลิตเฉพาะสำหรับการแก้จุดบกพร่องจริงในคอร์โดวาปพลิเคชันสำหรับแพลตฟอร์ม Android 2.2-4.3 เป็นjshybugger Weinreเป็นผู้ตรวจสอบไม่ใช่นักดีบัก JsHybugger ใช้รหัสของคุณเพื่อให้คุณสามารถดีบักภายใน android WebView

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

คุณสามารถใช้ Intel XDK IDE เพื่อพัฒนาและดีบักบนอีมูเลเตอร์หรือบนอุปกรณ์จริง

ฉันยังพบเครื่องมือ Visual Studio 2015 RC สำหรับคอร์โดวาที่ดีมากด้วยมันเป็นระลอกจำลอง

หากคุณใช้ phonegap build จะมีตัวเลือกให้เปิดใช้งานการดีบัก

สำหรับบิวด์ท้องถิ่นคุณสามารถติดตั้ง weinre ด้วย npm: https://npmjs.org/package/weinre

และลิงก์ไปยังเอกสาร weinre: http://people.apache.org/~pmuellr/weinre/docs/latest/

และมีบางสิ่งที่เรียกว่าการดีบักแบบรีโมทของ Chrome แต่ฉันไม่รู้อะไรมากเกี่ยวกับมันคุณสามารถดูบทความของ Raymond Camden ได้ที่: http://www.raymondcamden.com/index.cfm/2014/1/2/Apache- คอร์โดวา-33 และระยะไกลแก้จุดบกพร่องสำหรับ Android

เอกสารสำหรับการแก้จุดบกพร่องระยะไกลของ Chrome: https://developers.google.com/chrome-developer-tools/docs/remote-debugging (ถ้าฉันเข้าใจอย่างถูกต้องคุณต้องใช้อุปกรณ์ Android ที่มี Chrome เป็นเบราว์เซอร์เริ่มต้น) อาจใกล้เคียงกับความฝันของคุณมากที่สุด สารละลาย?

ติดตั้งบน Android 4.4+ w / SDK:

adb logcat chromium:D SystemWebViewClient:D \*:S

หากคุณใช้ Cordova 3.3 หรือสูงกว่าและอุปกรณ์ของคุณใช้ Android 4.4 หรือสูงกว่าคุณสามารถใช้ 'การแก้ไขข้อบกพร่องระยะไกลบน Android ด้วย Chrome' คำแนะนำแบบเต็มอยู่ที่นี่:

https://developer.chrome.com/devtools/docs/remote-debugging

สรุป:

• เสียบอุปกรณ์เข้ากับคอมพิวเตอร์เดสก์ท็อปของคุณโดยใช้สาย USB
• เปิดใช้งานการแก้ไขข้อบกพร่อง USB บนอุปกรณ์ของคุณ (ในอุปกรณ์ของฉันอยู่ภายใต้การตั้งค่า> เพิ่มเติม> ตัวเลือกสำหรับนักพัฒนา> การดีบัก USB)

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

• เรียกใช้แอปพลิเคชัน Cordova ของคุณบนอุปกรณ์หรือโปรแกรมจำลอง
• ใน Chrome บนคอมพิวเตอร์เดสก์ท็อปของคุณให้ป้อน chrome: // ตรวจสอบ / # อุปกรณ์ในแถบที่อยู่
• อุปกรณ์ / ตัวจำลองของคุณจะแสดงพร้อมกับอุปกรณ์ที่รู้จักอื่น ๆ ที่เชื่อมต่อกับคอมพิวเตอร์ของคุณและภายใต้อุปกรณ์ของคุณจะมีรายละเอียดของ Cordova 'WebView' (โดยทั่วไปคือแอป Cordova ของคุณ) ซึ่งทำงานอยู่บนอุปกรณ์ / ตัวจำลอง วิธีการทำงานของ Cordova ก็คือโดยทั่วไปจะสร้างหน้าต่าง 'เบราว์เซอร์' บนอุปกรณ์ / ตัวจำลองของคุณซึ่งภายในจะมี 'WebView' ซึ่งเป็นแอป HTML / JavaScript ที่ใช้งานอยู่ของคุณ)
• คลิกลิงก์ 'ตรวจสอบ' ใต้ส่วน 'WebView' ที่คุณเห็นอุปกรณ์ / ตัวจำลองของคุณอยู่ในรายการ สิ่งนี้จะนำเสนอเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome ซึ่งตอนนี้อนุญาตให้คุณดีบักแอปพลิเคชันของคุณ
• เลือกแท็บ 'แหล่งที่มา' ของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome เพื่อดู JavaScript ว่าแอป Cordova ของคุณบนอุปกรณ์ / ตัวจำลองกำลังทำงานอยู่ คุณสามารถเพิ่มเบรกพอยต์ใน JavaScript ที่ให้คุณดีบักรหัสของคุณ
• นอกจากนี้คุณสามารถใช้แท็บ 'คอนโซล' เพื่อดูข้อผิดพลาดใด ๆ (ซึ่งจะแสดงเป็นสีแดง) หรือที่ด้านล่างของคอนโซลคุณจะเห็นพรอมต์ '>' ที่นี่คุณสามารถพิมพ์ตัวแปรหรือวัตถุใด ๆ (เช่นวัตถุ DOM) ที่คุณต้องการตรวจสอบค่าปัจจุบันของและค่าจะปรากฏขึ้น

นี่คือวิธีการแก้ปัญหาโดยใช้ Phonegap Build เพิ่มสิ่งต่อไปนี้ใน config.xml ของคุณเพื่อให้สามารถตรวจสอบได้ด้วยการดีบัก Chrome Remote Webview

ก่อนอื่นตรวจสอบให้แน่ใจว่าแท็กวิดเจ็ตของคุณมี xmlns: android = "http://schemas.android.com/apk/res/android"

<widget 
    xmlns="http://www.w3.org/ns/widgets" 
    xmlns:gap="http://phonegap.com/ns/1.0" 
    xmlns:android="http://schemas.android.com/apk/res/android"
    id="me.app.id" 
    version="1.0.0">

จากนั้นเพิ่มดังต่อไปนี้

<gap:config-file platform="android" parent="/manifest">
     <application android:debuggable="true" />
</gap:config-file>

มันใช้งานได้สำหรับฉันใน Nexus 5, Phonegap 3.7.0

<preference name="phonegap-version" value="3.7.0" />

สร้างแอปใน Phonegap Build ติดตั้ง APK เชื่อมต่อโทรศัพท์กับ USB เปิดใช้งานการแก้ไขข้อบกพร่อง USB บนโทรศัพท์ของคุณจากนั้นไปที่ chrome: // ตรวจสอบ

ที่มา: https://www.genuitec.com/products/gapdebug/learning-center/configuration/

ใช้การตรวจสอบอุปกรณ์ Android

Android Device Monitor มาพร้อมกับแพ็คเกจที่มี android sdk ซึ่งคุณจะต้องติดตั้งก่อนหน้านี้ ในการตรวจสอบอุปกรณ์คุณสามารถดูบันทึกอุปกรณ์ข้อยกเว้นส่งข้อความทุกอย่างได้ สิ่งนี้มีประโยชน์ในการดีบักแอปพลิเคชันขัดข้องหรือปัญหาอื่น ๆ ในการเรียกใช้ให้ไปที่ tools / folder ใน android sdk“ / var / android-sdk-linux / tools” ของคุณ จากนั้นเรียกใช้สิ่งต่อไปนี้

chmod +x monitor
./monitor

หากคุณใช้ Windows ให้เปิดไฟล์ monitor.exe โดยตรง มีแท็บด้านล่าง“ LogCat” ที่คุณจะเห็นข้อความที่เกี่ยวข้องกับอุปกรณ์ทั้งหมด คุณจะเห็นข้อความทั้งหมดที่นี่รวมถึงข้อยกเว้นของอุปกรณ์ android ที่ไม่สามารถมองเห็นอุปกรณ์ตรวจสอบ Chrome ได้ อย่าลืมสร้างตัวกรองโดยใช้แท็บ“ +” ในแท็บ logcat เพื่อให้คุณเห็นข้อความสำหรับแอปพลิเคชันของคุณเท่านั้น

ที่มา: http://excellencenodejsblog.com/phonegap-debugging-your-android-application/

คุณสามารถดีบักด้วยโครเมี่ยมแอป html5 ของคุณ

ฉันสร้าง. bat เพื่อเปิด chrome ในโหมดแก้ไขข้อบกพร่อง

cd C:\Program Files (x86)\Google\Chrome\Application
chrome.exe "file:///C:\Users\***.html" --allow-file-access-from-files --disable-web-security

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

1. เปิดใช้งานโหมดผู้พัฒนาบนอุปกรณ์ Android ของคุณ (ไปที่การตั้งค่า -> เกี่ยวกับโทรศัพท์ -> แตะ 7x ที่หมายเลขบิลด์)

2. เชื่อมต่อคอมพิวเตอร์ของคุณกับโทรศัพท์ผ่านสาย USB

3. Lunch Chrome บนคอมพิวเตอร์ของคุณและไปที่ chrome: // ตรวจสอบและคลิกปุ่ม "ตรวจสอบ" ถัดจากอุปกรณ์ระยะไกลที่คุณต้องการแก้ปัญหา (ภายใต้แท็บ "อุปกรณ์") หรือคลิกขวาภายใน Chrome บนคอมพิวเตอร์ของคุณ -> ตรวจสอบ -> คำนวณและควบคุม DevTools (3 จุดแนวตั้ง - มุมบนขวาของเครื่องมือสำหรับนักพัฒนา) -> เครื่องมือเพิ่มเติม -> อุปกรณ์ระยะไกล -> ภายใต้อุปกรณ์ทางด้านซ้ายคลิกที่ อุปกรณ์ที่คุณเชื่อมต่อผ่าน USB -> คลิกที่ปุ่มตรวจสอบสำหรับแอปพลิเคชันที่คุณต้องการ

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

ฉันรัก weinre! วิธีใช้:

ก่อนอื่นให้ใส่index.html( app.settings.debugUrlตั้งค่าไว้ก่อนหน้านี้):

  <!-- Weinre debugging -->
  <script type="text/javascript">
    if (app.settings.debugUrl) {
      document.addEventListener("DOMContentLoaded", function(event) { 
        var s = document.createElement("script")
        s.setAttribute("src", app.settings.debugUrl+"/target/target-script-min.js#anonymous")
        document.getElementsByTagName("body")[0].appendChild(s)
      }); 
    }   
  </script>

แล้ว:

• ติดตั้ง: sudo npm install -g weinre
• วิ่ง: weinre --boundHost -all-
• เปิดบนเบราว์เซอร์: http: // localhost: 8080 / client / # ไม่ระบุชื่อ
• เป้าหมายการดูจะปรากฏขึ้นเมื่อคุณเปิดแอป

อิงจากhttp://www.broken-links.com/2013/06/28/remote-debugging-with-weinre/

อุปกรณ์ที่ใช้ android <= 4.0.4 จำเป็นต้องเพิ่มปลั๊กอิน https://www.npmjs.com/package/cordova-plugin-crosswalk-webview-pgb-adapt