Help us understand the problem. What is going on with this article?

MonacaクラウドIDEでブレークポイントをはってデバッグする方法

More than 1 year has passed since last update.

はじめに

Monacaでスマホアプリを作るときには
スマホ実機でデバッグできるMonaca Debugerという
便利なアプリケーションがあります。

またクラウドIDEで開発するときは
ブラウザ内のプレビュー内で簡易的なデバッグが可能です。
でもデバッグ機能としては、やや物足りなく感じることがあるかもしれません。

しかし、Chromeのデバッグ機能を合わせることで、
Monacaで作ったアプリの検証がグッと楽になる事をご存知ですか?

3つの便利ポイント

便利ポイント①
画面の構成要素検証が楽

便利ポイント②
ブレークポイントを貼ることができる

便利ポイント③
ローカルストレージの内容を確認できる

デバッグやり方

--まずは
ChromeからクラウドIDEを開きます。

--便利ポイント①の方法
IDE内のプレビュー画面から、
見たい要素について右クリック⇒「検証」をクリック

キャプチャ1.JPG

Chromeが別ウィンドウで開き、
HTMLとスタイル情報が表示される

キャプチャ2.JPG

スタイルの値を変更すると、プレビューにも反映されるので、
細かいパーツの位置を調整するときなどに便利!

キャプチャ3.JPG

--便利ポイント②の方法

Chromeデバッガーのメニューから「Sources」を選択

キャプチャ4.JPG

左側のツリーから「ide_preview-iframe(・・・)」⇒「PreviewFrame(・・・)」⇒「preview-・・・」⇒「www」⇒対象ソースを選択
(・・・部には何らか文字が入ります)
これでソースコードが表示されます。
(ツリーが閉じている場合は右向き▼をクリックで開く)

キャプチャ5.JPG

エディターの左側の行番号を右クリック⇒「Add Breakpoint」をクリックで
ブレークポイントを貼ることができる。

これで該当処理が実行されるときに、処理がブレークするようになります。
変数などにマウスカーソルを当てると格納されている値が見れます。
再開ボタンをクリックすれば処理再開します。

これでかなりデバッグも捗ります!

キャプチャ6.JPG

--便利ポイント③の方法

Chromeデバッガーのメニューから「Application」を選択

キャプチャ7.JPG

左側のStorageツリーから「Local Storage」⇒「https://preview-・・・」を選択。
すると右側に現在のストレージに保存されている内容が表示されます。

キャプチャ8.JPG

Valueの値を変更したり、削除したりできます。
とっても便利!

さいごに

これらのようにChromeのデバッグ機能を使うことで、
Monacaで製作しているアプリのデバッグ効率をかなり上げることができます。
他にもChromeの便利デバッグ機能があると思いますので、
是非、色々試してみてくださいね!

Task-Force
私たちタスクフォースは、システム開発の専門企業です。 高度な技術力、幅広い対応力で邁進しています。
http://www.taskforce.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした