web-dev-qa-db-fra.com

Les points d'arrêt du débogueur JavaScript de Chrome ne font rien?

Je n'arrive pas à comprendre l'outil de débogage de Chrome.

J'ai la version chrome 21.0.1180.60 m.

Les étapes que j'ai prises:

  1. J'ai appuyé sur ctrl-shift-i pour afficher la console.
  2. Cliquez sur Sources puis sélectionnez le fichier javascript approprié que je veux déboguer.
  3. Je définis des points d'arrêt où je veux que le code s'arrête en plaçant une balise bleue sur la gouttière à côté de la ligne à gauche.
  4. J'ai cliqué sur le bouton sur ma page Web (qui est une page rendue php) qui lance le code javascript.
  5. Le code a fonctionné avec succès sans s'arrêter.

J'ai également remarqué que les expressions de montre ne fonctionnent pas non plus. Il n'arrête pas de me dire que la variable que je veux regarder n'est pas définie.

D'autres tests ont révélé que c'est mon code qui fait échouer le point d'arrêt. Il semble que cela échoue sur la ligne "$ (" # frmVerification "). Submit (function () {". Elle ne pénètre pas dans les points d'arrêt à l'intérieur de cette fonction ().

Ci-dessous le:

//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;
    });
});
javascriptdebugginggoogle-chrome
62
chaser

Je ne sais pas pourquoi vos points d'arrêt ne frappent pas, mais un moyen sûr de pénétrer dans votre code est de taper

debugger;

vous souhaitez que le code s’arrête, puis réexécutez avec la fenêtre des outils de développement Chrome ouverte. 

Juste une petite chose à prendre en compte, assurez-vous de nettoyer après avoir terminé et de supprimer les lignes du débogueur. Si vous exécutez des fichiers JavaScript via le compresseur YUI, l'existence d'une ligne debugger; provoquera une erreur. 

127
Adam Rackis

C'est une réponse tardive, mais j'avais le même problème, mais la réponse était différente.

Dans mon cas, il y avait une référence sourceURL dans mon code:

//@ sourceURL=/Scripts/test.js

Lorsque ce fichier Javascript est modifié et chargé par le navigateur, il indique normalement à Chrome Dev Tools où se trouve la version non modifiée.

Toutefois, si vous déboguez la version non modifiée et que cette ligne existe, Outils de développement Chrome Dev correspond à ce chemin sourceURL au lieu du chemin "normal".

Par exemple, si vous travaillez localement sur un serveur Web, sous l'onglet Sources dans les outils de développement de Chrome, le chemin d'accès à un fichier JS donné sera http://localhost/Scripts/test.js.

Si test.js a cela en bas

//@ sourceURL=/Scripts/test.js

alors les points d'arrêt ne fonctionneront que si le chemin du fichier est /Scripts/test.js et non l'URL qualifiée de http://localhost/Scripts/test.js

Dans Chrome 38, en reprenant l'exemple ci-dessus, si vous examinez l'onglet Sources, chaque fichier s'exécute à l'aide de http://localhost/. Ainsi, lorsque vous cliquez sur test.js, Chrome charge jusqu'à http://localhost/Scripts/test.js

Vous pouvez mettre tous les points d'arrêt souhaités dans ce fichier, et Chrome ne les frappe jamais. Si vous mettez un point d'arrêt dans votre JS avant d'appeler une fonction dans test.js, puis que vous y accédiez, vous verrez que Chrome ouvre un nouvel onglet dont le chemin est /Scripts/test.js. Mettre des points d'arrêt dans ce fichier arrêtera le déroulement du programme. 

