<p dir="auto">Users can consume the options appropriately or pass them down to recursive <code class="notranslate">Deno.inspect()</code> calls.</p>
<p dir="auto"><em>Edit: the current proposal is here <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="728670624" data-permission-text="Title is private" data-url="https://github.com/denoland/deno/issues/8099" data-hovercard-type="issue" data-hovercard-url="/denoland/deno/issues/8099/hovercard?comment_id=757434256&amp;comment_type=issue_comment" href="https://github.com/denoland/deno/issues/8099#issuecomment-757434256">#8099 (comment)</a></em></p>
<hr>
<p dir="auto">Probably should have thought of this when we did <code class="notranslate">Deno.customInspect</code> but we didn't.  As our console output has evolved, it makes it really hard to implement the same rich output.  For example if you have the following code:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const h = new Headers();
h.append(&quot;key&quot;, &quot;value&quot;);
console.log(h);"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">h</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">Headers</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">h</span><span class="pl-kos">.</span><span class="pl-en">append</span><span class="pl-kos">(</span><span class="pl-s">"key"</span><span class="pl-kos">,</span> <span class="pl-s">"value"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">h</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">You would get something like the following output:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/1282577/97069044-d6944700-1618-11eb-87f7-37365013b3ac.png"><img width="157" alt="a non coloured output string" src="https://user-images.githubusercontent.com/1282577/97069044-d6944700-1618-11eb-87f7-37365013b3ac.png" style="max-width: 100%;"></a></p>
<p dir="auto">Where as if you did:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="console.log({ key: &quot;value&quot; });"><pre class="notranslate"><span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">key</span>: <span class="pl-s">"value"</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">You would get:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/1282577/97069063-017e9b00-1619-11eb-940d-35428f56c4d9.png"><img width="115" alt="a coloured output string" src="https://user-images.githubusercontent.com/1282577/97069063-017e9b00-1619-11eb-940d-35428f56c4d9.png" style="max-width: 100%;"></a></p>
<p dir="auto">Which takes advantage of all the other benefits of the output algorithm.</p>
<p dir="auto">Therefore if we had another symbol that returned a more structured set of information, we could use the same algorithms to colourise the output and otherwise pretty print it.  I would propose that we create <code class="notranslate">Symbol("Deno.richCustomInspect")</code> which would require a return of a tuple value of two strings.  The first string would be the <em>name</em> for the inspector and the second value would be a JSON string, which would be parsed by the inspector.</p>
<p dir="auto">So for example if I wanted a rich output for <code class="notranslate">Headers</code>, I would do something like this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class Headers {
  [Symbol.for(&quot;Deno.richCustomInspect]() {
    const output = {};
    for (const [key, value] of this[headersData]) {
      output[key] = value;
    }
    return [ &quot;Headers&quot;, JSON.stringify(output) ];
  }
}"><pre class="notranslate"><span class="pl-k">class</span> <span class="pl-v">Headers</span> <span class="pl-kos">{</span>
  <span class="pl-kos">[</span><span class="pl-v">Symbol</span><span class="pl-kos">.</span><span class="pl-c1">for</span><span class="pl-kos">(</span><span class="pl-s">"Deno.richCustomInspect]() {</span>
<span class="pl-s">    const output = {};</span>
<span class="pl-s">    for (const [key, value] of this[headersData]) {</span>
<span class="pl-s">      output[key] = value;</span>
<span class="pl-s">    }</span>
<span class="pl-s">    return [ "</span><span class="pl-v">Headers</span>", JSON.stringify(output) ];
  }
}</pre></div>
<p dir="auto">This would allow complex modelling of the internals, but ensure serialisation to a consistent format that can be handled by the inspector.</p>