Testing & Debugging Brave Browser on iOS

I'm an avid user of Brave on iOS, drawn by its strong privacy features, which come in handy for tasks like testing analytics, Content Security Policies, and general content-blocking side-effects. But how does one debug this browser directly on an iPhone?

# Problem

Because Brave blocks third-party scripts, analytics, tracking utilities, and other user-defined content, we may want to test potential issues with our rendered UIs with an actual device.

Using developer tools to diagnose performance, security, animation, and specifically, access to a console and the DOM is essential for this depth of testing. But how can we do this with a third-party browser like Brave? And on iOS?

It's possible, but the documentation regarding this feature is nowhere to be found.

After many hours searching, periodically over the course of months, I finally stumbled on this GitHub issue: How to access dev tools? · Issue #7425 · brave/brave-ios · GitHub.

# Solution

Surprisingly, the key to testing Brave on iOS lies in using Safari on desktop. This approach might seem almost comically counterintuitive, as it doesn't even require launching Brave on macOS. Below is a quick animated GIF demonstrating the process:

  1. Mirroring phone screen to Quicktime via AirPlay mirroring for a windowed view
  2. Opening Safari on macOS
  3. Opening a localhost Vite server on the phone by listening on the local network
  4. Running self-signed SSL certificate, so we must "Accept the risk" in Brave to load the page
  5. Opening the Brave session in Safari's Web Inspector
  6. Deleting the site header via the "Elements" view
  7. Using the console to document.body.remove()
  8. Reloading the phone's browser session via Web Inspector to undo our changes

Note

Further testing has revealed the Web Inspector can be used for Firefox on iOS as well. The same may work for all third-party browsers.

Still frame: A still image of iPhone mirrored to macOS Quicktime player.
Animated An animation of macOS Safari Web Inspector testing a browser session from iOS shown in Quicktime.

# Preparing Your Devices

To follow this guide, you'll need:

  1. A Mac running macOS ~13
  2. Safari (at time of writing 17.3 (19617.2.4.11.8))
  3. An iPhone
  4. Brave Browser for iOS
  5. A Lightning Cable (Required for remote Web Inspector)

# Configuring iPhone Settings

The Apple Developer documentation offers a detailed guide to enabling remote Safari inspection on an iOS device. Briefly:2020240131213005

1. Open up the "Settings" app in iOS and Scroll down to "Safari"

The Settings application menu, listing "Contacts", "Calendar", "Reminders", "Voice Memos", "Phone", "Messages", "FaceTime", and our focus, "Safari".

2. Scroll to and tap the bottom-most option, "Advanced"

The "Advanced" options item for Safari, within the iOS Settings application and view.

3. Enable "Web Inspector"

The Safari > Advanced > Web Inspector toggle, within the Settings app for iOS.

# Desktop Settings

The Apple Developer documentation provides a thorough walkthrough of enabling the Web Inspector on macOS Safari but in short:

  1. Open Safari
  2. Click the "Safari" menu -> "Settings"
  3. Navigate to the "Advanced" tab
  4. Check "Show features for web developers" at the bottom (Details)
macOS Safari "Advanced" tab, within its settings window.

# Remote-Inspecting Brave on iPhone

  1. Connect your Mac and iPhone via Lightning cable
  2. If prompted on iOS — "Trust" your computer
  3. Open Safari on macOS
  4. Open Brave on iOS
  5. In Safari on macOS, use the "Develop" menu to:
  6. Locate your iOS device.
  7. Select the Brave browser session for debugging
  8. Safari Developer Tools will pop open with the iPhone's current Brave session
  9. Now you're playing with power!

# Conclusion

Numerous rabbit holes abound in how this can be achieved with Brave and mobile devices. This is the way for iOS, at least. Sadly, I no longer have any spare Android devices around, but I suspect one could do the same there via Chrome-flavored browsers on Windows or Linux.

Enjoy your digital exploration, stay brave, and delight in the DOM safari!

Back to Top