質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.69%

PHPStormでjavascriptのデバッグがうまく行きません。

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 1,565

recurcive

score 8

PHPStormでjavascriptのデバッグがうまく行きません。

【環境】
ホストOS:windows10
PHPStorm 2016.2.2(ライセンスは半年前に購入済み)
ブラウザ:google chrome バージョン 54.0.2840.87 m (64-bit)
chromeアドオン:JetBrains IDE Support
VMware:CentOS6.7
PHPStorm 2016.2.2(ライセンスは半年前に購入済み)
ブラウザ:google chrome:バージョン 54.0.2840.90 (64-bit)
chromeアドオン:JetBrains IDE Support
です。

Windows10とCentOS6.7はブリッジ接続しており、どちらもネットに繋がります。
ずっと前からPHPのデバッグは問題なく実行できています、javascriptだけうまく行きません。
どちらもネットへはUSBでWifi接続しております。
PHPStormはCentOSにもWindows10にも入れてあります。
デバッグがうまくいかなかったため、PHPStormはわざわざ最新版にアップデートして試しました。

【問題】
下の方に示す3パターン試しましたが、全て同じ結果となりました。
また、一番下にソースを記載し、そこにコメントで書きましたが、
「全てにブレークポイントをつけて実行しても、
1つ目の変数の宣言では止まるのに、2つ目の変数宣言時には止まらず、
3つ目では止まったりとおかしい動作をします。
例:
var canvas;            // 止まる
var ctx;            // 止まらない
var canvasW = 395;    // 止まる」
といった感じで、不審な挙動をします。

PHPStormの設定も色々試しましたが、一応デバッグがスタートしているため、問題はないのかと思います。
一応、英語はあまりうまく使えませんが、英語で検索したりもしてみましたが特に該当の文献は見つかりませんでした。
ただ、日本の1つのwebページと、1つのツイートで、「webstormのjavascriptのデバッグでブレークポイントで止まらない。原因不明なので放置」といったものは目にしました。
また、ファイル上にjavascriptを記載する際の位置も、bodyタグの直後や、headタグ内等、色々試しましたが、変わりませんでした。

なぜコメントで止まったり、ブレークポイントで止まらなかったりするのでしょうか?
(もちろんif文で結果が偽になる部分が実行されない様な事は当たり前ですが。)
phpstormでjavascriptをいじろうとしたのもつい最近の話ですし、初心者で至らない点があるかと思いますが、誹謗中傷などの書き込みはお辞めください。
もしかしたら根本的なミスをしている可能性もあります。
どなたか分かる方、何か思いついた方、宜しくお願い致します。

################################

・パターン1(仮想OSへのリモートデバッグ)
CentOS上で、
apache
node.js
browsersync
を起動

windows10で、
PHPStormを起動

################################

・パターン2(CentOS上のみでデバッグ)
CentOS上で、
apache
node.js
browsersync
PHPStorm
を起動
(PHPStormからはリモートデバッグではない通常のデバッグをしました)

################################

・パターン3(Windows10のみでデバッグ)
Windows上で、
apache(Xampp)
node.js
browsersync
PHPStorm
を起動
(PHPStormからはリモートデバッグではない通常のデバッグをしました)

################################

・パターン1・2・3の結果
javascriptのデバッグが出来たのですが、ブレークポイントで止まったり止まらなかったりしました。
また、コメント部分にはブレークポイントをそもそも指定していないですし、コメント部分にはブレークポイントを設定できないはずなのに、そこで止まったりというおかしな挙動をしました。
ただし何度も試してみた所、実行した際に止まってくれる場所は毎回同じ様です。

################################

/*
試したソースの1つを下記に全て記載致します。
全てにブレークポイントをつけて実行しても、
1つ目の変数の宣言では止まるのに、2つ目の変数宣言時には止まらず、
3つ目では止まったりとおかしい動作をします。
例:
var canvas;            // 止まる
var ctx;            // 止まらない
var canvasW = 395;    // 止まる
*/
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>

cnvs_container {

width: 480px;
height: 240px;
position: relative;
border: 2px solid black
}
canvas { position: absolute; }

picture_cnvs    { z-index: 1 }

mesure_cnvs    { z-index: 2 }

