Visual Studio CodeでJavaScriptのプログラムをデバッグする環境を準備する

2019年3月14日

なんかこのブログ環境構築の話が多い気がする。
ただ、一番はまる場所も環境構築だし、すぐに忘れるから備忘録として残しておいたほうが自分のためになる。
っということで、こっからはVisual Studio CodeでJavaScriptのデバッグをするための設定方法を書いていく。

1. 前提条件
2. なんで仮想環境を準備したか
3. やったこと
4. デバッグのやり方

前提条件

仮想環境はVagrantを使用する。
仮想環境で使うOSはこれ
CentOS Linux release 7.6.1810 (Core)
サーバは Apache

なんで仮想環境を準備したか

そもそもローカルでJavaScriptのデバッグをしていた。
でも、import,exportを実装するにあたって、以下のようなエラーが出ていた。

調べてみると、同じような質問があった。
回答としては以下。
ローカルのHTMLファイルを直接開いているので、Originとなるドメインを判断できないためブロックされている。

要は、ブラウザレベルで規制されており、import,exportを実現したければサーバを立てる必要があるということ。
ちょっとした実験をしたいだけなのに、なんともめんどくさい。
まあできないのであれば(できるかもしれないけど、サーバを立てるよりめんどくさそうだった)、ローカルにvagrantでサーバ立てることにした。結局ローカル環境で完結するのでよしとする。

やったこと

vagrantで紐づけてるフォルダ上にVSCodeのワークスペース作ってデバッグできるようにしておく。

今回は以下のような設定にしておいた。
まず、dataフォルダを作ってApacheの/var/www/htmlフォルダとマッピングする。
そのためには、以下のような設定をvagrantfileにしておく必要がある。

config.vm.synced_folder “./data”, “/var/www/html”
これでマッピングされる。
ローカルではこのフォルダにデバッグしたいソースを置いておき、VSCodeでデバッグできるようにしておく。
VSCodeでデバッグできるようにするには、以下のようにする。

①Visual Studio Codeの拡張機能であるDebugger for Chromeをインストールする
②launch.jsonにデバッグ情報を書く。

.vscodeの中に以下のようにlaunch.jsonを作る。

リモートでデバッグするために、以下のように設定を書いておく。

{
    "version": "0.1.0",
    "configurations": [
      {
        "name": "Remote Debug",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceRoot}/",
        "sourceMaps": true
      }
    ]
  }

Visual Studio Codeでデバッグ対処のフォルダを開くと以下のようにデバッグ機能が有効になっている。