初めに

初めて使ったCodeSandboxのコンソールのHTML表記方法でつまづいたのでまとめます

問題

CodeSandboxでコンソールを表示した際、HTMLの形で表示されず困りました
例）

exsample.js

const li = document.createElement("li");
console.log(li)

↓ 理想のコンソール表記

理想

<li> </li>

↓ 現実のコンソール表記

現実

▶ HTMLLIElement

-----------------------------
”▶” から展開が可能で以下のようになる（一部抜粋）
type: ""
value: 0
ATTRIBUTE_NODE: 2
CDATA_SECTION_NODE: 4
COMMENT_NODE: 8
・
・
・

(一応）解決

Udemyを使って勉強をしていたため、Q&Aを見たところ答えがありました
console.logを出す際に、.outerHTMLをつけよ！！とのことでした
先ほどの例だと以下のようになります

exsample.js

const li = document.createElement("li");
console.log(li.outerHTML)

これで解決かと思ったら、なぜか ” li ” タグの子に設定していた" p "タグが出力されました。なんでやねん
これに関してはブラウザのキャッシュを削除したことろ解消しました

また、せっかくHTML表記で出せるなら下記のようにしたいですよね！ね？

もっと理想

<li>
    <div>
        <p> </P>
    </div>
</li>

現実

<li><div><p> </P></div></li>

これについては問題解決を諦めました
誰かすごい人がなんとかしてくれることを祈ります
（その前に私はちゃんとした開発環境を整えたいと思います。）

終わりに

ここで1時間以上を使ってFXで有り金全部溶かしたような顔になっていましたが、UdemyのQ&Aに救われました。
同じ問題にぶち当たる人が5分で解決できるように記事を作成いたしました（届きますように）
引き続き勉強を頑張ります。