visual studio codeでjavascriptのwebテストもできるようにする

ヴィジュアルスタジオには、visual studio 2017 と visual studio codeというものがあります。visual studio code(以下vscode)は、総合開発環境ではなく、あくまでエディターという位置づけだそうです。ですが、vscodeは総合開発環境のように使うことができます。

この記事はjavascriptのwebテストをvscodeで行う方法を書いています。

VsCodeでJavascriptのWebテストを行う方法

ながれは以下のマップどおりですが、たぶんかなりわかりにいと思いいます。

vscode javascript

VsCodeとnode.jsをインストールしておく

VsCodeでJavascriptのWebテストを行う前提として「VsCode」「node.js」をインストールしておく必要があります。

それぞれの入手先は下記のとおりです。

VsCode ダウンロード | IDE、Code、Team Foundation Server | Visual Studio
node.js Node.js

VsCodeの拡張機能から「debugger for chrome」をインストールする

拡張機能からdebugger for chromeをインストールします。

debbuger for chrome

具体的まずVsCodeを起動します。VsCodeがたちあがったらピンク色の部分のボタンをクリックします。次に入力欄に「debugger fro chrome」と入力します。すると候補が出現すると思いますので、「debugger for chrome」をインストールします。

jsonファイルを編集する

jsonファイルというものがあり、これははじめてjavascriptコードを実行すると自動的に作成されます。→ここが一番わかりにくいと思いますが、頑張ってください。jsonファイルができるまでのながれは以下のとおりです。

  1. VsCodeとnode.jsをインストールしたら、なんでもいいのでjavascriptを実行する。
  2. すると「launch.json」というファイルが自動作成される
  3. 「launch.json」ファイルを編集してWebテストができるようにする
  4. launch.jsonファイルの編集がおわったら「デバッグの種別」を変更する

launch.jsonファイルの編集については下記の画像をみてください。

launch.jsonファイル

デバッグの種別とは、上のボックスから選択できます。そして→jsonファイルは右のような内容になっており、jsonファイルを書き換えなければ、デバッグ種別にlanch local fileという項目は現れないということです。

jsonファイルに追加する内容は下記のとおりです。(わたしの場合はこんなかんじです)

{
// デバッグ設定の名称
“name”: “Launch local file”,
// デバッグ種別を指定(chrome/node/monoなど)
“type”: “chrome”,
// lanunchまたはattachを指定
“request”: “launch”,
// 読み込むHTMLファイルを指定(プロジェクトからのパスを指定)
“file”: “${file}”
}

debugger for chromeという機能をインストールして、jsonファイルを書き換えれば、webテストができるようになります。「lanch local file」はローカルのhtmlファイルをテストするためのデバッグ種別です。

□参考リンク
Visual Studio CodeでのJSのデバッグ方法(2018年版) – ICS MEDIA