Skip to content

Instantly share code, notes, and snippets.

@enricodeleo

enricodeleo/ios-chrome-devtools.md

Forked from james2doyle/ios-chrome-devtools.md
Created June 22, 2021 16:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save enricodeleo/a86ea9b584cdef7903dfabda7b4195e0 to your computer and use it in GitHub Desktop.
Save enricodeleo/a86ea9b584cdef7903dfabda7b4195e0 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