Visual Studio Code その4 - Google Chromeと連携してデバッグしてみる

Google Chromeと連携してデバッグしてみる

前回の続きです。
実際に「Google Chrome」と連携してデバッグしてみます。

デバッグは、ローカルファイルを直接読み込んでデバッグを行います。
また「Visual Studio Code」から「Google Chrome」を起動してデバッグを行います。

テストに使用した環境

テストに使用した環境は、以下の通りです。

項目	バージョン
OS	Ubuntu 15.10 64bit
Visual Studio Code	0.10.8
Google Chrome	49.0.2623.75

1.用意したファイル

ここでは例として、以下のファイルを用意しました。

それぞれのファイルの中身は、以下のようになっています。

launch.json

{
  "version": "0.1.0",
  "configurations": [
    {
      "name": "Launch index.html",
      "type": "chrome",
      "request": "launch",
      "file": "index.html",
    }
  ]
}

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">

  <title>VSCodeでデバッグ</title>

  <style>
    .div_1{
      width: 500px;
      background-color: azure;
      border: 1px solid gray;
      margin: 24px auto;
      padding: 8px;
    }

    .textarea_1{
      width: 450px;
      height: 100px;
      margin: 24px auto;
      display: block;
    }
    
    .input_1{
      display: block;
    }

    .input_facets{
      display: block;
      margin: 16px 0px;
    }
    
  </style>

  <script src="main.js"></script>

</head>
<body>

<div id="div_1" class="div_1">

  <input class="input_1" type="button" value="ブラウザーの情報を取得する" onclick="onButtonClick()">
  <textarea class="textarea_1" id="textarea_1"></textarea>

</div>

</body>
</html>

main.js

function onButtonClick() {            
  var textarea = document.getElementById("textarea_1");
    
  try{         
    textarea.value = "----- ブラウザーの情報 -----\n";
    textarea.value += "appCodeName ： " + navigator.appCodeName + "\n";
    textarea.value += "appName : " + navigator.appName + "\n";
    textarea.value += "appVersion ： " + navigator.appVersion + "\n";
    textarea.value += "platform ： " + navigator.platform + "\n";
    textarea.value += "product ： " + navigator.product + "\n";
    textarea.value += "userAgent ： " + navigator.userAgent + "\n";
  }
  catch (exception) {
    //例外が発生
    textarea.value = "例外が発生しました。\n例外の内容：" + exception.toString();
  }
}