How To Debug iOS Safari With Xcode Simulator
HTML-код
- Опубликовано: 1 авг 2024
- A step-by-step guide on setting up Xcode to debug websites in iOS Safari using Web Inspector on your Mac.
And as all browsers on iOS use Safari’s rendering engine, you don’t need a different strategy to debug Chrome, Firefox, or any other browser on iOS.
00:00 Introduction
00:23 Install Xcode
00:50 Open iOS Simulator
01:47 Connect Web Inspector to iOS Simulator
03:38 Install different versions of iOS
04:14 Open different iOS versions in Simulator
#css #frontend #ios #safari #iossafari #webdev #xcode #xcodesimulator #webdevelopment #iossimulator 
Наука
⚠ Update: The Xcode Simulator works precisely the same in the latest Xcode 14.3, and MacOS Ventura. There shouldn't be any differences in the steps shown in the video. ⚠
Amazing, nice and simple tutorial. much needed, Thank you!!
Thank you so much; I'm thrilled you found it helpful! 🙂
Cool tip, thanks for sharing this. I struggled a lot around debugging things on iPhones and different versions of iOS. This will really help ...
Thank you, I'm really glad you found it helpful! 🙂
Thank you, this was helpful!
Thank you, Szeréna! 🙏
Thank you! The video helped me a lot!
I'm really glad to hear this guide helped you, Rafael! 🙂
Thank you, just what I needed
I'm thrilled to hear it helped you, Anish! 🙂
Thanks, very informative and helpful!
Thank you, Pranas! I'm thrilled to hear you found it informative! 🙏
Great tutorial! Tnx :)
Thank you so much, Goran! 🙏
Thank you, this video just saved me from hours of debugging.
I'm really happy to hear this, Felix! Thanks for watching and commenting! 🙏
Very helpful, thank you!
I'm glad you found it helpful, Vincent! Thanks for watching and commenting! 🙂
This is beyond amazing! Thank you!
You're very welcome, Dukenson! I'm glad you found it helpful! 🙂
so helpful thank you
I'm really glad it was helpful, Craig! 🙂
Good tutorial thanks.
Thank you so much, I'm glad you found it helpful! 🙂
Thank you! This was helpful! I had no idea the link in the submenu of my selected simulator was the one that opens the dev toola for it.
I'm so glad you found it helpful and that you've learned something new, Angela! 🙂
Thanks so much for watching and commenting! 🙏
Thank you, you saved me!
You're very welcome! I'm so glad to hear that you found it helpful! 🙂
Thank you!
You're welcome, Jeremy! I'm glad you found it helpful! 🙂
Thanks this is really great video for bigners as well
Thank you so much, Adam! I'm happy to hear this! 🙂
THANKS! 👏👏
You’re very welcome, Keviin! Thanks for watching and commenting! 🙂
Thanks!
You’re very welcome, David! 🙂
Thanks so much for sharing. Just a suggestion, you would probably get more views/hits on this if you add ipad and iphone to the title. This is a big game changer for my department. There are so few ways to debug a web application or website on ipad. There are only 2 other ways i know. You can log the development console in chrome on the ipad device. The other way is to connect the ipad to a macbook and use web inspector and safari. If anyone know any other ways, please reply. I'm interested to know.
Thank you so much for the suggestion, Leroy! 🙏
You summed it up nicely. I'm not aware of any other ways to debug websites on iPad.
nice
Thanks so much, Pandy! 🙏
Is this feature still available for latest X-Code v 14 and MacOS Ventura? Does anyone knows?
Yes, Viktor. It's available in the latest Xcode (14.3) in MacOS Ventura. 🙂
So the guide is still perfectly relevant. 🙂
unfortunately it's not showing the simulator website in my safari , i have tried everything, restarted everything, do u have any idea how to fix this
Thanks for your question, Sofia. This happens sometimes to me as well, and it usually helps if i restart Safari and/or Simulator. Have you tried that?
Don’t forget to like and subscribe if you found the video helpful. 😉
I'm trying to debug localhost:5000 but I keep getting this error: Error from backend: Error: Bad state: Not connected to an application.
Does anyone knows how can I fix this?? Or is it that I can't debug localhost?
This seems like a server-side issue. There is no reason you wouldn’t be able to access localhost from the simulator.
Is localhost:5000 working if you access it from the browser?
@@CSSWeekly Hello, thank you for your quick response. Yes, I can access localhost:5000 in the simulator, is when I open the web inspector the console shows the error I mentioned and doesn't allow me to debug
@@CSSWeekly Here's the stack trace:
Error from backend:
Error: Bad state: Not connected to an application.
Stack Trace:
#0 DevHandler._handleConnection. (package:dwds/src/handlers/dev_handler.dart:273:13)
#1 _rootRunUnary (dart:async/zone.dart:1407:47)
#2 _CustomZone.runUnary (dart:async/zone.dart:1308:19)
#3 _CustomZone.runUnaryGuarded (dart:async/zone.dart:1217:7)
#4 _BufferingStreamSubscription._sendData (dart:async/stream_impl.dart:339:11)
#5 _BufferingStreamSubscription._add (dart:async/stream_impl.dart:271:7)
#6 _ForwardingStreamSubscription._add (dart:async/stream_pipe.dart:123:11)
#7 _MapStream._handleData (dart:async/stream_pipe.dart:218:10)
#8 _ForwardingStreamSubscription._handleData (dart:async/stream_pipe.dart:153:13)
#9 _rootRunUnary (dart:async/zone.dart:1415:13)
#10 _CustomZone.runUnary (dart:async/zone.dart:1308:19)
#11 _CustomZone.runUnaryGuarded (dart:async/zone.dart:1217:7)
#12 _BufferingStreamSubscription._sendData (dart:async/stream_impl.dart:339:11)
#13 _BufferingStreamSubscription._add (dart:async/stream_impl.dart:271:7)
#14 _SyncStreamControllerDispatch._sendData (dart:async/stream_controller.dart:776:19)
#15 _StreamController._add (dart:async/stream_controller.dart:650:7)
#16 _StreamController.add (dart:async/stream_controller.dart:598:5)
#17 new WebSocketImpl.fromSocket. (package:web_socket_channel/src/copy/web_socket_impl.dart:730:21)
#18 _rootRunUnary (dart:async/zone.dart:1407:47)
#19 _CustomZone.runUnary (dart:async/zone.dart:1308:19)
#20 _CustomZone.runUnaryGuarded (dart:async/zone.dart:1217:7)
#21 _BufferingStreamSubscription._sendData (dart:async/stream_impl.dart:339:11)
#22 _BufferingStreamSubscription._add (dart:async/stream_impl.dart:271:7)
#23 _SinkTransformerStreamSubscription._add (dart:async/stream_transformers.dart:63:11)
#24 _EventSinkWrapper.add (dart:async/stream_transformers.dart:13:11)
#25 _WebSocketProtocolTransformer._messageFrameEnd (package:web_socket_channel/src/copy/web_socket_impl.dart:319:23)
#26 _WebSocketProtocolTransformer.add (package:web_socket_channel/src/copy/web_socket_impl.dart:218:46)
#27 _SinkTransformerStreamSubscription._handleData (dart:async/stream_transformers.dart:111:24)
#28 _rootRunUnary (dart:async/zone.dart:1407:47)
#29 _CustomZone.runUnary (dart:async/zone.dart:1308:19)
#30 _CustomZone.runUnaryGuarded (dart:async/zone.dart:1217:7)
#31 _BufferingStreamSubscription._sendData (dart:async/stream_impl.dart:339:11)
#32 _BufferingStreamSubscription._add (dart:async/stream_impl.dart:271:7)
#33 _SyncStreamControllerDispatch._sendData (dart:async/stream_controller.dart:776:19)
#34 _StreamController._add (dart:async/stream_controller.dart:650:7)
#35 _StreamController.add (dart:async/stream_controller.dart:598:5)
#36 _Socket._onData (dart:io-patch/socket_patch.dart:2381:41)
#37 _rootRunUnary (dart:async/zone.dart:1415:13)
#38 _CustomZone.runUnary (dart:async/zone.dart:1308:19)
#39 _CustomZone.runUnaryGuarded (dart:async/zone.dart:1217:7)
#40 _BufferingStreamSubscription._sendData (dart:async/stream_impl.dart:339:11)
#41 _BufferingStreamSubscription._add (dart:async/stream_impl.dart:271:7)
#42 _SyncStreamControllerDispatch._sendData (dart:async/stream_controller.dart:776:19)
#43 _StreamController._add (dart:async/stream_controller.dart:650:7)
#44 _StreamController.add (dart:async/stream_controller.dart:598:5)
#45 new _RawSocket. (dart:io-patch/socket_patch.dart:1899:33)
#46 _NativeSocket.issueReadEvent.issue (dart:io-patch/socket_patch.dart:1356:14)
#47 _microtaskLoop (dart:async/schedule_microtask.dart:40:21)
#48 _startMicrotaskLoop (dart:async/schedule_microtask.dart:49:5)
#49 _runPendingImmediateCallback (dart:isolate-patch/isolate_patch.dart:123:13)
#50 _RawReceivePort._handleMessage (dart:isolate-patch/isolate_patch.dart:190:5)
@shirosanchez265 This seems very strange. 😕
I can't think of why it would work in Web Inspector if it works in the simulator.
Have you tried restarting Safari and Simulator?
@@CSSWeekly Yes, I've tried that. I also tried using Safari Tech Preview and the result is still the same
Thanks!
Thank you for watching and commenting, Caleb! 🙏