Console.log() не выводит HTML из объекта выбора jQuery

Ответ 1

Чтобы ответить на вопрос:

• Кто-нибудь знает, как я могу вернуться к исходным настройкам консоли Chrome Chrome?

Нет настроек, чтобы получить первый вывод console.log(). Вы можете:

• понизить браузер (используйте устаревшую версию chrome или альтернативы на основе хрома)
• перезапишите console.log(), добавив свой собственный function log()
• используйте outerHTML в некоторых случаях или обновите до chrome 25.0.1323.1 (dev channel), где console.log($ (# Selector) [0]); снова возвращает HMTL (см. ниже).

Chrome 23/24: вывод команды console.log() изменен иногда

В соответствии с 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) и двумя версиями на основе хрома (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 в inbuild console из последних браузеров Chrome Chrome (версия 24, 25).

Исходный код Chrome

Я просмотрел изменения исходного кода chrome на Console.cpp и в вид временной шкалы, чтобы узнать об изменениях WebInspector. Я не смог найти точное изменение, которое отвечает за измененное поведение console.log(). Я предполагаю, что это связано с изменениями в ConsoleView.js, 2, 3. Если кто-то захочет инициировать, что console.log() возвращает тот же результат, что и в Chrome 21, 22, он может подать ошибку. Это два bugs можно использовать как шаблон для размещения запроса на изменение.

Ответ 2

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

Ответ 3

Результат корректен, поскольку $(this) относится к объекту выбора jQuery, а не к базовому объекту DOM.

Если вы хотите вывести необработанные элементы DOM, вы можете попробовать следующее:

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

Или вы также можете сделать:

 console.log( $( this ).html() )  

Ответ 4

Вот еще лучшее решение, чем console.log.apply(console, obj);, которое я только что открыл. Проверьте console.dirxml(obj);, который дает почти тот же результат, когда obj является набором результатов селектора jQuery. Однако только последний работает, когда 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 регистрирует "undefined".

Итак, теперь я буду использовать console.dirxml, потому что он прост, эффективен и встроен. Чтобы пройти console в качестве первого аргумента apply, я никогда не сидел со мной.

Ответ 5

По умолчанию chrome теперь возвращает объект со всеми сведениями, относящимися к этому элементу, когда u делает 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]), вы получите желаемый результат.

надеюсь, что это поможет

Ответ 6

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

Обновление: Упрощенное решение.

Обоснование за консольным выходом:

В чем заключалось обоснование просьбы не включать атрибуты /TextContent?

Ответ от pfeldman, разработчика DevTools:

люди, которые сбрасывают списки DOM, ценят плотный внешний вид.

crbug.com/50316

Ответ 7

Мое редактирование ответа @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'));

Ответ 8

Это мое решение, чтобы обернуть console.log в моей собственной функции, у него есть некоторые недостатки, например, он не говорит вам номер строки, в которой возникла проблема, но я делаю это путем вывода значимых сообщений журнала... if любой хочет улучшить его, не стесняясь!

Примечание: 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 в консоли.