/*#background-layer    { z-index: 1 }*/
</style>
<title>画像ファイルをCANVSでプレビュー</title>
</head>
<body>
<script>
//http://qiita.com/michimaru/items/595cbf090569bfab2d20
$(function(){
// id="file_insert"の変化でコールバック
$("#file_insert").change(function(){
// 選択ファイルの有無をチェック
if (!this.files.length) {
alert('ファイルが選択されていません');
return;
}

// Formからファイルを取得
var file = this.files[0];

// (1) HTMLのCanvas要素の取得
var canvas = $("#picture_cnvs");

// (2) getContext()メソッドで描画機能を有効にする
var ctx = canvas[0].getContext('2d');

// 描画イメージインスタンス化
var image = new Image();

// File API FileReader Objectでローカルファイルにアクセス
var fr = new FileReader();

// ファイル読み込み読み込み完了後に実行 [非同期処理]
fr.onload = function(evt) {

// 画像がロードされた後にcanvasに描画を行う [非同期処理]
image.onload = function() {
// (3) プレビュー(Cnavas)のサイズを指定
var picture_cnvsH = 240;
var picture_cnvsW = image.naturalWidth*picture_cnvsH/image.naturalHeight;
// (4) Cnavasにサイズアトリビュートを設定する
canvas.attr('width', picture_cnvsW);
canvas.attr('height', picture_cnvsH);

//var canvas2 = document.getElementById('mesure_cnvs');
var canvas2 = $("#mesure_cnvs");
canvas2.attr("width", picture_cnvsW);
canvas2.attr("height", picture_cnvsH);

var canvas3 = $("#cnvs_container");
canvas3.attr("width", picture_cnvsW);
canvas3.attr("height", picture_cnvsH);

// (5) 描画
ctx.drawImage(image, 0, 0, picture_cnvsW, picture_cnvsH);
}
// 読み込んだ画像をimageのソースに設定
image.src = evt.target.result;
$("#base64").val(image.src);
}

// fileを読み込む データはBase64エンコードされる
fr.readAsDataURL(file);
})

$("#trimming").click(function() {
var canvas = document.getElementById('picture_cnvs');
var context = canvas.getContext('2d');

// キャンバス全体のピクセル情報を取得
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
var width = imageData.width, height = imageData.height;
var base64 = canvas.toDataURL();
console.log(base64);    //http://www.yoheim.net/blog.php?q=20120204

var picture_cnvs = document.getElementById('picture_cnvs');
var ctx = picture_cnvs.getContext('2d');
console.log(ctx);
var img = new Image();
img.onload = function () {
ctx.drawImage(img, 20, 45, 200, 270, 150, 15, 200, 270);
};
img.src = $("#file_insert").attr('src');
})

var canvas = document.getElementById("mesure_cnvs");
var context = canvas.getContext('2d');
var x, y, relX, relY, objX, objY;
var objWidth, objHeight;
var dragging = false;

$(document).ready(function(){
objWidth = 50;
objHeight = 50;
objX = canvas.width / 2 - objWidth / 2;
objY = canvas.height / 2 - objHeight / 2;
drawRect();
})

$("#mesure_cnvs").mousedown(function(e){
var offsetX = canvas.getBoundingClientRect().left;
var offsetY = canvas.getBoundingClientRect().top;
x = e.clientX - offsetX;
y = e.clientY - offsetY;
if (objX < x && (objX + objWidth) > x && objY < y && (objY + objHeight) > y) {
dragging = true;
relX = objX - x;
relY = objY - y;
}
})
$("#mesure_cnvs").mousemove(function(e){
// キャンバスの左上端の座標を取得
var offsetX = canvas.getBoundingClientRect().left;
var offsetY = canvas.getBoundingClientRect().top;

// マウスが移動した先の座標を取得
x = e.clientX - offsetX;
y = e.clientY - offsetY;

// ドラッグが開始されていればオブジェクトの座標を更新して再描画
if (dragging) {
objX = x + relX;
objY = y + relY;
drawRect();
}
})

$("#mesure_cnvs").mouseup(function(e){
dragging = false; // ドラッグ終了
})

function drawRect() {
context.clearRect(0, 0, canvas.width, canvas.height); // キャンバスをクリア
context.fillRect(objX, objY, objWidth, objHeight);
}
})

</script>

<h1>画像を選択してください。</h1>
<form id="my_form">
<input id="file_insert" name="file_insert" type="file" accept="image/jpeg,image/png"><br>
<input id="trimming" name="trimming" type="button" value="トリミング">
<input id="select_start_hight" name="trimming" type="button" value="脚の最上部を選択">
<input type="hidden" id="base64">
</form>
<hr>
<div>
<h1>プレビュー</h1>
<div id="cnvs_container">
<canvas id="picture_cnvs"></canvas> <!-- canvas要素を配置 -->
<canvas id="mesure_cnvs"></canvas>
</div>
</div>

</body>
</html>

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.69%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる