CODEWITHSUNDEEP
iosdevtoolsbrave
5260452
5260452

Reputation: 11598

How to access iOS Brave browser dev tools?

I have a website that is displaying unexpected colors only on iOS Brave. Not on macOS Brave (not in desktop view, not in emulated mobile view), and not on Safari, Chrome, Firefox, or Edge in macOS or iOS.

To troubleshoot this in iOS Safari, I would connect iPhone to Mac via USB, launch macOS Safari, click from menubar Develop, click iPhone, select the browser tab, and I would have full and live access to dev tools.

How can I do this sort of debugging for iOS Brave?

Upvotes: 1

Views: 4860

Answers (2)

dgrebb
dgrebb

Reputation: 136

For anyone arriving here scratching their head as to how one remote-inspects Brave on iOS, behold this precious gem, buried in GitHub issues.

Short answer: use Safari on desktop to remote-inspect Brave on iOS.

  1. Connect iPhone to Mac via Lightning cable ("Trust this computer" prompt = yes)
  2. Enable Web Inspector via iOS Settings app -> Safari
  3. Enable "Features for web developers" in desktop Safari
  4. Open Brave and the URL for inspection
  5. Open Safari on macOS
  6. Drop down the "Develop" menu
  7. Note the iPhone and Brave session — click it
  8. Web Inspector appears and the Brave DOM is yours
  9. Pro-tip bonus: Mirror iPhone Screen to Mac with QuickTime for a side-by side view of Web Inspector and Brave

If anyone has come across official Brave documentation for this, please share!

Upvotes: 4

Sampson
Sampson

Reputation: 268326

Brave on iOS is a fork of Firefox for iOS, and both browsers use Apple's underlying engines (as required by Apple) for web content rendering and scripting. As such, you should get a similar experience in Brave and Firefox compared to Safari. Where the experiences differ would likely be due to conditional styling or browser-specific scripting. Unfortunately, Brave and Firefox do not support remote debugging, due to limitations placed on third-party apps by Apple itself.

Device emulation from the desktop is usually a sufficient utility to debugging mobile UI issues. If this doesn't work for you, a more old-school approach may be necessary. For example, remove non-essential parts of the code, one at a time, testing the design after each step. You could start with removing entire stylesheets, or simply removing portions of stylesheets at a time.

Eventually, some removal will impact the UI issue you're investigating. When this happens, it may be that the previously-removed code clarifies the issue for you, but that is not always the case. Often you will re-add the code (to restore the broken experience), and then proceed to remove other code. Repeat these steps until you have as little code as possible (a reduced reproduction of the issue). When you have that reduction, you can provide it here, on stack overflow, for further assistance.

Upvotes: 0

Related Questions