2010-11-03 4 views
2

J'aimerais pouvoir ajouter par programme une classe de console à la balise <body> si le console.log() de Firebug a été appelé n'importe où sur une page. Ensuite, je pourrais mettre un message désagréable sur l'écran pour me rappeler de ne pas déployer de code avec ces déclarations encore à l'intérieur.Déterminez si la console.log() de Firebug a été appelée n'importe où sur une page

Le très semblable à Diagnostic CSS d'Eric Meyer.

Est-ce possible?

Répondre

1

Cela fonctionne pour moi (en utilisant jQuery):

$(document).ready(function() { 
    var body = $('body'), 
     console = window.console; 

    console.debug = function() { 
    if (!body.hasClass('console')) { 
     body.addClass('console'); 
     console.debug = oldDebug; 
    } 
    } 

    console.debug('foo'); 
}); 

Il ajoutera que la classe la première fois que notre fonction personnalisée est appelée. Ensuite, il définit console.debug à la fonction d'origine. C'est la chose cool avec javascript, vous pouvez remplacer presque tout :) :)

+0

A signaler ce code utilise jQuery. Pas un problème, mais ça vaut le coup de savoir au cas où quelqu'un l'essayerait et ça ne marcherait pas. – Spudley

+0

Bien sûr. Ajouté à ma réponse. Parfois j'oublie juste cela ;-) – balu

+0

Ajout d'une question pour une approche pure-javascript: http://stackoverflow.com/questions/4091538/how-to-find-out-which-javascripts-are-loaded-in- javascript – balu

2

Hehehe. C'est une erreur facile à faire, n'est-ce pas?

  • Option 1: Toujours écrire if(window.console) console.log(...); au lieu de simplement console.log(..);
  • Option 2:

    function mydebug(thingtodebug) { 
        if(window.console) console.log(thingtodebug); 
    } 
    

..then toujours utiliser mydebug() au lieu de console.log();. Vous pouvez inclure une clause else qui déclenche une alerte si la console n'est pas définie.

  • Option 3:

    if(!window.console) { 
        var console={ 
         log : function() {alert("Don't call console.log");} 
        } 
    } 
    

... cela va faire à peu près exactement ce que vous demandez. Le problème est que toutes ces options impliquent l'ajout de code dans votre système en direct juste pour vous aider à éviter l'embarras. (et bien sûr, ce serait encore plus embarrassant si vous manquez cette boîte d'alerte!)

Si vous voulez éviter cela, une meilleure solution pourrait être d'avoir un script séparé qui scanne votre code pour les occurrences de console.log . Vous pouvez exécuter ce script dans le cadre de votre processus de déploiement.

Espérons que ça aide.

+0

'if (console)' lancera une erreur si elle n'est pas chargée, utilisez 'if (window.console)' –

+0

@Juan - édité pour cela. Merci. :) – Spudley

+0

Ce sont des solutions acceptables, mais n'oubliez pas que vous perdrez des fonctionnalités telles que le report de ligne (console.debug, console.error) car la ligne apparaîtra toujours comme la ligne 2 (ou la ligne sur laquelle elle se trouvait dans le fonction). Vous ne pourrez pas non plus transmettre un nombre variable d'arguments comme: console.log (var1, var2, var3); – zzzzBov

0

C'est assez simple. Il suffit de remplacer l'objet de la console par défaut avec votre propre:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Console Test</title> 
     <script> 
      var oldConsole = (typeof window.console === "object") ? window.console : null; 
      var console = { 
       log: function() { 
        oldConsole.log(arguments); 
        document.body.className = "console"; 
        alert('applied class'); 
       } 
      }; 
     </script> 
    </head> 
    <body> 
     <input type="button" value="click me" onclick="console.log('this is a test');"> 
    </body> 
</html>

Live example.

Questions connexes