How do I open developer tools on iOS Simulator?

Question

I am wanting to open developer tools on an iOS simulator

I have taken the following steps, on a 2016 MacBook running macOS Sierra 10.12.1 and don't know how to get any further:

• I have Xcode installed
• I create a new playground
• Right click on the Xcode dock icon and click Open Developer Tool > Simulator
• I now have an iOS simulator running whichever device I need, in my case iPhone 6 running IOS 10.0

Now I am wondering what steps do I take to debug, and inspect elements on a webpage as I would in Safari or Chrome developer tools?

Answer 1

Open Safari and go to Preferences. Under the Advanced tab, at the bottom, you'll see "Show Develop menu in menu bar". Make sure that is checked like in the image below.

Once that is checked, you'll see a new menu bar item named "Develop" between "Bookmarks" and "Window" in Safari's menu. Under the Develop menu, select "Simulator" and then select the site you want to debug. A new window with the developer tools will then pop up:

Answer 2

Download https://developer.apple.com/safari/technology-preview/

Open the website you want on your simulator.

On "Safari Technology Preview", under

Develop > Simulator --- [SimulatorName] > select your website from the list.

Answer 3

If you are on a mac, press CMD + G while running the Simulator on XCode. This will allow you to Inspect element like you can on a web browser.

To hide the menu, press CMD + D.

It looks like the most accepted answer incorrectly assumes the asker is wondering about Safari Simulator, not XCode Simulator.

Answer 4

If you're using React Native then you can install react-devtools globally and access devtools that way. To do this:

1. Install it by running npm install -g react-devtools from your terminal
2. Run react-devtools from your terminal
3. Make sure your app is running in the simulator
4. Open the in-app developer menu in the simulator by pressing cmd + D

You should now see the components list from the React Devtools Electron app.