Skip to content

Instantly share code, notes, and snippets.

@gugadev

gugadev/ios-chrome-devtools.md

Forked from james2doyle/ios-chrome-devtools.md
Created September 24, 2019 14:53
Show Gist options
  • Save gugadev/0117dac3be5b6b71ae5364e2b520b7a6 to your computer and use it in GitHub Desktop.
Save gugadev/0117dac3be5b6b71ae5364e2b520b7a6 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