以下の流れでご説明いたします。
デバッグで使うUIの説明
コンソールの出力結果を確認する方法
特定の入力に対する実行結果を確認する方法
フロントエンド問題のデバッグ方法について
ライブラリの追加方法について
1. デバッグで使うUIの説明
テスト実行 - 解答をテストします。テスト結果を確認したい場合に利用します。

Note ☝️
テスト実行を押下すると、現在の得点が確認できます。
実行 - 解答を特定の入力データで実行します。デバッグしたい場合に利用します。

コンソール - 「テスト実行」または「実行」押下後のログが確認できます。

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

Note ☝️
各行はリンクになっており、押下すると各々の詳細を確認できます。
2. コンソールの出力結果を確認する方法
コンソールの出力結果を確認したい場合は実行ボタンの押下が便利です。
例えば、main関数に以下のようなコード(例はJavaScript使用中)を追加し、

実行を押下すると、

コンソール上で手軽に実行結果を確認できます🎉

Note ☝️
コンソールに出力するコードを追加した場合、テストが正しく実行されない場合があります。テスト実行時は該当するコードを削除するか、コメントアウトしてください。
3. 特定の入力に対する実行結果を確認する方法
特定の入力に対する実行結果を確認したい場合は、デバッグ機能が便利です。
以下2つの方法ごとにご説明いたします。
既存のテストケース一覧から選択して実行する方法
任意の入力データで実行する方法
1. 既存のテストケース一覧から選択して実行する方法
デバッグ機能を利用するには、まず歯車アイコンのボタンを押下します。

プルダウンメニューを選択します。

実行してみたいテストケースを一覧から選択します。

テストケースにおける入力の内容はこのテキストエリアから確認できます。

実行を押下します。

コンソール上で実行結果を確認できます🎉

2. 任意の入力データで実行する方法
歯車アイコンのボタンを押下します。

テキストエリアを押下します。

入力データを任意に編集します。

Note ☝️
SQL問題の場合は、ここに任意のクエリを追加できます。
SQL問題上でデバッグを希望する場合、SQL問題のデバッグ方法についてを確認してください。
実行を押下します。

コンソール上で実行結果を確認できます🎉

4. フロントエンド問題のデバッグ方法について
Frontend問題上でデバッグを希望する場合、Frontend問題のデバッグ方法についてを確認してください。
5. ライブラリの追加方法について
実装・アルゴリズム問題でライブラリ追加を希望する場合、実装・アルゴリズム問題のライブラリ追加方法を確認してください。
以上です、お疲れ様でした!