มีวิธีใดบ้างในการดีบัก Javascript ภายใน UIWebView


136

ฉันพยายามหาสาเหตุว่าทำไมบางอย่างกับ Javascript จึงไม่ทำงานภายใน UIWebView สำหรับความรู้ของฉันไม่มีทางที่จะตั้งเบรกพอยต์ภายในของ XCode สำหรับไฟล์ js ไม่มีปัญหาฉันจะกลับไปปี 2004 และใช้ตัวแจ้งเตือน - โอ้เดี๋ยวก่อนพวกเขาดูเหมือนจะไม่ทำงานภายใน UIWebView เหมือนกัน!

สิ่งเดียวที่ฉันคิดได้ก็คือการส่งออกไฟล์ HTML และ JS ไปยังเดสก์ท็อปของฉันจากนั้นทำการดีบักภายใน Safari และนั่นก็ใช้ได้! แต่แน่นอนข้อผิดพลาดที่ฉันต่อสู้ด้วยใน UIWebView ไม่ได้เกิดขึ้นใน Safari

มีวิธีอื่นในการแก้ไขข้อบกพร่องภายใน UIWebView หรือลูกเล่นอื่น ๆ ที่ฉันสามารถใช้เพื่อใช้วิธีการแจ้งเตือนแบบเก่าได้หรือไม่

คำตอบ:


277

หากคุณใช้ iOS> = 6 และคุณมีสิงโตภูเขา (10.8) หรือ Safari> = 6 คุณสามารถ:

  1. เปิดแอปพลิเคชันในเครื่องจำลอง (หรืออุปกรณ์ของคุณใน XCode> = 4.5.x)
  2. เปิด Safari (ไปที่Preferences -> Advancedและให้แน่ใจว่า "แสดงเมนูพัฒนาในเมนู" เปิดอยู่
  3. จากเมนูบาร์ (ซาฟารี) Develop -> iPhone Simulator -> [your webview page]เลือก

แค่นั้นแหละ !


6
ใช้งานได้เฉพาะเมื่อเรียกใช้แอพในเครื่องจำลอง หากคุณต้องใช้อุปกรณ์ iOS สำหรับการดีบักดูวิธีนี้mobiarch.wordpress.com/2013/04/06/…
RajV

7
@RajV คุณสามารถดีบัก UIWebViews บนอุปกรณ์ทางกายภาพ แต่เฉพาะที่คุณใส่โดยตรงด้วย XCode บนอุปกรณ์ของคุณไม่ใช่ตัวที่อยู่ใน Appstore
alecail

1
เห็นได้ชัดว่าสวย แต่อาจเป็นประโยชน์ ฉันได้ทดสอบสิ่งนี้บน iOS7 Simulator ที่ใช้ OSX 10.9 Mavericks และ Safari 7 - ทำงานได้อย่างสวยงาม ขอบคุณสำหรับสิ่งนี้.
Moe

1
@refaelos ขอบคุณ !! มันใช้งานได้กับอุปกรณ์ทางกายภาพของฉันถ้าฉันใช้โปรไฟล์การพัฒนาชั่วคราว
umang2203

11
ไม่แน่ใจเกี่ยวกับเครื่องมือจำลอง แต่เพื่อให้การทำงานกับอุปกรณ์มีตัวเลือกที่คุณต้องเปิดใช้งานในการตั้งค่า Settings> Safari> Advanced> Web Inspector<- เปิดใช้งานนี้
ฮอดซัน

31

เคียวรีนี้ติดอันดับ google ดังนั้นควรเชื่อมโยงไปยังตัวตรวจสอบระยะไกลที่ซ่อนอยู่ใน iOS5ด้วยวิธีที่ดีที่สุดในการดีบัก UIWebViews ของคุณ - เพียงรวบรวมเงื่อนไขก่อนที่จะส่งไปยัง Apple


3
ยังใช้งานไม่ได้ใช้งานแบบนี้: [NSClassFromString(@"WebView") performSelector:@selector(_enableRemoteInspector)];อย่าลืมลบการโทรออกเมื่อคุณสร้างเพื่อใช้งาน!
rpitting

1
มันเป็นเทคนิคที่ยอดเยี่ยม อย่างไรก็ตามโปรดทราบว่าตัวดีบักทำงานได้เฉพาะในซาฟารีเท่านั้น ฉันลองจากเบราว์เซอร์อื่น (ตัวอย่างเช่น chrome) และไม่แสดงอะไรเลย
Sagi Mann

3
ฉันเคยใช้สิ่งนี้มาก่อน แต่ดูเหมือนจะไม่ทำงานตั้งแต่ Mountain Lion ปรากฏตัวขึ้น (สามารถแก้ไขได้ที่นี่): iwebinspector.com/help.html#ml
Omer

9

alert () ใช้ได้กับฉันอย่างแน่นอน

อย่างไรก็ตามคุณสามารถทำสิ่งอื่น ๆ อีกมากมายเช่นสร้างการแจ้งเตือน DHTML ของคุณเองที่ปรากฏขึ้นในเลเยอร์ สิ่งนี้อาจดีเพราะคุณสามารถทำการแจ้งเตือนหลายครั้งไปยัง div เดียวโดยไม่ต้องหยุดแอพของคุณ คุณควรจะสามารถเขียนการติดตามสแต็กได้ (การติดตามสแต็กอยู่ในวัตถุข้อยกเว้นและคุณสามารถโยนข้อยกเว้นของคุณเองได้เสมอ)

อีกทางหนึ่งหากทำงานบนเครื่องจำลอง "การแจ้งเตือน ()" ที่กำหนดเองของคุณสามารถโทรไปยังวัตถุประสงค์ C และแสดงสตริงในหน้าต่างคอนโซลของเครื่องจำลอง iPhone:

document.location.href = "http://debugger/" + 
   encodeURIComponent(outputString);   

และบนวัตถุประสงค์ C:

//--------------------------------------------------------------------
- (BOOL)webView:(UIWebView*)webView 
       shouldStartLoadWithRequest: (NSURLRequest*)req 
       navigationType:(UIWebViewNavigationType)navigationType {
    if ([[[req URL] host] isEqualToString:@"debugger"]){
        // do stuff with [[req URL] path] 
       }
}

ที่กล่าวว่าฉันมีแอพที่มีน้ำหนักมากในสิ่งที่ UiWebView / javascript และฉันมักจะทำจาวาสคริปต์ dev ส่วนใหญ่ใน Chrome (จำลองสิ่งที่จำเป็นจากสภาพแวดล้อม iPhone)


คุณหมายถึง "alert ()" สำหรับฉันอย่างแน่นอน การโทรเข้า Objective-C นั้นมีความคิดสร้างสรรค์แปลกใจที่ฉันไม่เคยคิดถึงเรื่องนี้มาก่อนตั้งแต่ฉันทำไปแล้ว! ขอบคุณ :)
bpapa

