如何在 iOS 模拟器上打开开发者工具？

Question

我想在 iOS 模拟器上打开开发者工具

我在运行macOS Sierra 10.12.1的 2016 MacBook 上采取了以下步骤，但不知道如何进一步：

• 我已经安装了 Xcode
• 我创建了一个新的游乐场
• 右键单击 Xcode 停靠栏图标，然后单击 Open Developer Tool > Simulator
• 我现在有一个 iOS 模拟器，可以运行我需要的任何设备，在我的情况下是运行 IOS 10.0 的 iPhone 6

现在我想知道我需要采取哪些步骤来调试和检查网页上的元素，就像在 Safari 或 Chrome 开发人员工具中一样？

Answer 1

打开 Safari 并转到首选项。 在“高级”选项卡的底部，您将看到“在菜单栏中显示开发菜单”。 确保如下图所示进行检查。

选中后，您将在 Safari 菜单中的“书签”和“窗口”之间看到一个名为“开发”的新菜单栏项。 在“开发”菜单下，选择“模拟器”，然后选择要调试的站点。 然后会弹出一个带有开发者工具的新窗口：

Answer 2

下载https://developer.apple.com/safari/technology-preview/

在模拟器上打开您想要的网站。

在“Safari Technology Preview”上，在

Develop > Simulator --- [SimulatorName] >从列表中选择您的网站。

Answer 3

如果您使用的是 Mac，请在 XCode 上运行模拟器时按CMD + G 这将允许您像在 Web 浏览器上一样Inspect element 。

要隐藏菜单，请按CMD + D 。

看起来最被接受的答案错误地假设提问者想知道 Safari Simulator，而不是 XCode Simulator。

Answer 4

如果您使用的是 React Native，那么您可以全局安装react-devtools并以这种方式访问​​ devtools。 去做这个：

1. 通过从终端运行npm install -g react-devtools来安装它
2. 从终端运行react-devtools
3. 确保您的应用程序在模拟器中运行
4. 按cmd + D在模拟器中打开应用内开发者菜单

您现在应该看到来自 React Devtools Electron 应用程序的组件列表。