@scripcryptorposted at 2023-10-27

chromeのconsole.logでDOM表示するとタグ形式だったりオブジェクト形式だったりする

Q&A

Closed

chromeを使ってjavascriptの開発をしていたら、console.logでのDOMの表示形態が変わってしまいました。先ほどまではずっとタグ形式で表示されていたのですが、どこかを弄ったのか・・・オブジェクト形式で表示されるようになってしまいました。これは設定によるものなのかご存じの方はいらっしゃいますでしょうか？

尚、developperToolの設定から”デフォルトを復元して再読み込み”を押すとタグ形式表示に戻るのですが、同じページを再読み込みするとまたオブジェクト形式表示に戻ってしまいます。

設定などで表示形式を指定する事は可能なのでしょうか？
よろしくお願いします。

【タグ形式の時】

【オブジェクト形式の時】

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>consoleLog Test</title>
</head>
<body>
	<div class="bxe-line"></div>
	<img id="editor_caret" src="/common/image/editor_caret.gif" class="hide">
</body>
<script>
	const div=document.querySelector(".bxe-line");
	div.setAttribute("style","top:0px;left:0px;");
	console.log(div);
	const caretImg=document.querySelector("#editor_caret");
	caretImg.setAttribute("style","top:0px;left:0px;");
	console.log(caretImg);
</script>
</html>

【追記】
OSはwindows11です。
chromeのバージョンは118.0.5993.117（Official Build）です。

5Answer

@uasi posted at 2023-10-27

以下のようにフォーマット指定子 %o を使うと常にタグ形式で出力できそうなので、試してみてください。

	const div=document.querySelector(".bxe-line");
	div.setAttribute("style","top:0px;left:0px;");
	console.log("%o", div);

ちなみに、タグ形式は console.log() の仕様書でいう optimally useful formatting で、オブジェクト形式は generic JavaScript object formatting です。 console.log() がどちらの形式で出力するかは仕様になく実装依存ですが、 %o のようなフォーマット指定子があれば考慮されるとあります。

また console.log() の形式を固定するような設定は見当たりませんでした。

1Like

Comments

@scripcryptor

Questioner

ありがとうございます。
早速試してみましたが、状態は同じでした。何度も再読み込みをした時にたまにタグ形式で表示される事がありますが、ほとんどはオブジェクト形式での表示でした。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>consoleLog Test</title>
</head>
<body>
	<div class="bxe-line"></div>
	<img id="editor_caret" src="/common/image/editor_caret.gif" class="hide">
</body>
<script>
	const div=document.querySelector(".bxe-line");
	div.setAttribute("style","top:0px;left:0px;");
	console.log("%o",div);
	const caretImg=document.querySelector("#editor_caret");
	caretImg.setAttribute("style","top:0px;left:0px;");
	console.log("%o",caretImg);
</script>
</html>

@uasi
なるほど。 %o を指定してもタグ形式に対応していない普通のオブジェクトを渡すとオブジェクト形式にフォールバックしますが、そちらの環境では DOM を渡してもフォールバックが起きているようですね。

私の環境では全く同じバージョンの Chrome でも問題が再現しないので、これ以上の調査は難しそうです。
@scripcryptor
Questioner
わかりました。ありがとうございます。

@changkejun posted at 2023-10-27

まったく同じバージョンのchromeですが、オブジェクト形式のログはありません。全部タグ形式です。

もしかして、OSが不安定状態でしょうか。再起動したらいかがですか。
chromeの拡張機能などの影響かどうか。拡張機能を停止して再テストしたらいかがですか。

1Like

Comments

@scripcryptor
Questioner
再起動は何度かしてます。OSかブラウザが重くなってるのかと思ったのですが、CPUもメモリも有り余ってる状態で動作も軽快です。私も今日までオブジェクト形式のログが出た事はありませんでした。拡張機能は再インストールの時に一旦全部外して試してみましたが同じでした。暫く様子を見てみます。

@SurferOnWww posted at 2023-10-27

OS が何かと Chrome のバージョンを書いてください。

コードはインデントされるように上下をバッククォート 3 文字で囲ってください。

