以下の流れでご説明いたします。

  1. デバッグで使うUIの説明
  2. コンソールの出力結果を確認する方法
  3. 特定の入力に対する実行結果を確認する方法
  4. フロントエンド問題のデバッグ方法について
  5. ライブラリの追加方法について

1. デバッグで使うUIの説明

実行と保存 - 解答をテストします。テスト結果を確認したい場合に利用します。

image (74).png

Note ☝️

実行と保存を押下すると、現在の得点が確認できると共に、現在のコードを保存することが出来ます。

デバッグ - 解答を特定の入力データで実行します。デバッグしたい場合に利用します。

image (75).png

テスト出力 - 「実行と保存」押下後の結果サマリーが確認できます。

image (76).png

Note ☝️

各行はリンクになっており、押下すると各々の詳細を確認できます。

2. コンソールの出力結果を確認する方法

コンソールの出力結果を確認したい場合はデバッグボタンの押下が便利です。

例えば、main関数に以下のようなコード（例はJavaScript使用中）を追加し、

image (77).png

デバッグを押下すると、

image (78).png