Skip to main content

预览

根据你的目标平台和需求，有许多不同的选项可用于测试原生功能。

¥There are many different options to test native functionality depending on your target platforms and needs.

在 Web 浏览器中本地运行​

¥Run Locally in a Web Browser

Ionic 最强大的功能之一是你的大部分应用开发都可以在桌面上的浏览器中进行。通过完全访问传统的 Web 开发工具（Chrome/Safari/Firefox 开发工具），你可以编写代码，然后快速测试/调试它，而无需重新编译或部署到模拟器或设备。

¥One of the most powerful features of Ionic is that the majority of your app development can happen right in a browser on your desktop. With full access to traditional web development tools (Chrome/Safari/Firefox dev tools), you can write code then test/debug it quickly without having to recompile or deploy to a simulator or device.

为此，请从项目目录中的命令行运行 ionic serve：

¥To do so, run ionic serve from the command line in the project's directory:

$ ionic serve
> ng run app:serve --host=0.0.0.0 --port=8100

[INFO] Development server running!

       Local: http://localhost:8100
       External: http://192.168.1.169:8100

       Use Ctrl+C to quit this process

[INFO] Browser window opened to http://localhost:8100!

在 ionic serve 运行的情况下，继续开发你的应用。当你保存更改时，应用将重新加载并应用这些更改。

¥With ionic serve running, continue developing your app. As you save changes, the app reloads with those changes applied.

注意

如果终端上未列出外部链接，则运行 ionic serve --external 来生成它。

¥If the external link isn't listed on the terminal, then run ionic serve --external to generate it.

实现原生功能时，请使用 平台检测。当你准备好在真实设备上进行测试时，请参阅此处的 iOS 和 安卓。

¥When implementing native functionality, use Platform Detection. When you're ready to test on a real device, see here for iOS and Android.

模拟移动视口​

¥Simulating a Mobile Viewport

每个主要浏览器供应商都包含用于移动模拟的开发者工具。这些工具提供了更改模拟设备类型的能力。

¥Each major browser vendor includes developer tools for mobile emulation. These tools offer the ability to change the emulated device type.

Chrome​

在提供服务的本地或远程地址打开你的应用。例如，http://localhost:4200。然后，通过按 Windows/Linux 上的 Ctrl+Shift+I 或 Mac 上的 Cmd+Opt+I 打开 Chrome 开发者工具。

¥Open your application at the local or remote address that it is being served from. For example, http://localhost:4200. Then, open the Chrome developer tools by pressing Ctrl+Shift+I on Windows/Linux or Cmd+Opt+I on Mac.

Chrome Dev Tools

从这里，你可以从下拉列表中选择不同的设备类型，更改设备的方向并限制网络速度。

¥From here you can select different device types from the dropdown, change the orientation of the device and throttle the network speed.

如需其他功能和信息，请访问：https://developer.chrome.com/docs/devtools/device-mode/。

¥For additional features and information visit: https://developer.chrome.com/docs/devtools/device-mode/.

苹果浏览器​

¥Safari

注意

先决条件：必须在 Safari 高级选项中启用“在菜单栏中显示开发菜单”选项。

¥Prerequisites: Show Develop menu in menu bar option must be enabled in Safari Advanced options.

在提供服务的本地或远程地址打开你的应用。例如，http://localhost:4200。选择 Safari 中的“开发”菜单，然后选择“进入响应式设计模式”。 或者，你可以使用键盘快捷键 Cmd+Opt+R。

¥Open your application at the local or remote address that it is being served from. For example, http://localhost:4200. Select the Develop menu in Safari and select Enter Responsive Design Mode . Alternatively you can use the keyboard shortcut Cmd+Opt+R.

Safari Responsive Design Mode

从这里你可以选择要模拟的不同设备类型以及更改设备的方向。

¥From here you can select different device types to emulate as well as change the orientation of the device.

如需其他功能和信息，请访问：https://developer.apple.com/safari/tools/。

¥For additional features and information visit: https://developer.apple.com/safari/tools/.

火狐浏览器​

¥Firefox

在提供服务的本地或远程地址打开你的应用。例如，http://localhost:4200。然后，通过按 Windows/Linux 上的 Ctrl+Shift+M 或 Mac 上的 Cmd+Opt+M 打开 Firefox 开发者工具。

¥Open your application at the local or remote address that it is being served from. For example, http://localhost:4200. Then, open the Firefox developer tools by pressing Ctrl+Shift+M on Windows/Linux or Cmd+Opt+M on Mac.

Firefox Responsive Design Mode

从这里，你可以从下拉列表中选择不同的设备类型，更改设备的方向并限制网络速度。

¥From here you can select different device types from the dropdown, change the orientation of the device and throttle the network speed.

如需其他功能和信息，请访问：https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/。

¥For additional features and information visit: https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/.

目录