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はわざわざ最新版にアップデートして試しました。

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

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

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

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

windows10で、
PHPStormを起動

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

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

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

######################################
/*
試したソースの１つを下記に全て記載致します。
全てにブレークポイントをつけて実行しても、
１つ目の変数の宣言では止まるのに、２つ目の変数宣言時には止まらず、
３つ目では止まったりとおかしい動作をします。
例：
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 id="mesure_cnvs"></canvas> </div> </div> </body> </html>