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

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

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

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

  テストに使用した環境

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

  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();
  }
}

  2.ブレークポイントの設定

    「main.js」の「onButtonClick()」メソッドにブレークポイントを設定しました。

  3.ブレークポイントの確認

    デバッグ画面に移り、「BREAKPOINTS」に「2.」で設定したブレークポイントが表示されているか確認します。

  4.デバッグ開始

    「Launch index.html」設定が選択されていることを確認して、「▶」アイコンをクリックします。

  5.ブラウザーの起動

    「Google Chrome」が起動し、デバッグの設定で指定した「index.html」が開かれます。


    「ブラウザーの情報を取得する」ボタンをクリックします。

  6.ブレーク

    「2.」で設定したブレークポイントで停止します。

  7.ソースコードの確認

    「Visual Studio Code」を見ると、以下のように設定したブレークポイントで停止しています。

  8.処理の操作

    画面上のツールバーでステップ実行等の操作を行います。


    「Google Chrome」側のステップ実行等の操作でも、処理の操作が可能です。