web-dev-qa-db-ja.com

Google ChromeがjQueryを介して異なるconsole.log（）出力を持つのはなぜですか？

Jqueryオブジェクトをコンソールログに記録するとき。

var s = $("#item");
console.log(s);

私はこのようなものを手に入れます

[div#item, context: document, selector: "#item", jquery: "1.9.1", constructor: function, init: function…]

以前（1か月ほど前）に、次のようなものが表示されたことを覚えています。

 [<div id="item">pas</div>]

この変更はChrome自体ですか？またはjqueryに変更がありましたか？または実際に出力の外観を変えるために何かをしましたか？

この2番目の出力ははるかに読みやすく、これにカーソルを合わせてページにマークを付けることができます。今、私はあまりにも多くの情報を取得し、それを読むのはかなり難しいです

jquerygoogle-chromeconsole.log
14
Zokora

はい、jqueryに変更がある可能性があります。バージョン1.9.1でdomオブジェクトをどのように処理しているかを確認してください。

http://jsfiddle.net/5HJ3L/1/

この方法でconsole.logを試してみると

var s = $("#item");
console.log(s);

出力は次のようになります

[div#item, context: document, selector: "#item", jquery: "1.9.1", constructor: function, init: function…]
0: div#item
context: document
length: 1
selector: "#item"
__proto__: Object[0]

よく確認すると、上記の配列のキー0に必要な出力があるので、次の行の出力は次のようになります。

console.log(s[0]);

出力：

<div id="item">pas</div>

また、jqueryなしで試してみると、出力は必要なものになります

var e = document.getElementById('item');
console.log(e);

出力：

<div id="item">pas</div>

PS：これはjqueryに対する提案ではなく、google-chromeによってどのように処理されるかを示すためのものです。

訂正：また、質問の出力の言及はarray形式であるのに対し、私が提案した方法はstringであることに注意してください。

1
zzlalani

あなたが気付いていると思うのは、コンソールでjQueryオブジェクトを評価することと、それをconsole.log()で表示することの違いです。 David Thomasの fiddle を使用して、_console.log_ステートメントにブレークポイントを設定します。ブレークポイントで停止したら、コンソールに_$s_と入力すると表示されます

_[<div id="item">pas</div>]
_

次に続行すると、console.log()によって出力された冗長オブジェクトが表示されます。

JQueryまたはChromeが何をしているのか、この違いが生じるのかよくわかりません。_$s_と入力したときの出力は、$s.toArray()の結果のようです。一方、console.log()は実際のjQueryオブジェクトを示しています。

これが新しい動作ではないことのより多くの証拠-私は11月から重複した質問をリンクしました。

1
Barmar

試してみてください...

var s = $("<div>").append($("#item").clone()).html();

console.log(s);

$(s).remove();

それはその最も美しい形ではありませんが、結果はあなたが探しているものであり、あなたはそれのための良い機能を思い付くことができると確信しています...

基本的に、私はdivを作成し、それに#itemのコピーを入れ、＃item要素全体を表示するためにdivのinnerHTMLをコンソールに吐き出します。 （#itemのinnerHTMLだけでなく）次に、sを破棄してクリーンアップします。

1
JxAxMxIxN

コンソールログ出力の出力スタイルは、c style console.logで制御できます： https://developers.google.com/web/tools/chrome-devtools/console/console-write#styling_console_output_with_css

たとえば、単純なdom要素スタイルで出力するには：

console.log("%o", document.body)
1
Daiwei

JqueryではなくDOM要素を送信するコンソールで期待される結果が得られました。

console.log($("div")[0])
0
Paulo Lima
var s = $("#item").html();
console.log(s)
0
Amol Navsupe