FC2ブログ

スマフォのアプリを作りたい(5):React Native環境でデバッガを動かしてみる

   プログラミング [2020/01/09]
前回の「続・続React Native環境構築」までで、何とかエミュレータを起動してサンプルプロジェクトを実行(表示)させるところまで来ました。

その続きになります。

エミュレータ上のサンプルプロジェクトの表示内容を見ると、何となくReact Nativeのチュートリアルになっているようです。
20191224_9.jpg

さるなので言われるがままやってみます。
(英語表記なんで、きっと誤解多いけど。)
※それと、後で出てきますが、デバッグするためにはChromeのインストールが必要です。

1)最初の説明「Step One」で、「App.jsを編集してみろ」みたいなことが書かれていてます。
プロジェクトフォルダ直下にApp.jsというソースがありました。
中身は、ほとんどチンプンカンプンですが、画面に表示している内容が記述されています。
「App.js」と書いてあるところを「app.js」に変更して、セーブしてみました。

2)エミュレータ上の説明の続きは「See Your Changes」とあり、「Rキーを二度叩け」と書いてあります。
二度叩いてみると、「Step One」でやった表示内容の変更が反映されました。

3)その続きの説明で「Debug」とあり、「CmdかCtrl+mか・・・」とあります。
[Ctrl]+[M]を押してみましたが、・・・ブラウザに何やら出ました。

オンラインで何かするのか???・・・・・


以降、図の表示が小さくて見えない場合は、クリックすると文字が見える程度の画像で表示すると思います。

4)ブラウザ上には『デベロッパーツールを起動するから[Ctrl]+[Shift]+[J]を押せ』と書いてあるような。
(最初、Ctrl+Jかと思ったが"+"ではなくよく見たら上向き矢印マークだった。紛らわしい。)
押したらブラウザ(Chrome)のデベロッパーツールの画面がタブ上に表示されます。
20200109_1.jpg

ツール上のConsoleタブのメインのエリアに「running "(プロジェクト名)" with ・・・」と出るはずです。
出てない場合は、エミュレータ側でのデバッグ開始指示がなされていないのかもしれません。
さるが最初にやったときは出てなかった。なので以下5)以降の手順が続きます。

ちなみに、さるはこのデベロッパーツールの使い方はこの時点では全く知りません。
ツール上のSourceタブを選択して、表示されるツリーから.jsを舐め回してみてみたが、どれがエミュレータ上に表示されているメインのソースなのか判別できませんでした。App.jsとかは見当たりません。???

5)一旦エミュレータにフォーカスを戻して、もう一度[Ctrl]+[M]とゆっくり押してみたら、エミュレータ上に以下の項目のメニューが表示されました。
----------------------------------------
・Reload
・Debug
・Change Bundle Location
・Toggle Inspector
・Disable Fast Refresh
・Enable Sampling Profiler
・Show Perf Monitor
・Settings
----------------------------------------

「Debug」をクリックします。(次回このメニューを表示したときには「Stop Debugging」になってます。)

6)ブラウザ上のSourceタブのツリーに「DebuggerWorker.・・・」と表示されています。
展開してみると、「localhost:8081」下の4つ目くらいのファイルアイコンがApp.jsでした。
20200109_2.jpg
これで、デバッグできるんじゃね?

7)App.jsをクリックして、真ん中のエリアにソースを表示させます。
ソース上の以下の「return(」とコーディングされている行の行番号をクリックします。
----------------------------------------

const App: () => React$Node = () => {
return (

----------------------------------------

行番号のクリックが、ブレークポイントの設定のようです。

ブレークポイントに設定されると、右側エリアの「Breakpoints」にその状況が表示されます。
ちなみに、右上の「横になった杭型に斜線が引かれた」アイコンは、ブレークがEnableの状態のようです。これをクリックするとDisable(停止せずに進む)になるんじゃないでしょうか。隣のPauseマークはException発生時に止めるかどうかのよう。

8)エミュレータに戻って、[Ctrl]+[M]&「Reload」をクリックする。
ブラウザ側にフォーカスが移って、以下の表示となっている。
20200109_3.jpg
ブレークしたみたいです。

右上部の各マーク(アイコン)が、Go/Pause、Step Over、Step In、Step Out、Step の意味ですね。

ブラウザのデベロッパーツールを使うとは意外でした。

9)参考サイトにはconsole.logを画面に表示するようなことが書いてありました。
https://qiita.com/takaishota/items/96802dc7e522aeba058b
手順としては、コマンドプロンプトから「react-native run-android」とやってアプリを起動してから、
(別のコマンドプロンプトを開いて、カレントをプロジェクトフォルダにして、)「react-native log-android」とやればいいだけのようです。
何やらメッセージがバラバラと出ます。


以上、これでデバッグもなんとなくできる感じがしてきました。
が、さるはまだスクリプトの内容を全く理解できてません。
ソース構成というか、動作シーケンスがどんな感じで、どんなリソースファイルがあるのかすら分かってません。


Reactの場合の説明ですが、以下のサイトでは、index.html→index.js→App.js→・・・となっていると説明がありました。
https://qiita.com/take9021/items/c363d15bd5fdc3b0109c

React Nativeだと.htmlはなさそうなので、たぶん
index.js→App.js→・・・なのだと思います。
先のApp.jsの中でブレークしたときに、「Call Stack」情報を見たら、index.jsしかありませんでした。

そろそろ、jsコードの中身を理解したいのですが、長ーーーくなりそうなので一旦切ります。

では、続きはまたそのうちに。
m(__)m
スポンサーサイト





コメントの投稿

非公開コメント

カレンダー
01 | 2024/02 | 03
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 - -
プロフィール

さるもすなる

Author:さるもすなる
さるです。別HPサイト「さるもすなる」から侵食してきました。 山菜/きのこ、それとタイトルにしたPPバンド籠のことをメインに徒然に・・・・暇を持て余したさるの手仕事:男手芸のブログってことで。

最新記事
最新コメント
月別アーカイブ
カテゴリ
天気予報

-天気予報コム- -FC2-
本家のHPのトップ
山菜や茸の話です
PPバンドの籠作品と作り方です
投稿をお待ちしております



PVアクセスランキング にほんブログ村 にほんブログ村 ハンドメイドブログへ



マニュアルのお申し込み



検索フォーム
リンク
RSSリンクの表示
ブロとも申請フォーム

この人とブロともになる

QRコード
QR