在瀏覽器中測試

使用 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