How to call Javascript debugger from Xcode? Can you?

Estimated reading time: 2 mins

How to call JS debugger from Xcode?

Hi friends,

Daily Vibes Apple Store Screenshots

In a previous release of ⭐️ Daily Vibes 📲, version 1.3.0, I added a natural language date parser. What this basically means that if you enter

appointment with my accountant tomorrow at 3 pm

⭐️ Daily Vibes 📲 will understand what you mean. This is all possible because of the wonderful work done on SwiftyChrono. However, I shipped 🚢 it with some pending things that are needed to be taken care of with the library. Figured I would fix it later down the road since it seems to work as expected 😅

This week, I’ve decided to tackle the issues and help updating SwiftyChrono.

Github SwiftyChrono PR

Internally, SwiftyChrono uses javascript for testing. After the upgrades, I wanted to make sure that the tests work.

JavaScript [Core]

So, I began 👀 looking for issues ⛈

One of the issues was narrowed down to be in this area of the code:

Problem code image

If you notice, it is just javascript that is being executed. I know javascript so it should be no problem to debug, right?

Well, for starters, how do you debug javascript that is executed from Xcode? How does Xcode run javascript? This leads you down the rabbit hole to find that Apple has nicely introduced JavaScript Core internally (more info).

So…the tl;dr

It is very easy. Apple has built a nice interaction between Xcode and Safari.

The credit for the following steps to this answer goes to Rakesh Yembaram on stackoverflow.com

1. Open Safari and Enable Developer Menu

  • Open Safari
  • Enable the Develop menu by going to:
    • “Preferences”
    • “Advanced”
    • “Show Develop menu in menu bar”

Show Develop Menu in Menu Bar of Safari

2. Enable JSContext

  • Go to Develop menu Develop menu in Safari

  • Find your simulator or computer agent and enable

    • Automatically show web inspector for JSContexts
    • Automatically pause connecting to JSContexts

Enable JSContext in Safari

Download Daily Vibes

3. Re-run project in Xcode

For my example, I’m just going to simply add debugger keyword to the Javascript file

added debugger to source code

and then I press run on the tests press run on Xcode test images

and I wait until Safari does its the magic:

safari doing magic

There you go, hopefully now you can see that it is not that difficult to debug any javascript that your app might contain.

Thank you for reading and until next time my friend.

⭐️ Download Daily Vibes 🚀

Sincerely, Alex

· software development, software engineering, productivity, growth, tutorial

We announced a new product!