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

Git worktree - guide to flexible folder structure

Published on
As always, let's start with a story why I have written this one down. I have been using git for almost 5 years now and in one of my work places I had to work on the same project but different features in parallel.  Switching between branches back and forth was a costly operation given that I didn't discover commit amend until recently. Even though I'd have discovered commit amend, I'd still have did this. Still did what? I can sense that question deep from your throats. So, whenever I am in a situation to work on multiple features or a feature and a bug fix, I'd have two clones of my repo each with different branches, Whenever a feature is merged or the fixes are merged, I'll delete the clone in my machine and branch in my origin (Gitlab / Github etc.,) Recently when I started writing these git articles, my manager suggested me to learn about Git Worktree and it'll be useful. And when I got free and good understanding of git commit, rebase and stuff, I decid...
Post a Comment
Read more

npm-link | What NPM won't tell you!

Published on
Hello readers. So back with another easy yet unexplored feature of npm/yarn packages. We as frontend developers / SDK developers, have to deal with more than one repositories where we actually code contribute. Most SDK developers would know this already or they use the not-so-well documented 'npm link' command . /**  *  @disclaimer  * Please read this post fully before executing any command. My scenario might not be the same as yours.  * This article below uses a repo from my current workplace as an example which is open-source and does not violate the Cisco Confidentiality Policies */ To make this article easier to understand, some representations, Host - Package that needs another local package as part of its node modules. Let's assume the path to this package is  ~/Documents/Repos/demo-app Adhoc - Local package that is added into another package as a dependency. Let's assume the path to this package is  ~/Documents/Repos/semver-monorepo What is...
Post a Comment
Read more

Building AI Apps - The basics you need to know

Published on
So you want to build an AI assistant? Maybe for customer support, maybe to search through documents, or maybe just to automate some boring stuff at work. You keep hearing words like "prompting", "RAG", "fine-tuning" thrown around in meetings. But what do they actually mean and which one do you need? Let me walk you through building a customer support AI assistant and show you how each of these concepts fits in. /**  * @disclaimer  * This is an educational post based on my learnings.  * I'll share actual experiments in future posts.  * Your use case might be different, so take what applies to you. */ What even is an LLM? Before we jump into the techniques, let's start with the basics. What is an LLM? Think of a Large Language Model (LLM) as someone who has read most of the internet but has zero memory of your conversation once it ends. Models like GPT-4, Claude, or Llama have been trained on massive amounts of text data. They know a lot...
1 comment
Read more