Skip to content

Instantly share code, notes, and snippets.

@james2doyle

james2doyle/ios-chrome-devtools.md

Last active July 20, 2024 16:11
Show Gist options
  • Save james2doyle/d552c408f5d3a6af8890914e60db3861 to your computer and use it in GitHub Desktop.
Save james2doyle/d552c408f5d3a6af8890914e60db3861 to your computer and use it in GitHub Desktop.
Download ZIP
Enable remote debugging on the iOS simulator using Chrome Dev Tools
Raw
ios-chrome-devtools.md

Install the tools:

brew install ios-webkit-debug-proxy

Run the simulator. And choose an iOS 10 device. The chrome remote debugging doesn't work with iOS 11 yet.

Enable the inspector

Your attached iOS devices must have ≥1 open browser tabs and the inspector enabled via: Settings > Safari > Advanced > Web Inspector = ON. This was already enabled for me when I went into the Safari settings to check.

Run The Proxy

ios_webkit_debug_proxy --debug -f chrome-devtools://devtools/bundled/inspector.html

Open A Tab In Chrome

Open a tab in chrome at the following link: chrome-devtools://devtools/bundled/inspector.html?ws=localhost:9222/devtools/page/1

That will open a new empty tab on in chrome with a full screen devtools interface.

Inspect the page

You can inspect the page now. You will not be able to see highlighted elements from the devtools in the browser though. You will just need to deal with opening the DOM tree and finding the elements. Or use DOM queries in the JS console (document.querySelectorAll) and then right click on the results and click "Reveal In Elements Panel".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment