跳至主要内容
版本：v8

调试

实时重载​

实时重载对于在设备硬件上调试原生功能（例如插件）很有用。 您无需每次代码更改都部署新的原生二进制文件，而是在检测到应用程序中的更改时重新加载浏览器（或 WebView）。 在此处了解更多信息.

iOS 和 Safari​

Safari 可用于在连接的 iOS 设备或 iOS 模拟器上调试 Ionic 应用程序。

首先，在 iOS 设备上，从设置 > Safari > 高级中启用 **Web 检查器**。

接下来，在 Mac 上打开 Safari，然后在 Safari > 偏好设置 > 高级下启用 **在菜单栏中显示“开发”菜单**。

运行 iOS 模拟器或将您的 iOS 设备连接到 Mac，然后运行您要调试的 Ionic 应用程序。

在 Safari 中，选择工具栏中的 **开发**。 在下拉菜单选项中，您应该看到您的设备和应用程序的名称。 将鼠标悬停在应用程序名称上，然后单击 **localhost**。 这将打开一个新的窗口，其中包含 Safari 开发者工具 - 使用它们来检查和调试在您的设备上运行的 Ionic 应用程序。

Android 和 Chrome​

当使用 ionic serve 命令在浏览器中运行、部署到模拟器或物理设备上运行时，使用 Google Chrome 的 DevTools 调试应用程序。

要检查物理设备，首先您需要启用开发者模式。 将您的 Android 设备连接到计算机，然后转到 设置 > 关于 滚动到 内部版本号 并点击 7 次。 这将在 **设置** 菜单中激活一个新的选项，称为 **开发者选项**。

接下来，转到 设置 > 开发者选项 并确保开发者选项开关处于打开状态。 开发者选项和 USB 调试在 Android 模拟器中默认启用。

打开 Chrome 浏览器并导航到 URL chrome://inspect/#devices。 您连接的 Android 设备应显示在远程目标列表中。

在您的设备上，使用 Chrome 打开您要调试的 Ionic 应用程序。

在您的应用程序在设备上运行时，返回 Chrome 并点击远程目标列表中您设备下的 **检查**。 这将在新窗口中打开 Chrome 开发者工具。 然后，您将能够使用所有 Chrome DevTools 来调试应用程序，因为它在您的设备上运行。

注意

由于一个小错误，应用程序预览可能不会在您打开 Chrome 开发者工具时自动出现。 要使其出现，请点击 **元素** 选项卡，然后点击任何 DOM 元素，然后关闭和打开任何 CSS 规则，应用程序预览窗口将出现。

在 Chrome 中使用 Visual Studio 本地调试（Android 和 iOS）​

Visual Studio Code 也可用于调试在 Chrome 网页浏览器中运行的 Ionic 应用程序。

为此，使用 ionic serve 在浏览器中运行您的应用程序。 注意您的应用程序运行的端口。 接下来，使用 Visual Studio Code 打开您的 Ionic 项目。

在 VS Code 中最左侧的垂直菜单中，点击 运行 图标。 如果您是第一次在您的项目中配置此操作，请点击创建 launch.json 文件的选项。 从环境选项下拉菜单中选择 **Chrome**。 这将自动生成一个包含针对 localhost 启动 Chrome 的配置的 launch.json 文件。

确保 launch.json 文件的 url 属性中使用的端口与您之前运行 ionic serve 时观察到的端口匹配。 使用错误的端口号将无法正常工作。

在调试目标下拉菜单中，选择 **在 Chrome 中启动**，然后点击运行。 这将打开 Chrome 浏览器的新实例，VS code 将附加到它。 当您的应用程序在 Chrome 中运行时，您可以在 VS Code 中设置断点并使用其他调试工具。

在 Android 中使用 Visual Studio Code 调试​

Visual Studio Code 有一个专用于调试在 Android WebView 中运行的应用程序的插件。

该插件 在设备和 Visual Studio Code 开发者工具之间创建了一个桥梁，并允许直接从编辑器进行调试。

为了使用此插件调试您的 Ionic 应用程序，首先安装它，然后在 Android 模拟器中启动您的应用程序，或连接您的 Android 设备并运行应用程序。 您可能需要在您的 Android 设备上启用 USB 调试。

在您的 Ionic 项目的根目录中，创建一个名为 .vscode 的文件夹，并在该文件夹中创建一个名为 launch.json 的文件。 在 launch.json 中，输入以下代码来配置插件以调试 Ionic 应用程序

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "android-webview",
      "request": "attach",
      "name": "Attach to Android WebView",
      "webRoot": "${workspaceFolder}/www",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:/*": "${workspaceFolder}/*"
      }
    }
  ]
}

接下来，启动调试过程，选择您的设备和 Ionic 应用程序。 VS Code 将附加到 Android 设备和 Ionic 应用程序，您现在可以调试您的应用程序，包括设置断点。

注意

如果您无法设置断点并收到错误消息，“断点被忽略，因为未找到生成的代码（源映射问题？）”，这意味着编译后的 JavaScript 文件的路径不正确。 使用调试控制台中的 .scripts 命令查看已加载的脚本。 通过在 launch.json 配置文件中的 sourceMapPathOverrides 键中尝试不同的值来确保脚本的路径正确。

内容

编辑此页面