web-dev-qa-db-ja.com

console.log（）がjQuery選択オブジェクトのHTMLを出力しない

Google Chromeで_console.log_を使用すると問題が発生しました。突然$(this)のような要素を出力していたとき、次のように表示されました：

_[<div>, context: <div>]
_

または

_[jQuery.fn.jQuery.init[1]]
_

コンソールで。 （両方とも同じ行から来ました：console.log($(this))）

この問題は昨日、どこからともなく発生しました。コードに問題はありません。私は他のコンピューターでまったく同じことを記録しましたが、次のように表示されています：

_[<div class='element'></div>, ...]
_

更新：新しいChrome=バージョンはconsole.log()の出力を変更します

Google Chromeコンソールの元の設定に戻る方法を知っている人はいますか？

javascriptgoogle-chromeconsole
22
hgerdin

質問に答えるには：

  • Google chromeコンソールの元の設定に戻す方法を知っている人はいますか？

Console.log（）の以前の出力を取得するための設定はありません。次のいずれかを実行できます。

  • ブラウザをダウングレードします（古いバージョンのchromeまたは クロムベースの代替 を使用します）
  • 独自のconsole.log()を追加してfunction log()を上書きします
  • 場合によってouterHTMLを使用するか、chrome 25.0.1323.1（devチャンネル）にアップグレードします。ここで、console.log（$（＃Selector）[0]）; outHMTLを再度返します（以下を参照）。

Chrome 23/24：console.log（）の出力が変更されましたsometimes

User916276によると、console.log（jQuery-Object）の出力が変更されました。

_// output of console.log($jQuerObject) 
[<div class='element'></div>, ...] // in chrome <= 23
[<div>, context: <div>]            // in chrome 24
_

ユーザー brentonstrine は、context.outerHTMLが常に機能するとは限らないという事実に気付きました。

新しい例 でコードを更新しました。 _jqObject.context.outerHTML_の存在は、jQuery-Objectを関数に渡す方法に依存するようです。 chrome dev channel （25.0.1323.1）と2つのクロムベースのバージョン（21、22）でテストしました。

_console.log($(this)); // old chrome versions 
// new chrome version >23
// if you pass this to the function see my getThis(_this) function
console.log($(this).context.outerHTML); 
// if you use a jQuery selector
console.log($(this)[0]);   // at least in chrome build 25.0.1323.1
_

誤解を避けるため。この回答は、jQueryオブジェクトを最近のGoogle chromeブラウザ（バージョン24、25）の inbuild console に書き込む動作の変更に関するものです。

Chromeソースコード

chromeソースコードの変更を確認しました Console.cppで および タイムラインビュー で-の変更を確認します- WebInspector 。 console.log()の変更された動作の原因となる正確な変更を見つけることができませんでした。 ConsoleView.jsへの変更 、 2 、と関係があると思います。 console.log()がChrome 21、22と同じ出力を返すことを開始したい場合は、バグを報告できます。この twobugs は、変更要求を配置するためのテンプレートとして使用できます。

15
surfmuggle

console.log.apply(console, $(this));

10
brentonstrine

$（this）は、基になるDOMオブジェクトではなくjQuery選択オブジェクトを参照するため、出力は正しいです。

生のDOM要素を出力する場合は、次を試してください。

 console.log( $( this ).get(0) ) 
 // Or just 
 console.log( this )

または、次のこともできます。

 console.log( $( this ).html() )
6
Mikko Ohtamaa

ここに、私が発見したconsole.log.apply(console, obj);よりもさらに良い解決策があります。 objがjQueryセレクターの結果セットである場合、ほぼ同じ出力を提供するconsole.dirxml(obj);を確認してください。ただし、objがjQueryセレクターの結果セットの特定の要素である場合にのみ機能します。

このページでできるデモはこちらです...

var i=0
console.log(++i);
console.dirxml($$('.answer'));
console.log(++i);
console.dirxml($$('.answer')[0]);
console.log(++i);
console.log.apply(console, $$('.answer'));
console.log(++i);
console.log.apply(console, $$('.answer')[0]);

＃4のログが「未定義」であることがわかります。

Performed at the console on this very page.

それで、これからはconsole.dirxmlそれはシンプルで効果的で、組み込まれているからです。consoleの最初の引数としてapplyを渡さなければならないのは、とにかく私と一緒に座ったことはありません。

3
Bruno Bronosky

デフォルトでは、chromeは、console.log（$（element））を実行すると、その要素に関連するすべての詳細を含むオブジェクトを返します。

実際に返されるものの例

  console.log($('input:first'));
  [<input>, prevObject: c.fn.c.init[1], context: #document, selector: "input:first"] 
  0: <input>
  context: #document
  length: 1
  prevObject: c.fn.c.init[1]
  selector: "input:first"
  __proto__: Object[0]

もしconsole.log（$（ 'input：first'）[0]）を行うと、あなたは望ましい結果を得るでしょう。

お役に立てれば

2
achand8238

@brentonstrineの回答の編集は拒否されたため、新しい回答を作成します。しかし、さらに良い解決策については、 このページの他の答え を参照してください。

このデモでは、この新しい方法と通常の方法のロギングを重視する理由を示しています...

// paste this whole block into the console of THIS PAGE and see a working demo!

var domlog = function(obj){ console.log.apply(console, obj); };

domlog($('#answer-13594327'));

// compare ^that^ to the normal element logging...

var normallog = function(obj){ console.log(obj); };

normallog($('#answer-13594327'));

Demo of the 2 different loggin metods

1
Bruno Bronosky
console.log.apply(console, [].slice.call($('p'), 0))
-> ►<p>…</p>, ►<p>…</p>, <p class="label-key">viewed</p>

更新：簡単なソリューション .

コンソール出力の変更の背後にある根拠：

Attributes/textContentを含めないという要求の根拠は何ですか？

DevTools開発者pfeldmanからの回答：

dOMリストをダンプする人は、緻密な外観を高く評価しています。

crbug.com/50316

1
NVI

これは私の解決策であり、console.logを自分の関数でラップするため、問題が発生した行番号を教えてくれないが、重要なログメッセージを出力することで補うなど、いくつかの欠点があります...誰かが望むならそれを改善してください！

注：_underscore.js_は依存関係です。純粋なJSで実行できると確信していますが、私は常にunderscore.jsに依存しています:)

_// wrap the console.log function
var log = function(data) {
    // switch setting
    var allowed = true;
    if (allowed) {
        console.log("LOG");
        console.log(typeof data);
        if (typeof data == "object" || typeof data == "array") {
            _.each(data, function(item) {
                console.log(item);
            });
        } else {
            console.log(data);
        }
    };
_

ここに持ち帰るメッセージは次のとおりです。

_if (typeof data == "object" || typeof data == "array") {
            _.each(data, function(item) {
                console.log(item);
            });
        } else {
            console.log(data);
        }
_

その後、あなたはただ：log($(".some.class"));とコンソールで_old school_ DOMオブジェクトとして要素を取得します。

0
Victor S