web-dev-qa-db-ja.com

ionic：表示されたコンソールログを表示する場所

私はionic私は ionic framework文書 を習得するためにフォローしています。

これが私のメソッドのコードです：hello-ionic.ts

_  openActionSheet(){
    let actionSheet=this.actionsheetCtrl.create(
    {
        title: 'Modify your album',
        cssClass: 'page-hello-ionic',
        buttons:[
          {
            text: 'Delete',
            role: 'destructive', //will always sort to be on top
            icon: !this.platform.is('ios') ? 'trash' : null,
            handler: () => {
              console.log('Delete clicked');
            }
          },
          {
          text: 'Play',
          icon: !this.platform.is('ios') ? 'arrow-dropright-circle' : null,
          handler: () => {
            console.log('Play clicked');
          }   
        },
        {
          text: 'Favorite',
          icon: !this.platform.is('ios') ? 'heart-outline' : null,
          handler: () => {
            console.log('Favorite clicked');
          }
        },
        {
          text: 'Cancel',
          role: 'cancel', // will always sort to be on the bottom
          icon: !this.platform.is('ios') ? 'close' : null,
          handler: () => {
            console.log('Cancel clicked');
          }
        }
      ]});
    actionSheet.present();
  }
_

コードは正常に動作します。しかし、どこにconsole.log()が出力されているかを知りたいです。誰かが私を助けてくれますか？

ionic-frameworkconsole.log
2
Riddhi

コンソールログを確認するには、以下のコマンドの後にブラウザを使用できます。

ステップ1：$ionic serve（ローカルホストでアプリを実行します）

ステップ2：アプリが実行されているそれぞれのブラウザー（chrome、safariなど）で正しい+クリックおよびinspect以下のスクリーンショットのようにアプリ。

enter image description here

ステップ3：右側のウィンドウと左側のアプリ画面にHTML要素を含むウィンドウが表示され、右側で設計したコードを確認できます。

enter image description here

ステップ4：右側のウィンドウのトップバーに[コンソール]メニューオプションがあります。それをクリックすると、アプリが見つかるコンソールが表示されますlogsまたはerrorまたはwarningwhich ionic generated。

enter image description here

enter image description here

編集：

ために real-deviceまたはemulatorまたはgenymotionコンソールログの手順とスクリーンショットを確認してください。

ステップ1：このコマンドを実行して、実際のデバイスまたはエミュレーターでアプリを実行します

$ionic cordova run Android

ステップ2：デバイスまたはエミュレータでアプリを正常に起動した後、Chromeブラウザに移動し、「右+クリック」をクリックして「検査」をクリックすると、画面下部に表示されますブラウザ。

enter image description here

ステップ3：「リモートデバイス」をクリックすると、接続されている実際のデバイスが表示されますまたはエミュレータリスト。

そのデバイスリストから、そのデバイス名の右側にある「検査」ボタンをクリックします（スクリーンショットを確認してください）デバイスミラーで新しいウィンドウが開きます。これで、すべてのコンソールがこのデバッガーで再生されます。

enter image description here

enter image description here

これがアプリのデバッグに役立つことを願っています。

5
CodeChanger

Ionicを使用してモバイルでウェブサイトをテストするとき、私は通常Remote devicesウィンドウ、モバイルを選択する必要があるため、モバイルブラウザーで多数のタブを選択し、次にinspectを選択して、モバイルで更新した後、切断します...

実際のデバッグ目的では、Ionic with -cのように、何も接続されていない状態でターミナルにコンソールが表示されます。

my-server$ ionic serve -c --no-open --address 192.168.1.112

[INFO] Development server running!
       Local: http://192.168.1.112:8100    
       Use Ctrl+C to quit this process

私のモバイルデバイスでの参照先： http://192.168.1.112:81

ログが実行されるターミナルに表示されますIonic cli：

[app-scripts] [09:49:42]  console.log: Angular is running in the development mode. Call enableProdMode() to enable the production
[app-scripts]             mode.
[app-scripts] [09:49:42]  console.log: cookieEnabled: true
0
Ricky Levi