在浏览器中测试

Created: November-22, 2018

使用 ionic serve 为 app dev 和测试启动本地开发服务器。这对于桌面浏览器测试以及在连接到同一网络的设备浏览器中进行测试非常有用。此外，此命令启动 LiveReload，用于监视文件系统中的更改。保存文件后，浏览器会自动刷新。看看在萨斯文档，如果你也想拥有 ionic serve 观看项目的萨斯文件。

$ ionic serve [options]

对于 chrome 浏览器，你可以检查设备（AVD 或 Mobiles），在 chrome 浏览器的地址栏中输入以下命令。

chrome://inspect/#devices

LiveReload

默认情况下，LiveReload 将监视 www/目录中的更改，不包括 www/lib/。要更改此设置，你可以在项目根目录中的 ionic.project 文件中指定 watchPatterns 属性，以观察（或不监视）特定更改。

{
  "name": "myApp",
  "app_id": "",
  "watchPatterns": [
    "www/js/*",
    "!www/css/**/*"
  ]
}

有关 glob 模式语法的参考，请查看 Grunt 网站上的 globbing 模式。

注意：

$ ionic setup sass

将添加 watchPatterns 属性和默认值到你的 ionic.project 文件，然后你可以编辑，除了 Sass 文档中描述的 gulpStartupTasks 属性。

离子实验室

Ionic Lab http://ionicframework.com/img/blog/lab.png

Ionic Lab 是 ionic serve 上的一项功能，可以轻松地在手机框架中测试你的应用程序，并且可以并排使用 iOS 和 Android 平台。要使用它，只需运行

$ ionic serve --lab

阅读完整版本公告了解所有细节！

指定要使用的 IP 地址

假设你要指定浏览器将连接到的地址，比如测试或外部用户。使用 --address 参数指定地址。

$ ionic serve --address 68.54.96.105

服务代理

serve 命令可以向 http 服务器添加一些代理。如果你在浏览器中进行开发并且需要调用外部 API，则这些代理非常有用。使用此功能，你可以通过离子 http 服务器向外部 api 代理请求，防止 No 'Access-Control-Allow-Origin' header is present on the requested resource 错误。

在 ionic.project 文件中，你可以添加一个包含要添加的代理数组的属性。代理是具有两个属性的对象：

path：将与传入请求 URL 的开头匹配的字符串。
proxyUrl：一个字符串，其中包含代理请求应该去的 URL。

{
  "name": "appname",
  "email": "",
  "app_id": "",
  "proxies": [
    {
      "path": "/v1",
      "proxyUrl": "https://api.instagram.com/v1"
    }
  ]
}

使用上面的配置，你现在可以在 http://localhost:8100/v1 向本地服务器发出请求，让它代理请求 https://api.instagram.com/v1

例如：

angular.module('starter.controllers', [])
.constant('InstagramApiUrl', '')
// .constant('InstagramApiUrl','https://api.instagram.com')
//In production, make this the real URL

.controller('FeedCtrl', function($scope, $http, InstagramApiUrl) {

  $scope.feed = null;

  $http.get(InstagramApiUrl + '/v1/media/search?client_id=1&lat=48&lng=2.294351').then(function(data) {
    console.log('data ' , data)
    $scope.feed = data;
  })

})

另请参阅此要点以获得更多帮助。

命令行标志/选项

[--consolelogs|-c] ......  Print app console logs to Ionic CLI
[--serverlogs|-s] .......  Print dev server logs to Ionic CLI
[--port|-p] .............  Dev server HTTP port (8100 default)
[--livereload-port|-i] ..  Live Reload port (35729 default)
[--nobrowser|-b] ........  Disable launching a browser
[--nolivereload|-r] .....  Do not start live reload
[--noproxy|-x] ..........  Do not add proxies