ใช่การแจ้งเตือน () ใช้งานได้ดี บางทีมันอาจจะไม่ได้เป็นเวอร์ชั่นเก่ากว่านี้ใช่ไหม แต่ฉันเพิ่งลองและได้รับป๊อปอัพที่ดูเหมือนเกือบจะเหมือนกับ UIAlertView ทาง objC
rob

8

ฉันจะได้รับวิธีที่น่ากลัวที่จะแก้ปัญหาUIWebViewหรือ SFSafariViewController

ฉันหวังว่ามันจะช่วย

ขั้นตอนที่ 1: 
 เปิด Safari VC ใน Mac ของคุณ (ฮ่าฮ่าฮ่าอย่าทำหน้าของคุณถ้าฉันพูดใน Macbook ของคุณเพียงทำตามขั้นตอนของฉัน)



ขั้นที่ 2: ไปที่การตั้งค่า Safari และคลิกที่ล่วงหน้า คุณจะได้รับการตั้งค่านี้บนหน้าจอ MacBook ของคุณ

ป้อนคำอธิบายรูปภาพที่นี่

ตอนนี้เปิดใช้งานเมนูแสดงเพื่อพัฒนาในแถบเมนู ตอนนี้งานทั้งหมดของคุณเสร็จสิ้นแล้ว คุณคิดว่าฉันล้อเล่น: P: P ไม่มีมนุษย์ ... 



ขั้นตอนที่ 3:เรียกใช้แอปพลิเคชันของคุณในอุปกรณ์หรือเครื่องมือจำลอง (อย่าคิดว่าเพิ่งเปิดใช้) และไปที่แอปพลิเคชันของคุณที่คุณกำลังเปิด Webview หรือ SFSafariViewController จนถึงตอนนี้คุณไม่เข้าใจฉันรู้ ใจเย็น ๆ และดูขั้นตอนต่อไปของฉัน