Chrome のキャッシュを毎回消して試してますか？

1Like

Comments

@scripcryptor
Questioner
失礼しました。修正しました。
Chromeのキャッシュは毎回消して試していませんがそのようにした方が良いでしょうか？
@SurferOnWww

Chromeのキャッシュは毎回消して試していませんがそのようにした方が良いでしょうか？

最初の質問にあった JavaScript のコードを書き替えましたよね。キャッシュを消さないとそれが反映されないと思いますけど。

【追記】

最初の質問のコードで、自分の環境（Windows 10 22H2, Chrome 118.0.5993.118）で試してみましたが、質問者さんの言う「タグ形式」になります。

別のスレッド https://qiita.com/yamakawacho/questions/1f3e22863cc613be45d3 で何回か試しているうちに変わることがあるという話がありましたが、自分の環境では再現しません。

そのスレッドの私の回答で書いたように、ログを記録した瞬間の html タグを見たいのであれば、console.log(div) ではなくて console.log(div.outerHTML) としてはいかがですか。
@scripcryptor
Questioner
JavaScript のコードは特に書き換えてません。
@SurferOnWww

JavaScript のコードは特に書き換えてません。

いや、下の赤枠のコードを追加してますよね。違いますか？　違わないですよね。どうしてそういうことを言うの？
@scripcryptor
Questioner
最初はHTMLを貼り付けたらコードが表示されなかったからタグの開始文字を<に置き換えて載せただけです。ご指摘いただきましたのでコードの正しい記入方法を調べなおして<を戻した次第です。ですので動作する部分のコード自体は変更していません。
@scripcryptor
Questioner
outerHTMLで表示という方法はあるかと思いますが、ソース側のタグと全く同一かどうかの判断が出来ません。教えていただいた別のスレッドの方も拝見しました。他にも同様な方がいらっしゃるんですね。

@scripcryptor posted at 2023-10-27

多分・・・なんですけど、
HTMLがレンダリングされる前にconsole.log表示しようとすると、まだDOMになってないからオブジェクト型として表示され、レンダリングされた後であればタグ型で表示される、という事じゃないかと思われます。

と言うのは、私の開発環境ではオブジェクト型で表示されるものとタグ型で表示されるものが混在する事が発生しており、コードで違いを追うとappend()やsetAttribute()などレンダリング直後にconsole.logで表示している物にその傾向があるようだったからです。console.logを記述している部分をsetTimeoutで括ってやると常にタグ型表示になりました。以下の通りに書き換えたら10回再読み込みしてもオブジェクト型表示はされませんでした。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>consoleLog Test</title>
</head>
<body>
	<div class="bxe-line"></div>
	<img id="editor_caret" src="/common/image/editor_caret.gif" class="hide">
</body>
<script>
	let div=document.querySelector(".bxe-line");
	div.setAttribute("style","top:0px;left:0px;");
	let caretImg=document.querySelector("#editor_caret");
	caretImg.setAttribute("style","top:0px;left:0px;");
	setTimeout(()=>{
		console.log(div);
		console.log(caretImg);
	},100);
</script>
</html>

ブラウザが重くなっていたのか・・・PCを再起動してブラウザ立ち上げ直しても現象が変わらなかったので、パフォーマンスの問題では無いようです。（ブラウザ再インストールしてますし）

という事で今後この事象が発生したらsetTimeoutで括るなどで対応したいと思います。（その瞬間のログを取りたい時はouterHTMLなどでログを取る必要があります）

0Like

@scripcryptor posted at 2023-10-27

何度も再読み込みボタンを押し続けてるとタグ形式で表示されたりオブジェクト形式で表示されたり頻繁に切り替わる現象が確認できました。もしかしたらchromeがおかしくなってるのかもしれません。念のために再インストールしてみます。

0Like

Comments

@scripcryptor
Questioner
chromeの再インストールをしましたが状況は変わりませんでした。

Are you sure you want to delete the question?

chromeのconsole.logでDOM表示するとタグ形式だったりオブジェクト形式だったりする

5Answer

Comments

Comments

Comments

Comments

Your answer might help someone💌