以下の流れでご説明いたします。
デバッグで使うUIの説明
コンソールの出力結果を確認する方法
特定の入力に対する実行結果を確認する方法
フロントエンド問題のデバッグ方法について
ライブラリの追加方法について
1. デバッグで使うUIの説明
実行と保存 - 解答をテストします。テスト結果を確認したい場合に利用します。
Note ☝️
実行と保存を押下すると、現在の得点が確認できると共に、現在のコードを保存することが出来ます。
デバッグ - 解答を特定の入力データで実行します。デバッグしたい場合に利用します。
テスト出力 - 「実行と保存」押下後の結果サマリーが確認できます。
Note ☝️
各行はリンクになっており、押下すると各々の詳細を確認できます。
2. コンソールの出力結果を確認する方法
コンソールの出力結果を確認したい場合はデバッグボタンの押下が便利です。
例えば、main関数に以下のようなコード（例はJavaScript使用中）を追加し、
デバッグを押下すると、
手軽に実行結果を確認できます🎉
Note ☝️
出力するコードを追加した場合、テストが正しく実行されない場合があります。テスト実行時は該当するコードを削除するか、コメントアウトしてください。
3. 特定の入力に対する実行結果を確認する方法
特定の入力に対する実行結果を確認したい場合は、デバッグ機能が便利です。
以下2つの方法ごとにご説明いたします。
既存のテストケース一覧から選択して実行する方法
任意の入力データで実行する方法
1. 既存のテストケース一覧から選択して実行する方法
デバッグ機能を利用するには、まず歯車アイコンのボタンを押下します。
プルダウンメニューを選択します。
実行してみたいテストケースを一覧から選択します。
テストケースにおける入力の内容はこのテキストエリアから確認できます。
実行を押下します。
テスト出力上で実行結果を確認できます🎉
2. 任意の入力データで実行する方法
歯車アイコンのボタンを押下します。
テキストエリアを押下します。
入力データを任意に編集します。
Note ☝️
SQL問題の場合は、ここに任意のクエリを追加できます。
SQL問題上でデバッグを希望する場合、SQL問題のデバッグ方法についてを確認してください。
実行を押下します。
テスト出力上で実行結果を確認できます🎉
4. フロントエンド問題のデバッグ方法について
Frontend問題上でデバッグを希望する場合は、プレビュー画面からデバックを行うことができます。
「新しいタブで開く」→ブラウザ上でDevToolsを開く
⚠︎「新しいタブで開く」でタブを開いている状態で回答のコードを変更した場合、出力結果タブの方をリロードしたら変更が反映されます。
5. ライブラリの追加方法について
実装・アルゴリズム問題でライブラリ追加を希望する場合、実装・アルゴリズム問題のライブラリ追加方法を確認してください。
以上です、お疲れ様でした！