ขั้นตอนที่ 4:เปิด Safari ใน MacBook ของคุณและคลิกที่พัฒนาตัวเลือกจากแถบเมนู คุณได้รับสิ่งที่ MacBook, iPad / iPhone แสดงใช่มั้ย ?????

ป้อนคำอธิบายรูปภาพที่นี่



ขั้นตอนที่ 5:มันเสร็จสิ้น คลิกที่อุปกรณ์ของคุณและคลิกที่ URL ป๊อปอัพใหม่จะออกมาเช่นนี้ ป้อนคำอธิบายรูปภาพที่นี่




ขั้นที่ 6:ตอนนี้คุณกำลังมองหาอะไรอยู่

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

IMP: อย่าลืมเปิดใช้งานดูภาพด้านล่าง ป้อนคำอธิบายรูปภาพที่นี่ 









6

ฉันยังไม่ได้ลอง แต่ดูที่Weinreนี้

ดูมีแนวโน้มมาก


weinre นั้นเจ๋ง แต่ระวังว่ามันไม่ได้มาพร้อมดีบักเกอร์ JS แบบขั้น เป็นเพียง "ผู้ตรวจสอบเว็บ" (ฉันไม่ได้สังเกตสิ่งนี้จนกว่าฉันจะได้รับปัญหามากมายในการตั้งค่าบน iPhone ของฉัน)
Dan Fabulich

ดูเหมือนว่า Weinre จะหยุดทำงานตั้งแต่ Lion: ฉันไม่สามารถเชื่อมต่อได้อีกต่อไปอาจเป็นปัญหากับ sandbox
rpitting

ดูเหมือนว่า Adobe มีข้อตกลงกับ Weinre ในขณะนี้และเสนอแอพที่เรียกว่า Adobe Shadow ซึ่งใช้งานได้ ทำงานได้ดีทีเดียว
Adrian Harris Crowne

ฉันติดตั้ง weinre ถึง npm (node.js package manager) และมันใช้ได้กับฉันใน Mountain Lion npm install -g weinre
wprl

2
คำตอบสำหรับลิงค์เท่านั้นเหมาะสมกว่าสำหรับความคิดเห็น
Joris Meys

4

นี่เป็นคำถามเก่า แต่ฉันจะยังคงต้องการแบ่งปันสองเซ็นต์ของฉัน

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


3

คำถามเก่า แต่ฉันคิดว่าฉันพบทางออกที่ดีที่สุดในกรณีของคุณคุณต้องแก้ปัญหา uiwebview แต่ฉันไม่สามารถเข้าถึงแอพ IOS และเฉพาะเนื้อหา html และฉันต้องดูบันทึก JS บางอย่างฉันเพิ่มรหัสต่อไปนี้ เพื่อโหลด JS firebug แสงและแสดงโดยอัตโนมัติ:

เรียกมันจาก JS

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://getfirebug.com/firebug-lite-debug.js';
document.head.appendChild(script);

หรือโหลดจาก html

<script type="text/javascript" src="https://getfirebug.com/firebug-lite-debug.js"></script>

-1

คุณสามารถตั้งค่าระบบเช่นเดียวกับที่ใช้ในPhoneGapเพื่อส่งข้อความจาก JavaScript ไปยัง Objective-C และบันทึกจากที่นั่น สรุปพวกเขากำลังตั้งค่า document.location ด้วยรูปแบบที่กำหนดเองและการปิดกั้นรูปแบบนั้นในการเรียกกลับผู้รับมอบสิทธิ์

คุณสามารถใช้ประโยชน์จากข้อเท็จจริงที่ว่า UIWebView เป็นผู้รับมอบสิทธิ์ส่วนใหญ่สำหรับ WebView WebKit ไม่มีเอกสารทางเทคนิคสำหรับ iPhone แต่ส่วนใหญ่เหมือนกับที่ระบุในส่วนหัว WebKit บนเดสก์ท็อปซึ่งอาจรวมถึง WebScriptObject ฉันใช้สิ่งนี้เพื่อการดีบัก แต่ต้องแน่ใจว่าได้ตัดรหัสนี้ออกก่อนส่งไปยัง Apple

ในการรับ WebView จาก UIWebView ให้ใช้วิธีผู้ร่วมประชุมเช่น-(void) webView:(id)inWebView didFinishLoadForFrame:(id)inWebFrameในคลาสย่อยของ UIWebView โทรสุด ๆ ถ้าคุณใช้อันนั้น

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.