ฉันจะดีบัก javascript บน Android ได้อย่างไร

ฉันกำลังทำงานในโครงการที่เกี่ยวข้องกับ Raphaeljs ปรากฎว่าใช้งานไม่ได้บน Android มันทำบน iPhone

ฉันจะแก้จุดบกพร่องในเบราว์เซอร์ Android อย่างไร มันคือ WebKit ดังนั้นถ้าฉันรู้เวอร์ชันจะทำการดีบั๊กมันในเวอร์ชันเต็มของ WebKit ที่ให้ผลลัพธ์เหมือนกันหรือไม่

อัปเดต: การดีบักระยะไกล

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

อัปเดต: คอนโซล JavaScript

คุณยังสามารถไปที่ about: debug ในแถบ URL เพื่อเปิดใช้งานเมนู debug และคอนโซลข้อผิดพลาด JavaScript กับอุปกรณ์ Android ล่าสุด คุณควรเห็น SHOW JAVASCRIPT CONSOLE ที่ด้านบนของเบราว์เซอร์

ขณะนี้อยู่ใน Android 4.0.3 (Ice Cream Sandwich) logcat จะส่งออกไปยังช่องเบราว์เซอร์ adb logcat browser:* *:Sเพื่อให้คุณสามารถใช้กรอง

คำตอบเดิม

คุณสามารถใช้consoleวัตถุ JavaScript ในตัวเพื่อพิมพ์ข้อความบันทึกที่คุณสามารถตรวจสอบadb logcatได้

console.error('1');
console.info('2');
console.log('3');
console.warn('4')

สร้างเอาต์พุตนี้:

D/WebCore (  165): Console: 1 line: 0 source: http://...
D/WebCore (  165): Console: 2 line: 0 source: http://...
D/WebCore (  165): Console: 3 line: 0 source: http://...
D/WebCore (  165): Console: 4 line: 0 source: http://...

การกำหนดเวอร์ชันของ WebKit

หากคุณพิมพ์javascript:alert(navigator.userAgent)ในแถบตำแหน่งคุณจะเห็นรุ่น WebKit แสดงรายการเช่น

ใน Chrome: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/532.2 (KHTML, like Gecko) Chrome/4.0.221.6 Safari/532.2

บน Android Emulator Mozilla/5.0 (Linux; U; Android 1.6; en-us; sdk Build/DRC76) AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1

NB

รุ่นของ WebKit ที่ไม่ได้เป็นส่วนหนึ่งของรุ่น Safari มี + หลังหมายเลขรุ่นและโดยทั่วไปแล้วหมายเลขรุ่นนั้นจะสูงกว่า WebKit รุ่นที่วางจำหน่ายล่าสุด ตัวอย่างเช่น 528+ เป็นบิลด์ที่ไม่เป็นทางการของ WebKit ที่ใหม่กว่าเวอร์ชัน 525.x ซึ่งจัดส่งเป็นส่วนหนึ่งของ Safari 3.1.2

ลอง:

1. เปิดหน้าเว็บที่คุณต้องการตรวจแก้จุดบกพร่อง

2. ขณะที่อยู่ในหน้านั้นในแถบที่อยู่ของเบราว์เซอร์ Android ที่เป็นหุ้นให้พิมพ์:

   about:debug 

   (หมายเหตุไม่มีอะไรเกิดขึ้น แต่มีการเปิดใช้งานตัวเลือกใหม่บางตัว)

ทำงานบนอุปกรณ์ที่ผมได้พยายาม อ่านเพิ่มเติมเกี่ยวกับAndroid เบราว์เซอร์เกี่ยวกับ: การแก้ปัญหาสิ่งที่ตั้งค่าเหล่านั้นทำอย่างไร

แก้ไข: สิ่งที่ยังช่วยในการดึงข้อมูลเพิ่มเติมเช่นหมายเลขบรรทัดคือการเพิ่มโค้ดนี้ในสคริปต์ของคุณ:

window.onerror = function (message, url, lineNo){
    console.log('Error: ' + message + '\n' + 'Line Number: ' + lineNo);
    return true;
}

