javascript - insertar - console.log() no genera código HTML del objeto de selección jQuery

innerhtml jquery ejemplos

Question

Tengo un problema al utilizar console.log en Google Chrome. De repente, cuando estaba emitiendo un elemento como $(this) , se mostraba como:

[<div>, context: <div>]

o

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

en la consola (Ambos vinieron de la misma fila: console.log($(this)) )

Este problema surgió ayer de la nada. No hay un problema con el código. Registré exactamente lo mismo en otra computadora y allí se muestra como:

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

Actualización: la nueva versión de Chrome cambia la salida de console.log()

¿Alguien sabe cómo puedo volver a la configuración original de la consola de Google Chrome?

Answer 1

Aquí hay una solución aún mejor que console.log.apply(console, obj); que acabo de descubrir. Echa un vistazo a console.dirxml(obj); que da casi la misma salida cuando obj es un conjunto de resultados de jQuery selector. Sin embargo, solo este último funciona cuando obj es un elemento específico de un conjunto de resultados de jQuery selector.

Aquí hay una demo que puedes hacer en esta página ...

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]);

Verás que los registros # 4 "indefinidos".

Por lo tanto, de ahora en adelante console.dirxml porque es simple, efectivo y está integrado. Tener que pasar la console como primer argumento para apply nunca me sentó bien.

Answer 2

De forma predeterminada, Chrome ahora devuelve un objeto con todos los detalles que pertenecen a ese elemento cuando haces una console.log ($ (element)).

Un ejemplo de lo que realmente devuelve.

  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]

así que si u hace console.log ($ (''input: first'') [0]) u obtendríamos el resultado deseado.

espero que esto ayude

Answer 3

Esta es mi solución, para ajustar console.log en mi propia función, tiene algunas deficiencias, como si no le indicara el número de línea en el que se produjo el problema, pero lo compensé al enviar mensajes de registro significativos ... si alguien quiere ¡Mejórala, siéntete libre!

Nota: underscore.js es una dependencia, estoy seguro de que puedes hacerlo en JS puro, pero siempre dependo de 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);
        }
    };

El mensaje para llevar a casa aquí es:

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

Entonces solo haces: log($(".some.class")); y obtener los elementos como objetos DOM de la old school en la consola.

Answer 4

La salida es correcta, ya que $ (esto) hace referencia al objeto de selección jQuery, no al objeto (s) DOM subyacente.

Si desea generar el (los) elemento (s) DOM en bruto, puede intentar lo siguiente:

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

O también puedes hacer:

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

Answer 5

Mi respuesta a la respuesta de @ brentonstrine fue rechazada, así que voy a hacer una nueva respuesta para ella. Pero vea mi otra respuesta en esta página para una solución aún mejor .

Esta demostración le muestra por qué nos importa registrar esta nueva forma en comparación con la forma normal ...

// 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''));

Answer 6

Para responder a la pregunta:

• ¿Alguien sabe cómo puedo volver a la configuración original de la consola de Google Chrome?

No hay configuraciones para obtener la salida anterior de console.log (). Tu también puedes:

• degradar el navegador (use una versión anterior de cromo o alternativas basadas en cromo )
• sobrescriba console.log() agregando su propio function log()
• use outerHTML en algunos casos o actualice a chrome 25.0.1323.1 (canal de desarrollo) donde console.log ($ (# Selector) [0]); devuelve outHMTL de nuevo (ver más abajo).

Chrome 23/24: la salida de console.log () cambió algunas veces

De acuerdo con user916276, la salida de console.log (jQuery-Object) ha cambiado:

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

El usuario brentonstrine me hizo consciente del hecho de que mi context.outerHTML no siempre funciona.

Actualicé mi código con un nuevo ejemplo . Parece que la existencia de jqObject.context.outerHTML depende de cómo se pasa el objeto jQuery a la función. Lo probé con el canal de desarrollo de cromo (25.0.1323.1) y dos versiones basadas en cromo (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

Para evitar malentendidos. Esta respuesta trata sobre el comportamiento modificado de escribir un objeto jQuery en la consola interna de los navegadores recientes de Google Chrome (versiones 24, 25).

Código fuente de Chrome

Eché un vistazo a los cambios en el código fuente de Chrome en Console.cpp y en la vista de la línea de tiempo para obtener información sobre los cambios en el WebInspector . No pude encontrar el cambio exacto que es responsable del comportamiento cambiado de console.log() . Supongo que tiene que ver con los cambios realizados en ConsoleView.js , 2 , 3 . Si alguien quisiera iniciar ese console.log() devuelve la misma salida que en Chrome 21, 22, podría presentar un error. Estos two bugs podrían utilizarse como una plantilla para colocar la solicitud de cambio.

Answer 7

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

Answer 8

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

Actualización: Solución más sencilla .

Justificación detrás del cambio de salida de la consola:

¿Cuál fue la razón detrás de la solicitud para no incluir atributos / contenido de texto?

Respuesta de pfeldman, desarrollador de DevTools:

Las personas que vuelcan las listas de DOM aprecian el aspecto denso.

crbug.com/50316