Skip to main content

Debugger Tools for iOS Mobile Browsers

Published on
I, recently got a scenario at work where the feature had to be tested out in iOS. 

It has to be noted that iOS Safari, as well as Chrome, uses the Webkit Engine on iOS. Rumours are that Google is building its own iOS javascript engine but it might not be available for public usage any sooner.

That said, I tested out the feature on an iOS Safari browser. Whether or not the feature worked, developers can never resist taking a look at the logs while testing, to ensure the flow. That's where my curiosity lay too. 

Prerequisites

  • MacBook device
  • iOS device
  • Cable that connects the above two devices

Steps to follow

Step 1 - On your iOS device:

  • Open the Settings app on iOS
  • Go to Safari


  • Inside Safari, navigate to Advanced


  • Here, enable Web Inspector



  • Now open your Safari browser on iOS and have your Web app loaded for debugging


Step 2 - Connect your iOS device with your MacOS device using the cable

Step 3 - On your MacOS device

  • Open the Safari browser on your MacOS device
  • If you do not see the Develop Menu at the top, you have to enable it


  • To enable Develop, Go to Safari > Settings


  • In the Advanced tab, enable "Show Develop menu in menu bar" and the Develop option should appear in the Menu bar now

  • Ensure your iOS device is unlocked and connected to the MacOS device
  • Open the newly appearing Develop Menu
  • Find your mobile device in the list and open its sub-menu
  • In the menu, notice the URLs of the tabs you have opened on your iOS device


  • Click on the URL of the tab that you want to inspect and there appears the debugger tool

Bonus Tip - In the menu for your iOS device, there's an option to Connect via Network. After the first time connection through a cable, when you enable this, thereafter you don't need the cable if both the MacOS & iOS devices are connected to the same network

Hope this helps and let us also stay tuned to know if Chrome ever brings its own Javascript Engine for iOS.

Labels:

Comments

Post a Comment

Popular posts from this blog

WebRTC - What the heck?

Published on
Over the past few weeks, I happened to work on stuff that enabled me to understand what WebRTC is and how useful it is.  The full form? Web R eal- T ime C ommunication The history It's first release was by 2011. If you want to know more, well, please read the wikipedia . WebRTC  has been a boon to web developers who want to build streaming applications or video calling applications. As you move downward, you'll just may be understand how WebRTC works but nothing technicals.  The story Let's begin with a short story. Long long ago, so long ago, nobody knew how long ago, there lived two shop keeper farmers John & Finch. It was that old point in time when barter system was a thing and money wasn't invented.  These shopkeepers lived in different cities across a river and the cities were connected by a rock solid bridge. Like how the golden gate connects the San Francisco city and the Marin County. Finch is a very private person and takes hard time to trust people. John
2 comments
Read more

Git - How to drop a commit in history?

Published on
Back after a while with another git magic. We already have seen how to get rid of the top most commit in this article ->  Git magic - Make commits disappear First of all, it's one of the not so recommended way of doing it and more than that, it can only get rid of sequential commits from latest. I recently happened to get into a scenario where I had to drop a commit in the history by keeping the latest ones. As part of that exploration, presenting you this article. /**  *  @disclaimer  * Please read this post fully before executing any command. My scenario might not be same as yours. */ To my greatest surprise, I didn't know a git rebase could do this. Please continue to read to know how. The steps are simple, Count until the commit line you need to drop using git log Do an interactive rebase and you're done.  Let me explain step by step. 1. Look at the commit log & count commits This is the first step. First let's list the commits using the following command,  
Post a Comment
Read more

Git - Removing a file from a commit

Published on
Once again, another git magic that might be of help to some of you. This research came up when I accidentally added a couple of unwanted files and wanted to remove them from a commit. We all know that to update an existing commit, we shall follow this git magic to amend commits . However, how do we drop changes to a particular file in a commit? While that is easy, it is also tricky. This blog post covers scenarios and respective commands that help you understand what should be done. /**  *  @disclaimer  * Please read this post fully before executing any command. My scenario might not be the same as yours. */ There are two scenarios to be handled here, Remove a newly added file Remove changes to an existing file Let's look at them separately, Remove a newly added file This is the scenario where an unwanted file added to the commit. This file might be some config.json that got generated while doing a research on a new testing tool or a bundling tool. Such scenarios are easier. 1. Re
Post a Comment
Read more