SuperApp:デバッグ

実行方法

• HBuilderX UI からの実行

  HBuilderX では、トップメニュー、ツールバーの実行ボタン、またはキーボードショートカットの 3 つの方法でアプリケーションを実行できます。

  1. トップメニューから [実行] > [モバイルアプリプレイグラウンド] > [Android 実行] または [iOS 実行] を選択します。

     

     説明

     HBuilderX には、内蔵のエミュレーターは含まれていません。デバイスが検出されない場合は、Android Studio または XCode を使用してエミュレーターをインストールしてください。

  2. ツールバーの 実行ボタンをクリックし、[Android で実行] または [iOS で実行] を選択します。

     

     説明

     ツールバーの実行ボタンをクリックすると、メニューが表示されます。このメニューはカスタマイズ可能です。[メニューのカスタマイズ] を使用して、あまり使用しない構成を折りたたむことができます。

  3. Ctrl+R ショートカットを使用します。

     表示されるメニューは、キーボードでの選択もサポートしています：

     • Enter キーを押すと、最初の項目が選択されます。

     • 数字キーを押すと、対応する項目をすばやく選択できます。

       メニューが表示されない場合は、現在開いているファイルが uni-app プロジェクトの一部ではない可能性があります。uni-app プロジェクト内のファイルを開いて、再度お試しください。

• vue-cli コマンドライン

  npm run dev:%PLATFORM%
  npm run build:%PLATFORM%

有効な %PLATFORM% の値については、公式の uni-app ドキュメントをご参照ください。

デバッグ方法

uni-app を起動します。表示されたウィンドウで、右上の アイコンをクリックするか、[デバッグ] を選択します。

プラットフォームツールを使用したデバッグ

uni-app プロジェクトを AliPay や WeChat などの他のプラットフォームでミニアプリとして実行する場合、それらのネイティブ開発ツールを使用できます。これらのツールのコンソールには、コンソール出力やネットワークリクエストなどの情報が表示されます。

ページスタイルのデバッグは、標準的な Web プロジェクトのデバッグと似ています。要素を選択して、対応するノードとスタイルを検査します。次の図をご参照ください。

JavaScript をデバッグするには、Sources タブに切り替えます。ソースマップを使用して webpack 内の正しいディレクトリに移動し、ページの JavaScript ファイルを選択します。JavaScript コードが圧縮されている場合は、整形ボタン {} をクリックしてコードをフォーマットします。次の図をご参照ください。