Mise en forme de données JavaScript/jolient imprimante

Question

J'essaie de trouver un moyen d' pretty print JavaScript structure de données dans une forme lisible par l'homme à des fins de débogage.

J'ai un plutôt grand et compliqué la structure des données sont stockées en JS et j'ai besoin d'écrire un peu de code pour les manipuler. Afin de travailler sur ce que je fais et où je vais mal, que j'ai vraiment besoin, c'est d'être en mesure de voir la structure de données dans son intégralité, et le mettre à jour chaque fois que je fais des changements dans l'INTERFACE utilisateur.

Tous ces trucs que je peux gérer moi-même, en dehors de trouver une belle façon de faire un dump d'un JavaScript structure de données pour une chaîne explicite. JSON, mais il a vraiment besoin d'être bien mis en forme et mis en retrait. Je serais normalement l'utilisation de Firebug excellent DOM dumping des trucs, mais j'ai vraiment besoin d'être en mesure de voir l'ensemble de la structure à la fois, ce qui ne semble pas être possible dans Firebug.

Toutes les suggestions sont les bienvenues.

Merci à l'avance.

Answer 1

Utilisation JSON.stringify de Crockford comme ceci :

Variable `` ressemblerait à ceci :

---

Par ailleurs, cela n’exige rien de plus que ce fichier JS - cela fonctionnera avec n’importe quelle bibliothèque, etc..

Answer 2

J'ai écrit une fonction pour vider un JS objet dans une forme lisible, même si la sortie n'est pas en retrait, mais il ne devrait pas être trop difficile d'ajouter que: j'ai fait cette fonction à partir de celui que j'ai fait pour Lua (qui est beaucoup plus complexe) qui a géré ce problème d'indentation.

Ici, c'est le "simple" version:

function DumpObject(obj)
{
  var od = new Object;
  var result = "";
  var len = 0;

  for (var property in obj)
  {
    var value = obj[property];
    if (typeof value == 'string')
      value = "'" + value + "'";
    else if (typeof value == 'object')
    {
      if (value instanceof Array)
      {
        value = "[ " + value + " ]";
      }
      else
      {
        var ood = DumpObject(value);
        value = "{ " + ood.dump + " }";
      }
    }
    result += "'" + property + "' : " + value + ", ";
    len++;
  }
  od.dump = result.replace(/, $/, "");
  od.len = len;

  return od;
}

Je vais chercher à l'améliorer un peu.
Note 1: Pour l'utiliser, il n' od = DumpObject(something) et l'utilisation de la do.dump. Compliquée parce que je voulais la len valeur trop (nombre d'éléments) pour un autre but. Il est trivial de faire le retour de la fonction uniquement de la chaîne.
Note 2: il ne gère pas les boucles dans les références.

MODIFIER

J'ai fait le retrait de la version.

function DumpObjectIndented(obj, indent)
{
  var result = "";
  if (indent == null) indent = "";

  for (var property in obj)
  {
    var value = obj[property];
    if (typeof value == 'string')
      value = "'" + value + "'";
    else if (typeof value == 'object')
    {
      if (value instanceof Array)
      {
        // Just let JS convert the Array to a string!
        value = "[ " + value + " ]";
      }
      else
      {
        // Recursive dump
        // (replace "  " by "\t" or something else if you prefer)
        var od = DumpObjectIndented(value, indent + "  ");
        // If you like { on the same line as the key
        //value = "{\n" + od + "\n" + indent + "}";
        // If you prefer { and } to be aligned
        value = "\n" + indent + "{\n" + od + "\n" + indent + "}";
      }
    }
    result += indent + "'" + property + "' : " + value + ",\n";
  }
  return result.replace(/,\n$/, "");
}

Choisissez votre indentation de la ligne de l'appel récursif, et vous accolade de style par la commutation de la ligne de commentaire après celui-ci.

... Je vois que tu fouettée en place votre propre version, qui est la bonne. Les visiteurs auront le choix.

Answer 3

Vous pouvez utiliser

Answer 4

Dans , si vous venez vous pouvez cliquer dessus dans la console et entrez un Explorateur d’objets interactifs. Il montre l’objet dans son intégralité et vous permet d’étendre des objets imbriqués.

Answer 5

Je suis de programmation en `` et je n’étais pas satisfait par les réponses qui ont été posté ici. J’ai donc écrit mon propre imprimante jolie :

La sortie ressemble à ceci :

Je l’ai également posté comme un Gist ici pour quelles que soient les changements à venir peuvent être nécessaires.