[解決済み] Chromeのjavascriptデバッガーブレークポイントは何もしないのですか?
2023-02-15 20:59:16
質問
Chrome のデバッグ ツールがよくわかりません。
クロームのバージョンは21.0.1180.60 mを使用しています。
私が行った手順
- ctrl-shift-i を押してコンソールを表示させました。
- Sources をクリックし、デバッグしたい関連する javascript ファイルを選択しました。
- 私は、左の行の隣のガターに青いタグを置くことによって、コードを停止したいブレークポイントを設定します。
- 私は自分のウェブページ (これは php でレンダリングされたページです) で、javascript コードを開始するボタンをクリックしました。
- コードは停止することなく正常に実行されました。
また、Watch Expressionsも機能しないことに気づきました。ウォッチしたい変数が未定義であると言われ続けています。
さらにテストすると、ブレークポイントを失敗させる原因は私のコードであることがわかりました。それは "$("#frmVerification").submit(function(){") の行で失敗しているようです。そのfunction()内のブレークポイントには踏み込まないのです。
以下がその内容です。
//function to check name and comment field
var test = "this is a test";
var test2 = "this is another test";
function validateLogin(){
//if(userEmail.attr("value") && userPass.attr("value"))
return true;
//else
//return false;
}
//onclick on different buttons, do different things.
function ajaxRequest(){
}
$(document).ready(function(){
//When form submitted
$("#frmVerification").submit(function(){
var username = $("#username");
var token = $("#token");
var action = $("#action");
var requester = $("#requester");
if(validateLogin()){
$.ajax({
type: "post",
url: "verification.php",
data: "username="+username.html()+"&token="+token.val()+"&action="+action.val()+"&requester="+requester.val(),
success: function(data) {
try{
var jsonObj = $.parseJSON(data); //convert data into json object, throws exception if data is not json compatible
if(jsonObj.length > 0){//if there is any error output all data
var htmUl = $('<ul></ul>');
$.each(jsonObj, function(){
htmUl.append('<li>' + this + '</li>');
});
$("#errOut").html(htmUl);
}else{
alert("Your account is now activated, thank you. If you have already logged in, press OK to go to the home page. If not, you must log in first.");
window.location.replace("home.php");
}
}
catch(e){//if error output error to errOut]
$("#errOut").html("PHP module returned non JSON object: <p>"+data+"</p>");
}
}
});
}
else alert("Please fill UserName & Password!");
return false;
});
});
どのように解決するのですか?
ブレークポイントがヒットしない理由はわかりませんが、コードに踏み込む確実な方法の 1 つは、次のように入力することです。
debugger;
を停止させたい場所で実行し、クロームデベロッパーツールウィンドウを開いた状態で再度実行します。
1つだけ気をつけるべきことは、デバッガの行を削除した後は、必ずクリーンアップすることです。 JavaScriptファイルをYUI compressorを通して実行することがある場合、デバッガー行を削除した後に、デバッガー行の存在を確認する必要があります。
debugger;
の行があると、エラーになります。
関連
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] JavaScriptでメールアドレスを検証するのに最適な方法は何ですか?
-
[解決済み] JavaScriptでタイムスタンプを取得する方法は?
-
[解決済み】JavaScriptの比較では、どちらの等号演算子(== vs ===)を使うべきですか?
-
[解決済み】JavaScriptで文字列の出現箇所をすべて置換する方法
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
-
[解決済み] JSXとLoadshを使用して、ある要素をn回繰り返す方法
-
[解決済み] JavaScriptでDIVを表示・非表示にするには?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] 配列からオブジェクトを生成する
-
[解決済み] 文字列のn番目の出現箇所を取得するには?
-
[解決済み] JavaScriptを使用してHTML要素に属性を追加/更新するには?
-
[解決済み] React js 親コンポーネントから子コンポーネントの状態を変更する
-
[解決済み] Reactコンポーネントでthis.setStateを複数回使用するとどうなりますか?
-
[解決済み] TypeScriptプロジェクトで既存のC#クラス定義を再利用する方法
-
[解決済み] 各オブジェクトに?重複
-
[解決済み] JSHintの'+'前の改行不良の説明
-
[解決済み] なぜjavascriptのES6 Promisesはresolve後も実行を継続するのですか?
-
[解決済み] リダイレクトされずにHTMLフォームを送信する方法