Skip to main content

调试

实时重新加载​

🌐 Live Reload

实时重载对于调试设备硬件上的本地功能（例如插件）非常有用。每次代码更改时，不必部署新的本地二进制文件，它会在检测到应用中的更改时重新加载浏览器（或 WebView）。在此了解更多。

🌐 Live Reload is useful for debugging native functionality (such as plugins) on device hardware. Rather than deploy a new native binary each time you make a code change, it reloads the browser (or WebView) when changes in the app are detected. Learn more here.

iOS 和 Safari​

🌐 iOS and Safari

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

🌐 Safari can be used to debug an Ionic app on a connected iOS device or iOS simulator.

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

🌐 First, on the iOS device, enable Web Inspector from Settings > Safari > Advanced.

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

🌐 Next, open Safari on a Mac then enable Show Develop menu in menu bar under Safari > Preferences > Advanced.

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

🌐 Run the iOS simulator or connect your iOS device to your Mac, then run the Ionic app that you want to debug.

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

🌐 Within Safari, select Develop in the toolbar. In the dropdown menu options, you should see the name of your device and app. Hover over the app name and click on localhost. This will open a new window with the Safari Developer Tools - use them to inspect and debug the Ionic app running on your device.

安卓和 Chrome​

🌐 Android and Chrome

使用 Google Chrome 的开发者工具在应用在浏览器中运行时使用 ionic serve 命令调试它，或在模拟器上，或在物理设备上部署时调试它。

🌐 Use Google Chrome's DevTools to debug an app when it is running in the browser using the ionic serve command, deployed to an emulator, or on a physical device.

要检查物理设备，首先需要启用开发者模式。将你的安卓设备连接到电脑，然后进入 Settings > About，滚动到 Build Number 并点击7次。这将在 设置 菜单中激活一个名为 开发者选项 的新选项。

🌐 To inspect a physical device, first you need to have developer mode enabled. Connect your Android device to the computer then go to Settings > About scroll to Build Number and tap that 7 times. This will activate a new option in the Settings menu called Developer Options.

接下来，进入 Settings > Developer Options，确保开发者选项开关已打开。向下滚动到 USB 调试 并确保它也已启用。在 Android 模拟器中，开发者选项和 USB 调试默认是启用的。

🌐 Next, go to Settings > Developer Options and ensure that the developer options switch is toggled on. Scroll down to USB Debugging and ensure that it is also enabled. Developer Options & USB Debugging are enabled by default in the Android emulator.

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

🌐 Open the Chrome browser and navigate to the URL chrome://inspect/#devices. Your connected Android device should show up in the list of Remote Targets.

在你的设备上，打开你想要使用 Chrome 调试的 Ionic 应用。

🌐 On your device, open the Ionic app that you would like to debug using Chrome.

在设备上运行你的应用后，返回 Chrome 并在远程目标列表中点击你的设备下的 inspect（检查）。这将在一个新窗口中打开 Chrome 开发者工具。然后，你将能够使用所有的 Chrome 开发者工具来调试在设备上运行的应用。

🌐 With your app running on the device, head back to Chrome and click on inspect under your device in the list of remote targets. This will open the Chrome Developer Tools in a new window. You will then be able to use all of the Chrome DevTools to debug the application as it runs on your device.

note

由于一个小错误，当你打开 Chrome 开发者工具时，应用预览可能不会自动出现。要使其出现，请点击 Elements 选项卡，然后点击任意 DOM 元素，接着关闭并重新开启任意 CSS 规则，应用预览窗口就会出现。

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

🌐 Debugging with Visual Studio locally in Chrome (both Android & iOS)

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

要做到这一点，使用 ionic serve 在浏览器中运行你的应用。注意你的应用正在运行的端口。接下来，使用 Visual Studio Code 打开你的 Ionic 项目。

🌐 To do this, run your app in the browser using ionic serve. Take note of the port that your app is running on. Next, open your Ionic project using Visual Studio Code.

在 VS Code 左侧最左边的垂直菜单中，点击 run 图标。如果这是你第一次在项目中进行配置，请点击选项以创建一个 launch.json 文件。从环境选项下拉菜单中选择 Chrome。这将自动生成一个包含针对本地主机启动 Chrome 配置的 launch.json 文件。

🌐 In the far-left vertical menu within VS Code, click on the run icon. If you are configuring this for the first time in your project, click on the option to create a launch.json file. Select Chrome from the environment options dropdown. This will automatically generate a launch.json file with configurations for launching Chrome against localhost.

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

🌐 Make sure that the port used in the url property of your launch.json file matches the port that you observed earlier when you ran ionic serve. Using an incorrect port number will not work.

在调试目标下拉菜单中，选择 Launch against Chrome，然后点击运行。这将打开一个新的 Chrome 浏览器实例，VS Code 会附加到它。你可以在应用在 Chrome 中运行时设置断点并使用 VS Code 中的其他调试工具。

🌐 In the debug target dropdown menu, select Launch against Chrome, then click run. This will open a new instance of the Chrome browser and VS code will attach to it. You can set breakpoints and use the other debugging tools within VS Code while your app is running in Chrome.

在 Android 中使用 Visual Studio Code 进行调试​

🌐 Debugging with Visual Studio Code in Android

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

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

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

🌐 In order to use this plugin to debug your Ionic apps, first install it then start your app in the Android emulator or connect your Android device and run the app. You may need to enable USB debugging on your Android device.

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

🌐 In the root of your Ionic project, create a folder called .vscode and inside that folder create a file called launch.json. Inside launch.json, enter the following code to configure the plugin to debug Ionic apps:

{
  "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 应用上，现在你可以调试你的应用，包括设置断点。

🌐 Next, launch the debugging process, selecting your device and Ionic app. VS Code will attach to both the Android device and Ionic app and you can now debug your app, which includes setting breakpoints.

note

如果你无法设置断点并收到错误提示，"Breakpoint ignored because generated code not found (source map problem?)"（因为未找到生成的代码而忽略断点（源映射问题？）），这意味着转换后的 JavaScript 文件的路径不正确。在调试控制台中使用 .scripts 命令查看已加载的脚本。通过在你的 launch.json 配置文件中的 sourceMapPathOverrides 键尝试不同的值，确保脚本的路径是正确的。

目录