Показать элементы при регистрации объекта jQuery в консоли Chrome Dev Tools?

Ответ 1

Если вы хотите, чтобы console.log() выплевывал элемент DOM, вам необходимо зарегистрировать элемент DOM, а не объект jQuery. Элемент DOM всегда доступен как 0-й элемент селектора jQuery. Таким образом, способ доступа к фактическому элементу DOM из селектора jQuery выглядит следующим образом:

   $("#someSingleDOMObjectSelector")[0]

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

   console.log($("#someSingleDOMObjectSelector")[0]);

И для селекторов jQuery, которые содержат/возвращают несколько элементов DOM, вы можете их закодировать следующим образом:

   $('.someMultipleDOMObjectSelector').each(function(){
           //console.log($(this)[0]); //or -->
           console.log(this);
   });

Что касается того, почему инструменты Chrome dev делают это, я могу только догадываться, что это сделано, потому что имеет смысл записывать объект jQuery в качестве объекта.

Ответ 2

Я нашел это полезным:

console.log.apply(console, $("a"));

Кроме того, если вы запустите console.log = inspect; внутри консоли, все будет выводить старый путь, но это не сработает, если вы просто сделаете это из своего кода, это должно быть из консоли.

Ответ 3

Это было нарушено разработчиками Chrome 12 ноября и не было исправлено с Canary сегодня.

Используйте https://github.com/pimvdb/jquery.chromelog, чтобы восстановить предыдущее поведение в качестве обходного пути.

Синтаксис несколько отличается:

$('a').log()

Но он предназначен для отражения старого, рабочего поведения Chrome.

Ответ 4

Отвечает ли это на ваш вопрос console.dir( element )..?

Update:
Не делайте этого

console.dir( $("el") ); // Dont do this

Но используйте:

console.dir( document.getElementById("el") ); // Do this

Ответ 5

Похоже, что это не будет исправлено в ближайшем будущем. У Chrome Canary все еще есть эта проблема. Мне нравится новое поведение консоли с предварительным просмотром объектов, но я хочу исключение для объектов jQuery.

Вы можете немного "запланировать" console.log, чтобы он отображал объекты jQuery, как раньше. Возможно "преобразовать" объекты jQuery в список отдельных аргументов. Например:

$('div');

В консоли может отображаться как:

console.log('[', div[0], div[1], ..., ']');

Я написал script, который будет изменять аргументы console.log только для объектов jQuery:

(function(){
    var arraySlice = Array.prototype.slice;
    var originalFunction = console.log;

    var replaceObject = function(sourceArray, objectIndex) {
        var currentObject = sourceArray[objectIndex];
        var spliceArguments = Array.prototype.slice.apply(currentObject);

        if(currentObject.length) {
            // add commas and brackets
            for(var i = spliceArguments.length - 1; i > 0; i--) {
                spliceArguments.splice(i, 0, ',');
            }
            spliceArguments.splice(0, 0, objectIndex, 1, '[');
            spliceArguments.splice(spliceArguments.length, 0, ']');

            // patch source array
            sourceArray.splice.apply(sourceArray, spliceArguments);
        } else {
            sourceArray.splice(objectIndex, 1, '[]');
        }
    };

    var fixFunction = function() {
    if(typeof jQuery === 'function' && jQuery.fn) {
        var newArgs = Array.prototype.slice.apply(arguments);
        for (var i = newArgs.length - 1; i >= 0; i--) {
            if(newArgs[i] instanceof jQuery) {
                replaceObject(newArgs, i);
            }
        }
        originalFunction.apply(console, newArgs);
    } else {
        originalFunction.apply(console, arguments);
    }
    };

    fixFunction.toString = function() {
        return originalFunction.toString();
    };

    console.log = fixFunction;
}())

Теперь вы можете включить этот script на своей странице, чтобы переопределить поведение консоли, но это не очень хороший способ устранить эту проблему, поэтому я обернул это в Расширение Chrome, которое будет делать это автоматически для всех страниц.