Codeを使ってJavaScriptをデバッグする方法を解説します。Code(VSCode)は、デバッグ機能を備えていて対象言語のデバッグ用拡張機能を追加するだけでデバッグができるようになります。VSCodeはほぼIDEで実施できるような機能を備えているので、一般的なエディタといわれるものとは一線を画している気がします。環境を作っていきましょう。JavaScriptは実行環境がブラウザとなるので、VSCodeはブラウザと連携して動作します。ここではChromeブラウザと連携します。デバッグに必要な以下の拡張機能をインストールします。ServerVSCodeの画面左の拡張機能メニューアイコンをクリックし、それぞれの拡張機能を検索してインストールします。Chromeでデバッグします。拡張機能のインストールが終わったら、デバッグするためにVSCodeのワークスペースを開きます。テスト用のフォルダを作ってそこをワークスペースとして開いてもいいです。開いたワークスペースに新規でindex.htmlファイルを作成します。画面の左にワークスペースが表示されているペインで右クリックメニューから「新しいファイル」を選択します。ファイル名をindex.htmlにして空のファイルを作成します。エディタ画面でhtmlと入力すると、自動で記述するフォーマットが選択できるので、「html:5」を選択します。すると、HTML5の基本的な書式が自動で書かれます。lang="ja">にして、head内に以下のscriptを追加しておきます。<h1>デバッグテスト</h1></body>を記述します。⌘O]」を選択します。すると、Chromeブラウザが起動してindex.htmlを表示します。Serverのデフォルトポートは5500となります。次にindex.htmlで動作させるJavaScriptを記述します。先程と同じようにワークスペースに新規ファイルを作成します。今度はmain.jsという名前でファイルを作成します。ファイルの中身は以下を記述します。console.log("Hello!");}そしてindex.htmlを以下に修正します。Server」で表示して、ボタンを押したら、コンソールにHello!!と書かれることを確認してください。それではこのmain.jsをデバッグしたいと思います。VSCodeの画面左にあるデバッグメニューアイコンをクリックしてデバッグ画面を開きます。その画面で表示される「launch.jsonファイルを作成します。」をクリックして、表示される選択メニューから「Chrome」をクリックします。すると、ワークスペース配下に「.vscode」フォルダを作成し、その下にデフォルトのテンプレートが書かれたlaunch.jsonファイルが作成されます。Serverはポート番号が5500なので、8080を5500に書き換えます。]}これでデバッグのための設定は完了です。main.jsをデバッグするためにブレークポイントを設定してみましょう。行番号が表示されている左をクリックするとブレークポイントが設定できます。デバッグ画面に上部にある三角の実行ボタンを押すと、デバッグモードで実行されChromeブラウザが起動します。ブラウザに表示されるボタンを押すと、設定したブレークポイントで処理が止まります。続行、ステップオーバー、ステップイン、ステップアウト、再起動、停止とデバッグ作業をパネルで操作できます。パネルの各ボタンの機能は以下です。次のブレークポイントまでプログラムを続行します。ブレークポイントがなければ最後まで実行します。ステップオーバーのボタンです。ブレークポイントしているところから、行ごとにステップ実行していきます。関数が呼ばれているところにくると、その関数の次の行まで実行します。関数はすぐに実行されます。ステップインのボタンです。ブレークポイントしているところから、行ごとにステップ実行していきます。関数が呼ばれているところにくると、その関数の中に入ってステップ実行していきます。関数の呼び出しであった場合は関数に書かれている命令文を1行ずつステップ実行していきます。ステップアウトのボタンです。ブレークポイントしているところから、行ごとにステップ実行していきます。ステップ実行しているところが、関数の中であった場合、関数が呼ばれているところまで実行して関数を抜け出します。このボタンを押すとプログラムを中断し、もう一度起動し直します。このボタンを押すとプログラムを中断し、停止します。基本的なデバッグ作業はこのパネルで実行可能です。ブレークポイントに止まったその時点での変数などのリソースやスタック情報も確認することができます。デバッグ中ブラウザ側では以下の表示になります。最後にこのようにVSCodeはほぼIDEのように扱うことができます。軽量なIDEといっていいかもしれません。JavaScript以外の言語でも拡張機能を追加することでデバッグできるようになります。VSCode1つでいろんな言語のデバッグができるので試してみてください。CodeAidについて。