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 magic - Squash commits

Published on
Back with another git magic. When it comes to merging a pull request on Github, there are two options Rebase and Merge Squash and Merge What is Rebase and Merge? When one chooses Rebase and Merge, all the commits in the PR are added to the target branch. For example, if the PR has 5 commits, all of those commits will be visible in the PR history of the target branch. What is Squash and Merge? When a PR is merged by choosing Squash and Merge, all the commits in the PR are combined into one PR and then added to the target branch. Once again, if the PR has 5 commits or any number of commits, they are combined and added to the target branch. Therefore, this is what Squash means. Combining 'n' different commits into one single commit is called squashing. In this blog post, we will go through the commands that can squash commits.  Advantages of Squashing commits No more redundant commits In a pull request, one may have 'n' different commits for one change. They might have bee
Post a Comment
Read more

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

Confluence: 5 quick things that you need

Published on
As part of my work experiments, this week I would like to write down the things that one needs to know in confluence that can up-skill their documentation works. I will cover the following 5 things, How to Anchor link a title? How to Anchor link to a section? How to create a dashing dashboard? Panel - Confluence Macro Layouts - Confluence Tools Content by Label - Confluence Macro 1. How to Anchor link a title? This is the most required thing. Most useful when one has to refer to a section internally on the same confluence page. Let's consider you have a page with three different sections and titles as shown below, In this, if you want to add an internal anchor from a text in paragraph 3 to a title in paragraph 1, you can add it as follows, Choose the word that needs Anchor Click on the link icon from the Toolbar above In the link box, enter #Page Title 1 Click Insert That is it. Your anchor from the selected text to Page Title 1 is ready. This can be tested out in the preview itsel
Post a Comment
Read more