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 最强大的功能之一是，你的大部分应用开发可以直接在桌面浏览器中进行。通过完全访问传统的网页开发工具（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.

note

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

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

在实现原生功能时，请使用 平台检测。 当你准备在真实设备上进行测试时，请参见这里的 iOS 和 Android。

🌐 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

note

先决条件：必须在 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/.

目录