Lorsque je me suis débarrassé de la ligne @ sourceURL du fichier JS, tout fonctionne à nouveau normalement (c'est-à-dire comme vous le souhaiteriez).

20
Stephen

Probablement ce bug https://code.google.com/p/chromium/issues/detail?id=278361

Ceci est reproduit avec mon Chrome 31.0.1650.57 (version officielle 235101) sous Linux.

Je redémarre le navigateur pour le réparer.

9
gumkins

J'ai un problème similaire. Les points d'arrêt ne fonctionnaient pas sauf si j'avais utilisé debugger;. J'ai corrigé le problème des points d'arrêt avec "Restaurer les valeurs par défaut et recharger". Il se trouve dans Outils de développement Chrome, Paramètres, Restauration des paramètres par défaut et rechargement.

6
user2274860

Je l'ai rencontré plusieurs fois, au début cela fonctionnait bien avec localhost, du coup, les points d'arrêt ne fonctionnent plus, je passe à 127.0.0.1, puis ça marche à nouveau L'espoir aide.

3
dasons

Assurez-vous que le script avec le "débogueur;" déclaration en elle n'est pas blackboxée par Chrome. Vous pouvez aller à l'onglet Sources pour vérifier et désactiver le blackboxing si c'est le cas.

EDIT: Capture d'écran ajoutée.

 How to turn off blackboxing.

2
John Alexander

assurez-vous que vous avez ouvert la console javascript (ou les sources) dans votre fenêtre chrome. sinon, vous ne pourrez jamais atteindre le point d'arrêt .. vous pouvez ouvrir la console javascript à l'aide du bouton d'option situé dans le coin supérieur droit -> outils -> console javascript. 

2
Thilak

J'ai rencontré des problèmes similaires dans Chrome et Firefox, bien que cela ne soit peut-être pas la solution à votre problème. Je partage ici dans l'espoir que cela puisse aider les autres. J'ai déjà rencontré cette situation dans le cadre d'autres projets indépendants, mais je n'ai jamais compris pourquoi avant que cela ne se reproduise aujourd'hui. 

Scénario:

J'ai une page qui utilise deux modaux d'amorçage qui proviennent de la même source et un ensemble de fichiers javascript (awesome jquery fileupload de blueimp). 

  • BS Modal 1 est rendu au chargement de la page (via php) et est toujours présent sur la page. Il est utilisé pour ajouter un nouvel enregistrement associé. (CakePHP .... pense que des trucs de type SalesForcey)

  • BS Modal 2 est utilisé pour éditer des enregistrements associés existants. Son contenu HTML est extrait d'un appel ajax et ajouté au DOM via jQuery. 

  • Javascript supportant les deux modaux inclus via les balises HTML standard <script>. 

J'ai remarqué que les points d'arrêt ne sont déclenchés que sur Modal 1. Ils ne fonctionnent pas lorsque le code est exécuté sur Modal 2 ajouté dynamiquement, même s'il est évident que le code est bien évalué et exécuté. Des boîtes d’alerte apparaissent, les opérations de type codey sont exécutées et la sortie suit la logique définie dans le code. 

Je n'ai pas plongé plus loin pour approfondir mes recherches car je manquais de temps, mais je voulais le publier et redonner à la communauté. 

PS: J'utilise SO tout le temps, mais ceci est mon premier post, alors allez-y doucement :-)

2
Mikey4Dice

J'ai eu un problème où les points d'arrêt de Chrome ne tiraient rien. Lorsque j'ai essayé d'utiliser 'debugger' dans mon code, je n'ai pu que parcourir le code dans la version VM de mon code. Mon problème était que je mappais mal les ressources. La reprogrammation a résolu mon problème.

2
DaneEdw

Assurez-vous que vous utilisez le même hôte dans l'URL que vous étiez lorsque vous avez configuré le mappage. Par exemple. si vous étiez à http://127.0.0.1/my-app lorsque vous avez configuré et mappé l'espace de travail, les points d'arrêt ne fonctionneront pas si vous affichez la page via http://localhost/my-app. Voir ma réponse à la question du chrome ici . 

2
David Gilbertson

Donc, en plus de la réponse d'Adam Rackis, si votre fichier javascript contient des erreurs au-dessus du point d'arrêt, vous ne pourrez pas l'atteindre, que vous le signaliez ou que vous mettiez debugger;.

Voici un exemple:

if (nonExistentVar === "something") {
  console.log("this won't happen as the above errors out");
}
debugger;
console.log("this won't print either")
0
JT.

Je ne suis pas sûr de savoir comment cela a fonctionné, mais appuyer sur F1 pour les paramètres et en bas à droite, appuyer sur "Restaurer les paramètres par défaut et recharger" a fonctionné pour moi.

0
Stubbs

Ma solution consistait à supprimer le stockage local, le stockage de session et les cookies de l'onglet Applications. Par la suite, Chrome suspendrait l'exécution du script sur les points d'arrêt définis dans les sources.

  1. Cliquez sur l'onglet Applications de Google Chrome.
  2. Faites un clic droit sur l'URL sous chaque dossier> Effacer

Capture d'écran: onglet Applications

0
Purple_Kitten

J'ai eu le même problème dans un fichier de ligne 10K. Les points d'arrêt étaient ignorés,
Les instructions codées en dur _debugger ont fonctionné, mais elles ne peuvent pas être inversées et peuvent être gênantes lorsqu'elles sont placées dans une boucle . Ma solution, qui est un peu un bidouillage mais qui fonctionne, est d'ajouter ce qui suit en haut du fichier: 

let myDebuggerFlag = false;
let myDebugger = function () {
    if (myDebuggerFlag) {
        debugger;
    }
}

alors j'ajoute un myDebugger (); inline où j'utiliserais habituellement un point d'arrêt.

pour activer le débogage, il suffit d'entrer myDebuggerFlag = true; sur la ligne de console . (vous devez bien sûr quitter myDebugger en premier.

0
Mark Fee

comme je l'ai expérimenté avec Chrome, nous devons ouvrir la console du navigateur pour que le débogueur s'exécute lors du chargement de la page.

mettre cela quelque part dans le fichier javascript que vous voulez exécuter

debugger

ouvrez la console du navigateur et rechargez la page.

le débogueur fonctionnera comme exemple d'image ci-dessous

 enter image description here

0
Samda

Réponse assez tardive mais rien de ce qui précède n'a aidé mon cas et était quelque chose de différent

en faisant référence au type de fichier javascript = "text/javascript" manquait dans l'application existante, je travaillais

<script  src="ab.js" ></script>

en dessous de 1 travaillé et points d'arrêt frappaient comme prévu

 <script  src="ab.js" type="text/javascript"></script>
0
Peru