http://jsconsole.com ( http://jsconsole.com/remote-debugging.html ) ให้เป็นวิธีที่ดีที่คุณสามารถใช้เพื่อเข้าถึงเนื้อหาของคุณหน้าเว็บ

ฉันใช้Weinreส่วนหนึ่งของอาปาเช่คอร์โดวา

ด้วย Weinre ฉันได้รับการแก้ปัญหาคอนโซลของ Google Chrome ในเบราว์เซอร์สก์ท็อปของฉันและสามารถเชื่อมต่อไปยังคอนโซล Android การแก้ปัญหานั้นและแก้ปัญหา HTML และ CSS ฉันสามารถรันคำสั่ง Javascript ในคอนโซลและมีผลกับเว็บเพจในเบราว์เซอร์ Android ข้อความบันทึกจาก Android ปรากฏในคอนโซลการดีบักเดสก์ท็อป

อย่างไรก็ตามฉันคิดว่ามันเป็นไปไม่ได้ที่จะดูหรือก้าวผ่านโค้ดจาวาสคริปต์ที่แท้จริง ดังนั้นฉันจึงรวม Weinre กับข้อความบันทึก

(ฉันไม่ค่อยรู้อะไรเกี่ยวกับJConsoleมากนักแต่ดูเหมือนว่าฉันไม่สามารถตรวจสอบ HTML และ CSS ได้โดย JConsole มีเพียงคำสั่ง Javascript และการบันทึก (?) เท่านั้น

ลองดูที่jsHybugger จะช่วยให้คุณสามารถดีบักรหัส js ของคุณจากระยะไกลสำหรับ:

• แอพไฮบริดแอนดรอยด์ (มุมมองเว็บ, โทรศัพท์, แผนที่
• หน้าเว็บที่ทำงานในเบราว์เซอร์เริ่มต้นของ Android (ไม่ใช่ Chrome รองรับส่วนขยาย ADB โดยไม่มีเครื่องมือนี้)

วิธีการทำงานนี้ (รายละเอียดเพิ่มเติมและทางเลือกในเว็บไซต์ของโครงการนี่คือสิ่งที่ฉันพบว่าเป็นวิธีที่ดีที่สุด)

1. ติดตั้ง jsHybugger APK บนอุปกรณ์ของคุณ
2. เปิดใช้งานการแก้ไขข้อบกพร่อง USB บนอุปกรณ์ของคุณ
3. เสียบอุปกรณ์ Android ลงในเครื่องคอมพิวเตอร์เดสก์ทอปของคุณผ่านทาง USB
4. เรียกใช้แอปบนอุปกรณ์ Android ('jsHybugger')
5. ป้อน URL เป้าหมายและหน้าในแอป กดเริ่มบริการและเปิดเบราว์เซอร์ในที่สุด
   • คุณจะเห็นรายการเบราว์เซอร์ที่ติดตั้งให้เลือก
   • เบราว์เซอร์เปิดตัว
6. กลับไปที่คอมพิวเตอร์เดสก์ท็อปของคุณเปิด Chrome เป็นโครเมี่ยม: // ตรวจสอบ /
7. หน้าต่างผู้ตรวจสอบจะปรากฏขึ้นพร้อมกับเครื่องมือการดีบัก chrome ที่เชื่อมโยงกับหน้าบนอุปกรณ์ Android
8. แก้ไขข้อบกพร่อง!

อีกครั้งกับ Chrome บน Android ใช้ส่วนขยายของ ADB โดยไม่ต้อง jsHybugger ฉันคิดว่าสิ่งนี้อธิบายไว้แล้วในคำตอบที่ได้รับการยอมรับสำหรับคำถามนี้

FYI เหตุผลที่ RaphaelJS ไม่ทำงานบน android คือ android webkit (ไม่เหมือน iPhone webkit) ไม่รองรับ SVG ในขณะนี้ Google เพิ่งมาถึงข้อสรุปว่า SVG สนับสนุน android เป็นความคิดที่ดีดังนั้นจึงยังไม่สามารถใช้ได้ในบางเวลา

การดีบักแบบรีโมทของ Chrome เต็มรูปแบบของเบราว์เซอร์เนทีฟ Android บน Galaxy S6 บน Android 5.1.1:

1. เปิดใช้งานการแก้ไขข้อบกพร่อง USB บนโทรศัพท์ (การตั้งค่า, เกี่ยวกับ, หมายเลขการสร้างอย่างรวดเร็ว, การตั้งค่าผู้พัฒนา, การดีบัก USB)
2. เปิด "อินเทอร์เน็ต"
3. ไปที่ 'about: debug' (คุณจะเห็นข้อผิดพลาด)
4. เมนูเพิ่มเติม> การตั้งค่า> แก้ไขข้อบกพร่อง> แก้ไขข้อบกพร่องระยะไกล
5. ต่อโทรศัพท์กับคอมพิวเตอร์ด้วยสาย USB
6. ในโทรศัพท์ในเว็บเบราว์เซอร์อินเทอร์เน็ตให้เปิดไซต์ที่คุณต้องการตรวจแก้จุดบกพร่อง
7. เปิด Chrome บนคอมพิวเตอร์
8. นำทางไปยัง 'chrome: // ตรวจสอบ'
9. คลิกตรวจสอบบนแท็บเบราว์เซอร์ที่คุณต้องการตรวจสอบ

อุปกรณ์ Galaxy S5 แสดงใน Chrome แต่แท็บจะแสดงหลังจากคุณรีสตาร์ทเท่านั้น หลังจากรีสตาร์ทและพยายามแนบแล้วเบราว์เซอร์มือถือขัดข้อง

ราฟาเอลไม่รองรับเบราว์เซอร์ Android รุ่นก่อน 3.0 นั่นคือปัญหาของคุณ พวกเขาไม่รองรับกราฟิก SVG มันมีผ้าใบรองรับ หากคุณไม่ต้องการทำให้เคลื่อนไหวคุณสามารถแสดงกราฟิกด้วย canvg:

http://code.google.com/p/canvg/

นั่นเป็นวิธีที่เราได้แก้ไขปัญหานี้สำหรับการแสดงไอคอน SVG ในเบราว์เซอร์ Android เริ่มต้น

about:debug(หรือchrome:\\debugทั้งสองที่บอกว่าหน้าไม่สามารถพบได้ แต่เปิดใช้งานเมนูตรวจแก้จุดบกพร่องในการตั้งค่า) เมื่อพยายามบน Chrome หรือ Opera บน Android KitKat 4.4.2 บนแท็บของซัมซุง

หากคุณมีสิทธิ์ ROOT บนอุปกรณ์ของคุณคุณสามารถดูข้อความคอนโซลได้โดยตรงบนอุปกรณ์ ใช้แอปเช่น CatLog เพื่อดูผลลัพธ์ของบันทึก - https://play.google.com/store/apps/details?id=com.nolanlawson.logcat&hl=thสิ่งนี้จะช่วยให้คุณดูกิจกรรม logcat ทั้งหมด

ใน Android KitKat / 4.4.2 คอนโซลเบราว์เซอร์จะถูกส่งออกไปยังช่อง Chromium คุณสามารถกรองโดย "Chromium" เพื่อรับกิจกรรมเบราว์เซอร์ทั้งหมด (รวมถึงกิจกรรมภายในของเบราว์เซอร์) หรือเพียงกรองโดย "คอนโซล" เพื่อดูเฉพาะบันทึกคอนโซลของเบราว์เซอร์

chromium [INFO:CONSOLE(3)]  "The key "x-minimal-ui" is not recognized and ignored.", source http://mywebsite.com/ (3)

chrome://aboutใส่ลงไปในบรรทัดที่อยู่ คุณจะเห็นลิงค์ไปยังหน้า dev ที่เป็นไปได้ทั้งหมด

คุณสามารถลองYConsoleคอนโซลแบบฝัง js มันมีน้ำหนักเบาและใช้งานง่าย

• ตรวจสอบบันทึกและข้อผิดพลาด
• ตัวแก้ไขวัตถุ

วิธีใช้ :

<script type="text/javascript" src="js/YConsole-compiled.js"></script>
<script type="text/javascript" >YConsole.show();</script>

เมื่อรันอีมูเลเตอร์ Android ให้เปิดเบราว์เซอร์ Google Chrome ของคุณและในช่อง 'ที่อยู่' ให้ป้อน:

chrome://inspect/#devices

คุณจะเห็นรายการเป้าหมายระยะไกลของคุณ ค้นหาเป้าหมายของคุณและคลิกที่ลิงค์ 'ตรวจสอบ'

Chrome มีคุณสมบัติที่ยอดเยี่ยมที่เพียงแค่ใช้เวลาที่เกิดขึ้นจริงเนื้อหา Android โครเมี่ยม (รวม. การตรวจสอบ ฯลฯ ) บนหน้าจอเครื่องคอมพิวเตอร์ ...

• เปิดใช้งานการแก้ไขข้อบกพร่อง USB บนอุปกรณ์บางทีคุณอาจต้องเชื่อมต่ออีกครั้งผ่านทางadb devicesเพื่อเปิดกล่องโต้ตอบ "อนุญาตการสื่อสารกับ ... " บนอุปกรณ์มือถือ
• เชื่อมต่ออุปกรณ์ Android กับพีซี
• เปิด Chrome ทั้งสองและ
• จากนั้นไปที่chrome://inspect/#devicesบนพีซี
• ที่นี่แท็บจาก Chrome ของโทรศัพท์มือถือมีอยู่ในรายการและสามารถตรวจสอบได้

นอกจากนี้ยังมีคู่มือ detailled บนเน็ต: https://www.till.net/technologie/html-javascript/remote-web-debugging-unter-android-und-chrome

(พบว่าหลังจากadb logcatไม่พบสิ่งใดจากเบราว์เซอร์)

โซลูชันของฉันคือ (สำหรับเบราว์เซอร์หุ้น):

• เบราว์เซอร์หุ้น
• "consolo.log" ลงในซอร์สโค้ด JS
• แก้ไขข้อบกพร่องเปิดใช้งาน USB
• Android SDK
• จาก Android SDK: monitor.bat
• ตัวกรองการตรวจสอบเป็นภาพที่แนบมา

Android studio มอบทุกสิ่งที่คุณต้องการเพื่อดู console.log และอื่น ๆ ใน logcat เพียงกรอง "/ Web Console" และคุณจะเห็นบันทึก js ของคุณ ...

หากคุณพบปัญหาใด ๆ คุณสามารถเพิ่มปลั๊กอินนี้: https://github.com/apache/cordova-plugin-console

หากคุณกำลังมองหาตัวเลือกระยะไกล:

ในรุ่นก่อนหน้าและที่ไม่ใช่รูท Jellybean จะสามารถใช้ตัวแสดง logcat หาก android.permission.READL_LOGS ได้รับผ่าน adb หนึ่งครั้ง

บน Firefox มีaddon คอนโซลที่อ่านและการแสดงบันทึกทั้งหมดของแอปและยังมีLite วางเพลิง

คุณสามารถลอง "javascript-compiler-deva" จากไลบรารี npm โดยรันคำสั่ง "npm install javascript-compiler-deva" แล้วรัน compiler.is โดยใช้ "node compiler.js"

มันสร้างเซิร์ฟเวอร์ที่พอร์ต 8888 จากนั้นคุณสามารถกด " http: // localhost: 8888 " และป้อนรหัส JavaScript ของคุณและสามารถดูผลลัพธ์ของรหัส JavaScript ใด ๆ รวมถึง "console.log" ในเบราว์เซอร์โทรศัพท์

มันยังโฮสต์ใน " https://javascript-compiler-deva.herokuapp.com/ "

ตัวเลือกในการดีบัก / about: config ... ดูเหมือนจะไม่ทำงานในเบราว์เซอร์ chrome / ff / .. 2020+ อีกต่อไป

เบราว์เซอร์อื่นที่มีคอนโซล js ที่ไม่ใช่ระยะไกลคือ DevBrowser

หรือ WebInspector (ตัวเลือกไฟล์ไม่ทำงาน)