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”>“高级”启用 Web Inspector。

¥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

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

¥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.

要检查物理设备，首先需要启用开发者模式。将你的 Android 设备连接到计算机，然后转到 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 并单击远程目标列表中设备下方的“检查”。这将在新窗口中打开 Chrome 开发者工具。然后，你将能够使用所有 Chrome DevTools 来调试在设备上运行的应用。

¥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.

注意

由于一个小错误，当你打开 Chrome 开发者工具时，应用预览可能不会自动显示。要使其显示，请单击“元素”选项卡，然后单击任何 DOM 元素，然后关闭并打开任何 CSS 规则，然后将出现应用预览窗口。

¥The app preview may not automatically appear when you open Chrome Developer Tools due to a minor bug. To make it appear, click on the Elements tab then click on any DOM element then toggle off and on any CSS rule and the app preview window will appear.

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

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

Visual Studio Code 还可用于调试在 Chrome Web 浏览器中运行的 Ionic 应用。

¥Visual Studio Code can also be used to debug an Ionic app running in the Chrome web browser.

为此，请使用 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。这将自动生成一个 launch.json 文件，其中包含针对本地主机启动 Chrome 的配置。

¥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.

在调试目标下拉菜单中，选择“针对 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 has a dedicated plugin for debugging apps that run in an Android WebView.

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

¥The plugin creates a bridge between the device and the Visual Studio Code developer tools and permits debugging right from the editor.

为了使用此插件来调试你的 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.

注意

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

¥If you are unable to set breakpoints and get an error saying, "Breakpoint ignored because generated code not found (source map problem?)" it means that the paths to the transpiled javascript files are incorrect. Use the .scripts command in the Debug console to see the loaded scripts. Make sure the paths of the scripts are correct by experimenting with different values in the sourceMapPathOverrides key in your launch.json configuration file.

目录