kledgeb Ubuntuの使い方や日本語化、アプリの使い方を紹介しています。 Ubuntuの最新情報も紹介しています。

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

  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」側のステップ実行等の操作でも、処理の操作が可能です。


関連コンテンツ
同一カテゴリーの記事
コメント
オプション