読者です 読者をやめる 読者になる 読者になる

モーリーのメモ

プログラミングやCG作成等、アプリ開発を中心に情報を収集中!

デバッグ環境について:Cocos Creator

 『Cocos Creator』単独では、コードエディタに構文チェックがあるぐらいで、プレビューを行ってもあまり詳細なデバッグ情報が得られません。
 実行時エラーの場合は、実行画面が止まるだけです。
 これではまともにデバッグ出来ず困ってしまいます。
 が、ちゃんと詳細なデバッグ情報を得る方法はあります。

使用環境

 私が使用している環境です。

  • Mac OS X El Capitan Version 10.11.4
  • Cocos Creator Version 1.0
  • ブラウザ:Google Chrome Version 49.0.2623.112 (64-bit)

デバッグ環境について

 私はデバッグ
 『Browser』でプレビュー + 『Chrome』の『デベロッパーツール』
 を使用しています。
 
 『HelloWorld』プロジェクトの『HelloWorld.js』に次のように書いて、わざとエラーを発生させてみます。

    onLoad: function () {
        this.label.string = abc; // 未定義のabcをいきなり代入。
    },

 『Browser』でプレビューすると、『Chrome』の『デベロッパーツール』では、次のように表示されます。
f:id:mmorley:20160414000239p:plain:w500
 画面の右側が『デベロッパーツール』です。(左側は実行画面ですが、エラーのため起動出来ず、読込中のまま止まっています。)
 『デベロッパーツール』の画面の下側の『Console』では、
 『Uncaught ReferenceError: abc is not defined』のようにエラーの内容が表示され、その行の右端の『HelloWorld.js:18』で場所がわかります。
 『HelloWorld.js:18』をクリックすると、中央のウインドウで該当箇所が表示されます。
 
 『Cocos Creator』のエディタには、構文のチェック機能はありますが、実行時のエラーは分からないですし、ブレークポイントを貼ることも出来ません。
 また、『Cocos Creator』の『Console』パネルにも、詳細なデバッグ情報は表示されません。
 『Chrome』の『デベロッパーツール』では、ブレークポイントも貼れますし、ステップ実行も出来ます。
 変数のウォッチ機能もあります。

自作のスクリプトの場所

 自作のスクリプトは下図の場所にあります。
f:id:mmorley:20160414010056p:plain

ブレークポイント

 ブレークポイントを貼るには、行番号をクリックします。
 f:id:mmorley:20160414010542p:plain:w400
 ブレークポイントを外すには、再度クリックします。
 実行の再開や、ステップ実行は画面右上にある下図のボタンで行います。
 f:id:mmorley:20160414011902p:plain

ウォッチ機能(Wath Expression)

 画面右上の『Watch』の『+』ボタンを押して、中身を見たい変数名を入力します。
f:id:mmorley:20160414012332p:plain
 すると、ブレークポイント等で停止した時の、変数の中身を見ることが出来ます。
 f:id:mmorley:20160414012928p:plain

その他

 全部は把握していませんが、他にもいろいろと、デバッグに役立つ機能がありそうです。
 f:id:mmorley:20160414013302p:plain

プレビューの更新

 『Browser』プレビューを実行中の場合、『Cocos Creator』で変更内容を保存する度に、自動的にプレビューも更新されます。
 自分のタイミングで、プレビューを更新したい場合は、プレビューボタンの横の更新ボタンを押します。
 プレビューボタンのほうだと、新しくページが開いてしまいます。

『Browser』でプレビューを『Chrome』で実行する方法

 『Browser』でプレビューした場合、デフォルトのブラウザで実行されます。
 私は普段から『Chrome』を使っているのでその流れで使用していますが、他のブラウザにも同様のツールがあるようですので、使いやすい物を選んで下さい。
 『Chrome』をデフォルトのブラウザを変更する場合は、
 『システム環境設定』f:id:mmorley:20160414003157p:plainの画面の左上の『一般』f:id:mmorley:20160414003210p:plainをクリックします。
 開いた画面の中央の『デフォルト Webブラウザ』で『Google Chrome』を選択します。
 f:id:mmorley:20160414003413p:plain:w400

Chrome』のデベロッパーツールを起動する方法

 プレビューで起動したページを開き、キーボードの『option + command + i』を押します。
 f:id:mmorley:20160414161743p:plain
 または、
 『Chrome』の右上の設定ボタンをクリックし、『その他のツール』-『デベロッパーツール』をクリックします。

あとがき

 『Simulator』でプレビューした場合は、実行時エラーは画面が真っ黒になるだけなのでどうしようかと思いましたが、『Chrome』の『デベロッパーツール』で詳細なデバッグ情報を得ることが出来ました。

広告を非表示にする