共用方式為

偵錯由 Visual Studio Tools for Apache Cordova 建置的應用程式

  • 發行項

本主題適用於發行前版本軟體 -- Apache Cordova 的 Visual Studio Tools。這些功能描述於預覽中，但有可能變更。您可以從 Microsoft 下載中心下載此 Preview。

Visual Studio 提供順暢且常見的工具使用體驗，可供您跨應用程式類型和裝置平台開發 Cordova 應用程式。 不過，在此先期版本中，並非所有裝置平台都支援所有 Visual Studio 偵錯工具與診斷功能 (如下表所示)。

裝置或作業系統

是否支援 Visual Studio 偵錯工具？

是否支援主控台訊息？

解決方法

Android 4.4

是

是

-

Android 2.3.3 到 4.3 版

否 (請參閱本文稍後的 jsHybugger 相關資訊)

是

-

iOS 6、7 和 8

是

是

-

Windows 8、8.1 (市集)

是

是

-

Windows Phone 8、8.1

否

否 (使用主控台外掛程式)

使用 Web 檢查遠端 (weinre) 或主控台外掛程式。 請參閱本文稍後的偵錯 Windows 8 和 Windows Phone 8。

Windows Server 2012 R2

是

是

若要在 Windows Server 2012 R2 上執行應用程式，必須啟用 [桌面體驗] 選項。
注意事項注意事項

如果您使用 Windows 7，可以開發 Android 和 iOS 的應用程式，但無法開發 Windows 或 Windows Phone 的應用程式。

本文內容：

  • 在 Apache Ripple 中偵錯 Android 和 iOS

  • 在模擬器或裝置上為 Android 偵錯

  • 在模擬器或裝置上為 iOS 偵錯

  • 偵錯 Windows 8 和 Windows Phone 8

在 Apache Ripple 中偵錯 Android 和 iOS

您可以將 Visual Studio 偵錯工具附加至在 Apache Ripple 模擬器中執行的應用程式。

在 Ripple 中偵錯

  • 在 Visual Studio 中開啟應用程式的情況下，按 F5 鍵。

    您可以點擊程式碼中所設定的中斷點、使用 [DOM 總管]，或檢視傳送給 [JavaScript 主控台] 的訊息。

    下圖顯示程式碼編輯器中所設定的中斷點。

    使用 Ripple 偵錯時設定中斷點

    在這裡，Visual Studio 偵錯工具可以在 Ripple 模擬器中進行偵錯時，點擊中斷點。

    Visual Studio 偵錯工具攔截到的中斷點

重要

Visual Studio 偵錯工具不會在 Ripple 中載入第一頁之前所點擊的中斷點處停止。但在重新整理瀏覽器之後，偵錯工具在這些中斷點處即會停止。

Ripple 目前支援下列 JavaScript 主控台命令：

  • console.assert
    console.clear
    console.count
    console.debug
    console.dir
    console.dirxml
    console.error
    console.info
    console.log
    console.time
    console.timeEnd
    console.warn
注意事項注意事項

目前不支援其他主控台命令或 [JavaScript 主控台] 的其他命令。在 Webkit 瀏覽器上，console.dirxml 的行為與 console.dir 相同。

[DOM 總管] 可啟用偵錯 HTML 和 CSS。 Ripple 支援 DOM 總管的 [樣式]、[計算] 和 [配置] 索引標籤中，所提供的功能。

注意事項注意事項

如需偵錯支援的詳細資訊，請參閱已知問題。

在模擬器或裝置上為 Android 偵錯

您可以將 Visual Studio 偵錯工具附加至 Android 模擬器或 Android 裝置，以偵錯在 Android 4.4 上的應用程式。

如果使用 Android 2.3.3 和 4.3 之間的版本，可以安裝 jsHybugger 外掛程式，以啟用 Android 診斷 (DOM 總管、主控台和偵錯)。 此外掛程式會在本機檢測您的程式碼，以啟用 Android 裝置和模擬器上的遠端偵錯，並支援 Android 2.3.3 和更新版本。

在 Android 4.4 上偵錯

  • 在 Visual Studio 中開啟應用程式的情況下，按 F5 鍵。

    如果使用 Android 4.4，可以點擊您程式碼中所設定的中斷點、檢視傳送給 JavaScript 主控台的訊息，以及使用 DOM 總管。

    重要

    Visual Studio 偵錯工具不會在 Android 4.4 模擬器或 Android 裝置中載入第一頁之前所點擊的中斷點處停止。但偵錯工具會在您從 [JavaScript 主控台] 執行下列命令之後的中斷點處停止。window.location.reload()

使用 jsHybugger 外掛程式在 Android 2.3.3-4.3 版上偵錯

  1. 在 Visual Studio 中開啟 Cordova 專案。

  2. 在專案中，建立 plugins 資料夾 (若尚未建立的話) (若要加入資料夾，請在 [方案總管] 中開啟您專案的快顯功能表，並依序選擇 [新增] 和 [新增資料夾]，然後將資料夾名稱設定為 plugins)。

  3. 下載 jsHybugger 外掛程式，並解壓縮其內容。

    注意事項注意事項

    如需此外掛程式的詳細資訊，請參閱 jsHybugger 網站。您可以在沒有授權的情況下使用此外掛程式，但偵錯工作階段限制為兩分鐘。如需無限制進行偵錯，您必須購買 jshybugger 授權。下列指示假設您已購買授權，並將授權檔下載為 jshybugger_license.xml。

  4. 將解壓縮的 jshybugger-plugin-x.x.x 資料夾置於您專案的 plugins 資料夾中。

  5. 將 jshybugger_license.xml 檔案置於您專案的根目錄中。

    以下是專案在 [方案總管] 中的樣子。

    安裝 jsHybugger 後的專案結構

  6. 按 F5 鍵可啟動 Android 模擬器或裝置的偵錯。

    您可以檢視傳送至 [JavaScript 主控台] 的訊息，並使用 [DOM 總管]。

