Cuando la creación de sitios web a menudo utilizo jQuery .data() función para agregar datos a los elementos.

Es posible visualizar todos los datos que se almacenan con un elemento en Chrome?

Así que cuando me inspeccionar un elemento que muestra los datos en Chrome sí mismo.

Si no sería posible escribir un plugin para ‘ampliar’ Chrome element inspector también mostrar a los datos?

InformationsquelleAutor PeeHaa | 2011-05-09

5 Comentarios

  1. 35

    Abrir el inspector, y en la consola, escriba

    $('<some selector>').data()

    y, a continuación, pulse la tecla de retorno para evaluar la data() método y mostrar su valor de retorno directamente.

    No hay necesidad de utilizar console.log a menos que usted está llamando dentro de la no-interactivo de código.

    • Esto no me ayuda. Yo iterar a través de una serie de div’s que tienen la misma clase y de la tienda indivindual de datos para cada uno. Ahora quiero ver este tipo de datos, pero no puedo seleccionar estas div de forma individual y utilizando su enfoque, fácilmente.
    • Trate de $('<some selector>').map(function (el) { return el.data(); })
    • Sugerencia: si selecciona un elemento en el que Elementos de la ventana, se convierte en $0 en la consola. A continuación, puede introducir $($0).data() Otro consejo: ver ambos Elementos y de la Consola en una pantalla dividida con el Esc.
    • BobStein-VisiBone: La Magia! No se pudo encontrar esta información en cualquier lugar, y debe ser aceptada respuesta.
    • $0 podría ser mi favorito de la punta en un largo tiempo. Muy fresco.
    • De acuerdo con Wade Hatler. Esta es la segunda impresionante consejo para mí el día de hoy. El otro era el de Chrome «Establecer como Variable Global’ característica.

  2. 17

    Chrome Consulta

    Se puede encontrar en la Las Extensiones De Chrome Webstore y añade otra pestaña para el panel de propiedades en las herramientas de desarrollo.

    • Perfecto, muchas gracias! Su respuesta debe ser la nueva aceptado respuesta.
    • La extensión hace lo que debe. Realmente confortable. El dev de la barra debe ser cerrado y vuelto a abrir después de la instalación.
    • Esto parece que ha dejado de trabajar en la última versión de Chrome
    • Extensión tipo de obras, pero los campos de datos no se actualizan en vivo a medida que cambian.
  3. 6

    Tipo en el cromo de la consola:

    console.log($('selector').data());

    y aparecerá una lista de los data en un elemento que

    • Si la ejecución de este en el interior de la consulta, puede dejar fuera de la console.log(…) y ejecutar sólo $('selector').data(). El resultado se mostrarán en la consola.
  4. 2

    Por esta razón, yo no uso el $(selector).data() patrón, y, en lugar de eso utiliza un HTML más natural $(selector).attr('data-name','value') que agrega los valores para el código HTML real.

    $(selector).attr('data-name','value') no funciona en IE8+ navegadores. .data() es el preferido. Además, un usuario definido var como decir: data-name no es un atributo de HTML.

    • De acuerdo, esto es una manera más visible el patrón de datos()’
    • Estoy de acuerdo que los tipos de datos simples pero, ¿qué acerca de los tipos complejos?
    • Yo podría argumentar que usted debe tener un viewmodel, o un dataModel, dependiendo de sus patrones. en octavos de final se puede ver el nodo de contexto. en otros patrones sólo se puede almacenar un ID allí y, a continuación, mirar hacia arriba a través de la delegación basado en el ID. incluso hay plugins para chrome que muestran el nodo de contexto por Nocaut en el depurador/inspector.

Dejar respuesta

Please enter your comment!
Please enter your name here