93 votes

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

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

J'ai la version chrome 21.0.1180.60 m.

Les étapes que j'ai pris:

  1. J'ai appuyé sur ctrl + maj + i pour afficher la console.
  2. Cliqué sur les Sources, puis sélectionnez le fichier javascript que j'ai envie de débogage.
  3. Je définir des points d'arrêt où je veux le code pour arrêter en mettant un tag bleu sur la gouttière à côté de la ligne sur la gauche.
  4. J'ai cliqué sur le bouton sur ma page web (qui est un php rendu de la page) qui initie le code javascript.
  5. Le code a été exécuté avec succès, sans s'arrêter.

J'ai aussi remarqué que la Montre Expressions ne fonctionnent pas non plus. Il continue à me dire que la variable que je veux regarder n'est pas défini.

D'autres tests a constaté que c'est mon code qui est à l'origine du point d'arrêt à l'échec. Il semble qu'il échoue sur le "$("#frmVerification").submit(function(){" ligne. Il n'est pas dans les points d'arrêt à l'intérieur de cette fonction().

Ci-dessous est la:

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

174voto

Adam Rackis Points 45559

Je ne sais pas pourquoi vos points d'arrêt ne frappent pas, mais une façon infaillible d'entrer dans votre code est de taper

 debugger;
 

où vous voulez que le code s'arrête, puis réexécutez avec la fenêtre chrome ouverte.


Juste une petite chose à savoir, 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; entraînera une erreur.

22voto

Stephen Points 534

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

Dans mon cas, il y a un sourceURL référence dans mon code:

//@ sourceURL=/Scripts/test.js

Lorsque ce fichier Javascript est minimisé et chargé par le navigateur, normalement il raconte Chrome Dev Tools où la unminified version est.

Toutefois, si vous déboguez le unminified version et cette ligne existe, Chrome Dev Tools cartes pour que sourceURL chemin au lieu de "normal" chemin d'accès.

Par exemple, si vous travaillez en local sur un serveur web, puis dans l'onglet Sources de Chrome Dev Tools, le chemin d'accès à un fichier JS sera http://localhost/scripts/test.js

Si test.js a cette en bas

//@ sourceURL=/Scripts/test.js

puis les points d'arrêt ne fonctionne que si le chemin d'accès au fichier est - /Scripts/test.js, pas l'complet de http://localhost/scripts/test.js

Dans Chrome 38, rester avec mon exemple ci-dessus, si vous regardez l'onglet Sources, chaque fichier s'enfuit http://localhost/, de sorte que lorsque vous cliquez sur test.js, Chrome charges jusqu' http://localhost/scripts/test.js

Vous pouvez mettre tous les points d'arrêt que vous voulez dans ce fichier, et Chrome ne fait jamais l'un d'eux. Si vous mettez un point d'arrêt dans votre JS avant d'appeler n'importe quelle fonction test.js et puis pas de plus dans cette fonction, vous verrez que Chrome s'ouvre un nouvel onglet dont le chemin est /Scripts/test.js. Mettre des points d'arrêt dans ce fichier va arrêter le flux de programme.

Quand je me suis débarrassé de l' @ sourceURL ligne dans le fichier JS, alors tout fonctionne à nouveau normalement.

11voto

gumkins Points 591

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

Ceci est reproduit avec mon Chrome 31.0.1650.57 (Build officiel 235101) sous Linux.

Je redémarre le navigateur pour le corriger.

2voto

David Gilbertson Points 517

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 . Merci aussi d'avoir lu jusqu'ici. Voir ma réponse au problème du chrome ici .

2voto

Mikey4Dice Points 1

J'ai rencontré des problèmes similaires dans les deux chrome et firefox si elle ne peut pas être la solution à votre problème. Vais partager ici dans l'espoir qu'il peut aider les autres. J'ai rencontré cette situation dans d'autres projets indépendants, mais n'a jamais compris pourquoi jusqu'à ce qu'il a surgi de nouveau aujourd'hui.

Scénario:

J'ai une page qui utilise deux bootstrap des modaux qui proviennent de la même source et un ensemble de fichiers javascript (blueimp est génial jquery fileupload).

  • BS Modal 1 est rendu au chargement de la page (via php) et il est toujours présent sur la page. Il est utilisé pour ajouter un nouvel enregistrement lié. (CakePHP....pensez SalesForcey type de stuff)

  • BS Modal 2 est utilisée pour la modification d'enregistrements liés et il est contenu html est tiré à partir d'un appel ajax et ajouté au DOM via jQuery.

  • Javascript soutenir à la fois les auxiliaires modaux inclus via le standard html <script> tags.

J'ai remarqué que les points d'arrêt sont déclenchés seulement Modaux 1. Ils ne fonctionnent pas lorsque le code est exécuté sur la dynamique ajouté Modal 2, même si il est bien évident que le code est en effet en cours d'évaluation et exécuter. Des boîtes d'alerte pop-up, codey type de choses exécuté et de sortie suit la logique énoncée dans le code.

Je n'ai pas plongé plus profond d'enquêter plus loin parce que je suis pressé par le temps, mais je voulais le sortir et de donner en retour à la communauté.

PS: j'utilise DONC tous les temps, mais c'est mon premier post, alors allez facile sur moi :-)

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X