### 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".