How do I open developer tools on iOS Simulator?

IosXcode

Ios Problem Overview


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?

Ios Solutions


Solution 1 - Ios

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.

advanced preferences

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:

developer tools

Solution 2 - Ios

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.

Solution 3 - Ios

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.

Solution 4 - Ios

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionsvnmView Question on Stackoverflow
Solution 1 - IosJakeView Answer on Stackoverflow
Solution 2 - IositdoesntworkView Answer on Stackoverflow
Solution 3 - IosJamie KentView Answer on Stackoverflow
Solution 4 - IosBrady DowlingView Answer on Stackoverflow