2023年10月2日更新
xsbug JavaScriptソースレベルデバッガーは、XSプラットフォームのモジュールやアプリケーションのデバッグをサポートするフル機能デバッガーです。xsbug デバッガーはデバッグビルドをデプロイする際に自動的に起動し、USBまたはWi-Fi経由でデバイスに接続します。他のデバッガーと同様に、xsbug はブレークポイントの設定やソースコード、コールスタック、ローカル変数、グローバル変数の閲覧をサポートします。さらに、xsbug デバッガーはリアルタイムの計測機能を提供し、メモリ使用量の追跡やアプリケーションおよびリソース消費のプロファイリングが可能です。パフォーマンスのホットスポットを特定するための統合されたパフォーマンスプロファイラーもあります。
xsbugのビデオデモはこちらでご覧いただけます。
注意: コンソールログを使用してデバッグを好む開発者のために、xsbugの代わりにxsbug-logを使用することもできます。詳細は以下を参照してください。
図1はマシンタブビューを示しています。ウィンドウの上部には、xsbugに接続されているすべてのXS仮想マシンのタブがあります（下の画像で赤で強調表示されています）。オレンジ色の丸は「停止した」仮想マシンを示しています。タブを選択して、仮想マシンがどこで、なぜ停止したのかを確認してください。
注意: バーチャルマシンはブレークポイント、
debuggerステートメント、または例外で停止したときに「停止した」とされます。
図 1. マシンタブビュー
左ペインには以下が表示されます：
- Kill
、Break 
、Run 
、Step 
、Step In 
、Step Out 
ボタン。対応するメニューアイテムとショートカットも Debug メニューにあり、バーチャルマシンを制御するために使用します。 - Profile パネル。これを使用して パフォーマンスプロファイラ をアクティブにし、スクリプト内のパフォーマンスのホットスポットを特定します。
- Instrumentation パネル。これを使用してメモリ使用量を追跡し、リアルタイムでリソース消費を監視します。
- Calls スタックパネル。このパネルの行を選択して、そのコールが行われたソースコードの行を表示し、そのスタックフレームのローカル変数を調べます。
- Locals、Modules、および Globals パネル。これらを使用してローカル変数とグローバル変数の値を調べ、どのモジュールがロードされているかを確認します。辞書と配列は名前の隣に
アイコンがあります。オブジェクトのプロパティや配列のアイテムの値を調べるには、行を展開するために名前をタップします。
右側のペインには以下が表示されます：
- 選択されたファイル。
- コンソール。各仮想マシンには独自のコンソールがあります。
- JavaScriptの式を評価するためのフィールド。このフィールドは「EVAL」とラベル付けされており、ブレークポイントで停止している場合にのみ利用可能です。詳細はインタラクティブコンソールを参照してください。
図2はBreakpointsタブのビューを示しています。最初のタブ（画像の赤で強調表示されています）を選択して、ファイルやフォルダを閲覧および検索し、ブレークポイントを設定または解除します。仮想マシンがxsbugに接続されていない場合でも、ブレークポイントを編集できます。
ブレークポイントを無効/有効にするには、Breakpointsタブでブレークポイントをクリックし、デバッグメニューでブレークポイントを無効にするまたはブレークポイントを有効にするオプションを選択します。
xsbugにファイルやフォルダを追加するには、FileメニューのOpen File...およびOpen Folder...項目を選択するか、ファイルやフォルダをxsbugウィンドウにドラッグアンドドロップします。
xsbugからファイルやフォルダを削除するには、ファイルやフォルダのパネルのヘッダーにある閉じる 
ボタンを使用します。
図 2. Breakpointsタブのビュー
左ペインには以下が表示されます：
-
ブレークポイント自体。このパネルの行をタップしてブレークポイントの位置を確認します。各ブレークポイント行には、ブレークポイントに使用される機能に対応するアイコンが表示されます - 条件付きブレークポイントのための疑問符、ヒットカウントブレークポイントのためのタリー、トレース式のための "$" プロンプト。このパネルのヘッダーには2つのアイコンがあります。最初の「f」ボタンは関数名ブレークポイントを設定するためのものです。2つ目は全てのブレークポイントをクリアする ゴミ箱
ボタンです。 -
検索パネル。これを使用して、xsbugに追加されたすべてのフォルダ内のすべてのファイルを再帰的に検索します。
-
空またはそれ以上のファイルおよびフォルダパネル。フォルダ行をタップして閲覧し、ファイル行を選択してファイルを表示します。
右ペインには以下が表示されます：
- 選択されたファイル。
- xsbugログ。これは、接続されたすべての仮想マシンのコンソールの出力を統合します。ログは仮想マシンの切断後も残ります。
図3. はファイルペイン（赤で強調表示）を示しています。BreakpointsやCallsパネルの行を選択するか、フォルダーパネルでファイルを選択すると、ソースコードが右ペインに開きます。
図3. ファイルペイン
ペインのヘッダーでは：
- パスの部分をタップすると、FinderやExplorerでフォルダが開きます。
- 編集
ボタンはファイルをデフォルトのエディタで開きます。 - 検索
ボタンはヘッダーを拡張してファイルを検索するフィールドを表示します。 - 閉じる
ボタンはファイルペインを閉じます。
ブレークポイントを編集するには、ファイルペインでブレークポイントの矢印をタップしてエディタを表示します。
ブレークポイントは、ブレークポイントの矢印を上下にドラッグすることで移動できます。
ブレークポイントは、ブレークポイントの矢印を左にドラッグすることで削除できます。
図4. はPreferencesペインを示しています。xsbug メニューから Settings 項目を選択すると、Preferencesパネルが右ペインに開きます。
図 4. Preferencesパネル
Break Preferencesパネルは、すべての仮想マシンに対して 開始時に中断 と 例外時に中断 のフラグを切り替えます。
Instruments Preferencesパネルでは、すべての仮想マシンが実行中の間に自動的にINSTRUMENTSパネルを表示し、仮想マシンが中断したときに隠すかどうかを選択できます。
Network Preferencesパネルは、xsbug がリッスンしているインターフェースを表示し、xsbug が使用しているポート番号を変更するための編集フィールドを提供します。デフォルトのポート番号は 5002 です。ポート番号を変更すると、接続されている仮想マシンは停止します。
対話型コンソールは、ブレークポイントで停止したときにファイルパネルの下部に表示されます。Eval式は多様な方法で使用できます：
- 値を表示する：
this,this.prototype,x,this.#ref - 計算を行う：
x + y,this.bounds.width * this.bounds.height - 関数を呼び出す：
this.update(),Math.round(x) - 値を設定する：
this.x = 12,globalThis.keep = this,this.#ref = null
Evalフィールドに入力されたJavaScript式は、現在のブレークポイントのコンテキストで評価されます。評価コンテキストは、Callsパネルで選択されているスタックフレームによっても定義され、表示されるローカル変数と this の値が変わります。
式がJavaScriptの機能を使用していて、XSのstrip機能を使用してエンジンのサイズを最小限に抑えることで最適化されている場合、コンソールには "dead strip" が表示されます。
式は、いくつかの制限付きでオブジェクトのプライベートフィールドにアクセスできます。まず、プライベートフィールドへのアクセスはスコープに基づいています。現在のスコープがプライベートフィールドにアクセスできない場合、Eval式もアクセスできません。さらに、現在の関数によって参照されているプライベートフィールドのみが式によってアクセスされる可能性があります。
xsbugにはJavaScriptコードのパフォーマンスのホットスポットを特定するのに非常に価値のある統合パフォーマンスプロファイラーがあります。このプロファイラーは、組み込みデバイスターゲットとシミュレーターで実行されるJavaScriptに対応しています。
これらのリソースを使って始めましょう：
- Moddableブログにおけるプロファイラーに関する上級レベルの紹介
- XSプロファイラーがパフォーマンスのホットスポットを特定し、最適化をガイドし、パフォーマンス改善を検証するのにどのように使用されたかを示すステップバイステップのウォークスルー
- XSパフォーマンスプロファイラーに関する技術的詳細、実装注釈、表示される時間値の計算方法を含む
traceを使用する際に、コンソール/ログペインで出力を行ごとに色付けすることができます。行の始めにタグを使用します。利用可能なタグは以下の通りです：
<info><warn><error>
使用される色は、選択されたDark/Lightテーマに依存します。
例えば、
trace('This is a standard text line\n');
trace('<info>This is an "<info>" line\n');
trace('<warn>This is a "<warn>" line\n');
trace('<error>This is an "<error>" line\n');
trace('<info>You can use multiple tags in a single trace\n<warn>As long as the line ');
trace('starts with the tag\n');
xsbugは、Moddable SDKに含まれるテストやtests262などのユニットテストを実行するために使用することができます。xsbugを使用してテストする方法については、Moddable SDKのテストドキュメントを参照してください。
xsbug-logはxsbugの代替品です。グラフィカルユーザーインターフェースの代わりに、プロジェクトの出力のシンプルなコンソールログです。xsbug-logは、ディスプレイを持たないデバイス（いわゆる「ヘッドレス」デバイス）で実行する場合や、コンソール出力のみでデバッグを好む開発者に便利です。
xsbug-logはNode.jsで実装されています。使用するには、まず依存関係をインストールする必要があります：
cd $MODDABLE/tools/xsbug-log
npm installmcconfigでxsbug-logを使用するには、コマンドラインで-dの代わりに-dl（デバッグログ用）を使用します。
mcconfig -dl -m -p esp32/moddable_two