felsökning - JavaScript dataformatering/finutskrift

Jag försöker hitta ett sätt att "pretty print" en JavaScript-datastruktur i ett människoläsbart format för felsökning.

Jag har en ganska stor och komplicerad datastruktur som lagras i JS och jag behöver skriva lite kod för att manipulera den. För att lista ut vad jag gör och var jag gör fel, behöver jag verkligen kunna se datastrukturen i sin helhet, och uppdatera den varje gång jag gör ändringar via användargränssnittet.

Allt det här kan jag hantera själv, förutom att hitta ett bra sätt att dumpa en JavaScript-datastruktur till en människoläsbar sträng. JSON skulle fungera, men det måste verkligen vara fint formaterat och indenterat. Jag brukar vanligtvis använda Firebugs utmärkta DOM-dumpningsverktyg för detta, men jag behöver verkligen kunna se hela strukturen på en gång, vilket verkar omöjligt i Firebug.

Svar #1

Använd Crockfords JSON.stringify så här:

var myArray = ['e', {pluribus: 'unum'}];
var text = JSON.stringify(myArray, null, '\t'); //you can specify a number instead of '\t' and that many spaces will be used for indentation...

Variabeln text skulle se ut så här:

[
  "e",
   {
      "pluribus": "unum"
   }
]

Förresten, detta kräver inget mer än den JS-filen - det kommer att fungera med vilket bibliotek som helst, etc.

Svar #2

Jag skrev en funktion för att dumpa ett JS-objekt i en läsbar form, även om utskriften inte är indenterad, men det borde inte vara för svårt att lägga till det: Jag gjorde denna funktion från en jag gjorde för Lua (som är mycket mer komplex) som hanterade detta indenteringsproblem.

Här är den "enkla" versionen:

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

Jag kommer att titta på att förbättra det lite.
Not 1: För att använda det, gör od=DumpObject(something) och använd od.dump. Krångligt eftersom jag också ville ha len-värdet (antalet objekt) för ett annat syfte. Det är enkelt att göra funktionen så att den bara returnerar strängen.
Not 2: den hanterar inte loopar i referenser.

REDIGERA

Jag gjorde den indenterade versionen.

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

Välj din indentering på raden med det rekursiva anropet, och din klammerstil genom att byta den kommenterade raden efter denna.

... Jag ser att du slängde ihop din egen version, vilket är bra. Besökare kommer att ha ett val.

Svar #3

Du kan använda följande

<pre id="dump"></pre>
<script>
   var dump = JSON.stringify(sampleJsonObject, null, 4); 
   $('#dump').html(dump)
</script>

Svar #4

I Firebug, om du bara console.debug ("%o", my_object) kan du klicka på det i konsolen och komma in i en interaktiv objektutforskare. Den visar hela objektet och låter dig expandera inbäddade objekt.

Svar #5

För Node.js, använd:

util.inspect(object, [options]);

API-dokumentation

Svar #6

För dem som letar efter ett fantastiskt sätt att se ditt objekt, kolla in prettyPrint.js

Skapar en tabell med konfigurerbara vyalternativ som kan skrivas ut någonstans i ditt dokument. Bättre att titta på än i console.

var tbl = prettyPrint( myObject, { /* options such as maxDepth, etc. */ });
document.body.appendChild(tbl);

Relaterade artiklar