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

  • このエントリーをはてなブックマークに追加

はじめに

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

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

ゼロからはじめるには?

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

拡張機能からdebbgger for chromeをインストールします。拡張機能は調べなくてもたぶんわかります。

この図にもありますが下準備としてvscodeとnode.jsというソフトをインストールしておく必要があります。jsonファイルというものがあり、これははじめてjavascriptコードを実行すると自動的に作成されます。→ここが一番わかりにくいと思いますが、頑張ってください。jsonファイルができるまでのながれは以下のとおりです。

問題は、一番上の図にあるjsonファイルの書き換えです。これが非常にわかりづらいと思いますが、以下の画像を見てください。

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

jsonファイルの書き換えは以下の記事を参考に

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

非常にわかりくいと思いますが、以下の記事がdebugger for chromeについて体系的にまとめられています。ローカルのほかにも色々できるようです。

Visual Studio Codeを使いこなせ!
https://ics.media/entry/11356/2

 
  • このエントリーをはてなブックマークに追加
     

SNSでもご購読できます。

コメントを残す

*

CAPTCHA