重要

您必須先移除專案中的 jsHybugger 外掛程式和授權檔案，才可發佈應用程式。

使用 Apache Ripple 模擬器或在 Android 4.4 模擬器和裝置上進行偵錯時，外掛程式不會有任何作用，因此在測試期間切換不同的 Android 目標時無須移除。

Android 目前支援下列 JavaScript 主控台命令：

  • console.assert
    console.clear
    console.count
    console.debug
    console.dir
    console.dirxml
    console.error
    console.info
    console.log
    console.time
    console.timeEnd
    console.warn
注意事項注意事項

目前不支援其他主控台命令或 [JavaScript 主控台] 的其他命令。在 Webkit 瀏覽器上，console.dirxml 的行為與 console.dir 相同。

Android 支援 DOM 總管的 [樣式]、[計算] 和 [配置] 索引標籤中，所提供的功能。

警告

適用於 Windows 的其他偵錯和診斷工具，目前不適用於 Android。我們將在後續版本中持續改善 Android 偵錯支援。如需偵錯支援的詳細資訊，請參閱已知問題。

在模擬器或裝置上為 iOS 偵錯

您可以將 Visual Studio 偵錯工具附加至 iOS 模擬器或 iOS 裝置。 支援 iOS 6、7 和 8。

注意事項注意事項

目前不支援將偵錯工具附加至使用 InAppBrowser 外掛程式的 iOS 應用程式。Azure 行動服務外掛程式使用 InAppBrowser 外掛程式，因此也會受到這項限制的影響。

在 iOS 上偵錯

  • 確認您在 Mac 上已安裝 vs-mda-remote 代理程式、啟動代理程式，並將 Visual Studio 設定為連線至代理程式。

  • 如果您要在實際裝置上偵錯，請前往您的裝置並依序選擇 [設定]、[Safari]、[進階]，然後啟用 Web 檢查。

    這麼做即可啟用裝置上的遠端偵錯。 (若要在 iOS 模擬器上偵錯則不需此步驟。)

  • 在 Visual Studio 中開啟應用程式，選取 iOS 做為部署目標，然後按 F5 鍵。

    您可以點擊程式碼中所設定的中斷點、檢視傳送給 [JavaScript 主控台] 的訊息，並使用 [DOM 總管]。

    重要

    Visual Studio 偵錯工具不會在 iOS 模擬器或 iOS 裝置中載入第一頁之前所點擊的中斷點處停止。但偵錯工具會在您從 [JavaScript 主控台] 執行下列命令之後的中斷點處停止。window.location.reload()

iOS 目前支援下列 JavaScript 主控台命令：

  • console.assert
    console.clear
    console.count
    console.debug
    console.dir
    console.dirxml
    console.error
    console.info
    console.log
    console.time
    console.timeEnd
    console.warn
注意事項注意事項

目前不支援其他主控台命令或 [JavaScript 主控台] 的其他命令。在 Webkit 瀏覽器上，console.dirxml 的行為與 console.dir 相同。

iOS 支援 DOM 總管的 [樣式]、[計算] 和 [配置] 索引標籤中所提供的功能。

警告

我們將在後續版本中持續改善偵錯支援。如需偵錯支援的詳細資訊，請參閱已知問題。

偵錯 Windows 8 和 Windows Phone 8

若是 Windows 應用程式，您可以使用用於使用 HTML 和 JavaScript 所建置之任何 Windows 市集應用程式的相同 Visual Studio 偵錯工具。 如需詳細資訊，請參閱 Windows 開發人員中心內的在 Visual Studio 中偵錯 Windows 市集應用程式。

若是 Windows Phone 應用程式，這個先期版本不支援附加 Visual Studio 偵錯工具。 您可以改用 Web 檢查遠端 (weinre)，其將說明於 Microsoft Open Technologies 部落格文章 中。

提示

下一個版本的 Visual Studio Tools for Apache Cordova 即可支援將 Visual Studio 偵錯工具附加至 Windows Phone 8.1 專案。

使用 weinre 進行 Windows Phone 偵錯的另一個方法是，您可以改為將主控台外掛程式加入您的應用程式，並建置應用程式，然後在 Visual Studio 中開啟產生的原生 Windows Phone 8 專案。 您可以在 \bld\Debug\platforms\wp8 資料夾下找到原生專案。 如果已開啟原生專案，可以使用 [輸出] 視窗來檢視主控台輸出。 如需存取原生專案的詳細資訊，請參閱存取原生 Cordova 專案。

警告

重建 Cordova 應用程式時，會覆寫您對原生專案所進行的變更。

請參閱

概念

開始使用 Visual Studio Tools for Apache Cordova

其他資源

常見問題集

已知問題