SuperApp:デバッグ

実行方法

• HBuilderX を使用して uni-app ミニアプリを実行する

  HBuilderX では、次の 3 つの方法のいずれかを使用して uni-app ミニアプリを実行できます。

  1. 上部のナビゲーションバーで、[実行] > [モバイルアプリプレイグラウンド] > [android 実行] または [ios 実行] を選択します。

     

     説明

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

     

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

     

     説明

     ツールバーの実行ボタンをクリックした後に表示されるメニューの項目はカスタマイズできます。

  3. Ctrl+R ショートカットを使用して uni-app ミニアプリを実行します。

     ショートカットを使用した後に表示されるメニューでは、キーを押して項目を選択できます。

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

     • 数字キーを押すと、その数字に対応する項目が選択されます。

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

• vue-cli を使用して uni-app ミニアプリを実行する

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

%PLATFORM% の値の詳細については、公式チュートリアル をご参照ください。

デバッグ方法

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

他のプラットフォームの開発ツールを使用して uni-app ミニアプリをデバッグする

WeChat や AliPay など、他のプラットフォームの開発ツールを使用して uni-app ミニアプリを実行する場合、これらの開発ツールのコンソールで、コンソールやネットワークリクエストなど、ミニアプリに関する実行中の情報を表示できます。

対応する要素を選択することで、ノードとスタイルを表示できます。これは、一般的な Web プロジェクトのデバッグに使用される方法と同じです。次の図は例を示しています。

JavaScript ファイルをデバッグするには、[ソース] タブをクリックし、ソースマップの対応するディレクトリでデバッグする JavaScript ファイルを選択する必要があります。 JavaScript コードが圧縮されている場合は、中括弧（{}）をクリックしてコードを表示します。次の図は例を示しています。