Skip to main content

开发技巧

解决权限错误​

🌐 Resolving Permission Errors

EACCES 权限错误可能会在全局安装软件包时发生。如果出现这种情况，可能需要将 npm 设置为在无需提升权限的情况下运行。

note

使用 sudo 配合 npm 不推荐，因为它可能导致更多的复杂问题。

本指南提供了解决权限问题的两种选项。有关完整文档和其他选项，请参阅 npm 文档。

🌐 This guide offers two options for resolving permission issues. See the npm docs for full documentation and additional options.

选项 1​

🌐 Option 1

避免权限问题的最佳方法是使用节点版本管理器重新安装 NodeJS 和 npm。

🌐 The best way to avoid permission issues is to reinstall NodeJS and npm using a node version manager.

本指南将记录 nvm 的安装和使用。完整文档请参阅 nvm 文档。Windows 的其他选项和说明请参阅 npm 文档。

🌐 This guide will document nvm installation and usage. See the nvm docs for full documentation. See the npm docs for additional options and instructions for Windows.

  1. 安装 nvm。

    $ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

  2. 新的终端现在将使用 nvm。要验证，请打开一个新的终端并运行以下命令。如果有输出，说明安装成功。

    $ command -v nvm

  3. 要下载并安装 NodeJS 的最新 LTS 版本，请运行：

    $ nvm install --lts

  4. 将新安装的 NodeJS 设置为默认环境：

    $ nvm alias default lts/*

  5. 新的终端现在将使用由 nvm 控制的 NodeJS。要验证：

    $ node -v  # will print the version installed above
    $ which npm  # will print a path somewhere within the ~/.nvm folder

全局包现在将安装在 ~/.nvm 目录中，因此只要在不使用 sudo 的情况下使用 npm，权限错误就不应再发生。

🌐 Global packages will now be installed in the ~/.nvm directory, so permission errors should no longer occur as long as npm is used without sudo.

选项 2​

🌐 Option 2

不适用于 Windows

将 npm 目录的所有者更改为当前用户：

🌐 Change the owner of npm's directories to the current user:

$ sudo chown -R $(whoami) /usr/local/{lib/node_modules,bin,share}
$ sudo chown -R $(whoami) /usr/lib/node_modules
$ sudo chown -R $(whoami) ~/.npm ~/.npmrc

由于这些全局目录不再由 root 拥有，软件包可以在全局范围内安装，而无需 sudo。

🌐 Since these global directories are no longer owned by root, packages can be installed globally without sudo.

更新依赖​

🌐 Updating Dependencies

要更新一个 npm 依赖，请运行以下命令，其中 <package-name> 是要更新的包：

🌐 To update an npm dependency, run the following, where <package-name> is the package to update:

npm install <package-name>@<version|latest> --save

例如，要将 @ionic/angular 软件包更新到标记为 latest 的版本，请运行：

🌐 For example, to update the @ionic/angular package to the release tagged latest, run:

npm install @ionic/angular@latest --save

建议通过 CLI 更新软件包，因为 npm 现在将首先从 package-lock.json 读取软件包版本。

🌐 It is recommended that packages get updated through the CLI since npm will now read package versions from the package-lock.json first.

代码编辑器​

🌐 Code Editors

有很多代码编辑器可以选择。以下是我们的一些最爱：

🌐 There are a lot of code editors to choose from. Here are some of our favorites:

使用调试器​

🌐 Using a Debugger

debugger 关键字可以用来调试应用。当大多数浏览器遇到 debugger 语句时，JavaScript 的运行会停止，浏览器将加载其调试器。这可以用来在应用中设置“断点”。

🌐 The debugger keyword can be used to debug an app. When most browsers encounters a debugger statement, running of JavaScript is stopped, and the browser will load its debugger. This can be used to set "breakpoints" in the app.

例如，如果函数没有返回正确的值，则可以使用调试器单步执行代码并检查变量。

🌐 For example, if a function is not returning the correct value, the debugger can be used to step through the code and inspect variables.

function myBrokenFunction() {
  debugger;
  // do other stuff
}

当一个应用运行时，它将在此函数处暂停。从那里，可以使用开发者工具逐行运行 JavaScript 代码，并检查函数到底在哪一处出错。

🌐 When an app runs, it will pause at this function. From there, the developer tools can be used to run pieces of JavaScript, line by line, and inspect where exactly the function breaks.

改变模式​

🌐 Changing Mode

默认情况下，当在浏览器中查看应用时，Ionic 会应用 md 模式。然而，由于 Ionic 组件会根据其平台进行适配，因此能够查看应用在 iOS 上的显示效果是很有帮助的。为此，请在应用提供服务的 URL 中添加 ?ionic:mode=ios。例如，如果应用在端口 8100 提供服务，则 URL 将是：http://localhost:8100/?ionic:mode=ios。

🌐 By default, when an app is viewed in the browser, Ionic will apply the md mode. However, since Ionic components adapt according to their platform, it is helpful to be able to view what the app will look like on iOS. To do this, add ?ionic:mode=ios to the URL where the app is being served. For example, if the app is served on port 8100, the url would be: http://localhost:8100/?ionic:mode=ios.

note

这不会改变浏览器看到的使用平台。平台是通过设备检测和检查用户代理来确定的。要更改平台，必须更改用户代理。为此，请使用 Ctrl+Shift+I（Mac上为Cmd+Option+I ）打开Chrome开发者工具，然后使用 Ctrl+Shift+M（Mac上为Cmd+Option+M ）切换设备模式。

Chrome DevTools showing the device mode with iPhone X selected.

从设备下拉列表中选择设备将更改用户代理以及视口的尺寸。

🌐 Selecting devices from the device dropdown will change the user-agent, as well as the dimensions of the viewport.

使用 iOS 模拟器​

🌐 Using the iOS Simulator

iOS 模拟器可以在应用到达实际设备之前对其进行测试和调试。

🌐 The iOS simulator enables testing and debugging of an app before it reaches an actual device.

在使用之前，必须安装 Xcode，苹果的集成开发环境。

🌐 Before it can be used, Xcode, Apple's IDE, must be installed.

Ionic CLI 然后可以用于在模拟器上运行当前目录中的应用：

🌐 The Ionic CLI can then be used to run the app in the current directory on the simulator:

ionic cordova emulate ios -lc

传入 -lc 标志将启用实时重载并将控制台输出记录到终端。

🌐 Passing in the -lc flag will enable livereload and log console output to a terminal.

Xcode 还可用于启动模拟器和调试应用。

🌐 Xcode can also be used to launch the emulator and debug an app.

打开 Xcode 并打开 ../path-to-app/platforms/ios/myApp.xcodeproj。

🌐 Open up Xcode and open ../path-to-app/platforms/ios/myApp.xcodeproj.

应用加载后，控制台输出和设备日志将打印在 Xcode 的输出窗口内。

🌐 After the app loads, console output and device logs will be printed inside of Xcode's output window.

使用 Genymotion Android 模拟器​

🌐 Using the Genymotion Android Emulator

虽然 Android SDK 附带了一个普通模拟器，但它有时可能会很慢且无响应。

🌐 While the Android SDK comes with a stock emulator, it can be slow and unresponsive at times.

Genymotion 是一个更快的替代模拟器，并且仍然允许访问像 GPS 和相机这样的原生功能。

目录