debugging - principiante - panel de control google analytics

¿Cómo depurar errores de enlace de plantilla para KnockoutJS?

Question

Sigo teniendo problemas con la depuración de problemas en las plantillas KnockoutJS.

Digamos que quiero enlazar a una propiedad llamada " items ", pero en la plantilla hago un error tipográfico y me vinculo a la propiedad (no existente) " item ".

Usar el depurador de Chrome solo me dice:

"item" is not defined.

¿Existen herramientas, técnicas o estilos de codificación que me ayuden a obtener más información sobre el problema de enlace?

Answer 1

Guía paso por paso

1. Para esta guía, usaremos uno de los ejemplos oficiales de KnockoutJS .
2. Digamos que quieres ver los datos detrás del segundo contacto (Sensei Miyagi).
3. Haga clic derecho en el primer cuadro de entrada del segundo contacto (el que tiene el texto ''Sensei'').
4. Seleccione ''Inspeccionar elemento''. Se abrirá la barra de herramientas para desarrolladores de Chrome.
5. Abra la ventana de la consola de JavaScript. Puede acceder a la consola haciendo clic en el icono >= en la esquina inferior izquierda de la barra de herramientas para desarrolladores de Chrome, o abriendo la pestaña "Consola" en la barra de herramientas para desarrolladores de Chrome, o presionando Ctrl + Shift + J
6. Escriba el siguiente comando y presione Entrar: ko.dataFor($0)
7. Ahora debería ver los datos que están vinculados a la segunda fila. Puede expandir los datos presionando el pequeño triángulo a la izquierda del Objeto para navegar por el árbol de objetos.
8. Escriba el siguiente comando y presione Entrar: ko.contextFor($0)
9. Ahora debería ver un objeto complejo que contiene todo el contexto de Knockout, incluida la raíz y todos los padres. Esto es útil cuando está escribiendo expresiones de enlace complejas y desea experimentar con diferentes construcciones.

¿Qué es esta magia negra?

Este truco es una combinación de la característica de $ 0- $ 4 de Chrome y los métodos de utilidad de KnockoutJS . En resumen, Chrome recuerda qué elementos ha seleccionado en la barra de herramientas para desarrolladores de Chrome y expone estos elementos bajo el alias $0 , $1 , $2 , $3 , $4 . Por lo tanto, cuando hace clic con el botón derecho en un elemento de su navegador y selecciona ''Inspeccionar elemento'', este elemento queda automáticamente disponible bajo el alias $0 . Puedes usar este truco con KnockoutJS, AngularJS, jQuery o cualquier otro marco de JavaScript.

El otro lado del truco son los métodos de utilidad de KnockoutJS, ko.dataFor y ko.contextFor:

• ko.dataFor(element) : devuelve los datos que estaban disponibles para enlazar con el elemento
• ko.contextFor(element) : devuelve el contexto de enlace completo que estaba disponible para el elemento DOM.

Recuerde, la Consola de JavaScript de Chrome es un entorno de ejecución de JavaScript completamente funcional. Esto significa que no estás limitado a solo mirar las variables. Puede almacenar la salida de ko.contextFor y manipular el modelo de vista directamente desde la consola. Pruebe var root = ko.contextFor($0).$root; root.addContact(); var root = ko.contextFor($0).$root; root.addContact(); y mira lo que pasa :-)

Feliz depuración!

Answer 2

Creé un proyecto github llamado knockthrough.js para ayudar a visualizar estos errores.

https://github.com/JonKragh/knockthrough

Destaca los errores de enlace y proporciona un volcado del datacontext en ese nodo.

Puedes jugar con una muestra aquí: http://htmlpreview.github.io/?https://github.com/JonKragh/knockthrough/blob/master/default.htm

Gracias a RP Niemeyer por sus excelentes muestras de código de Knockout en SO para llegar a este punto.

Answer 3

Echa un vistazo a una cosa muy simple que uso:

function echo(whatever) { debugger; return whatever; }

O

function echo(whatever) { console.log(whatever); return whatever; }

Luego en html, digamos, tenías:

<div data-bind="text: value"></div>

Solo reemplazalo con

<div data-bind="text: echo(value)"></div>

Más avanzado:

function echo(vars, member) { console.log(vars); debugger; return vars[0][member]; }

<div data-bind="text: echo([$data, $root, $parents, $parentContext], ''value'')"></div>

Disfrutar :)

ACTUALIZAR

Otra cosa molesta es cuando intentas enlazar a un valor indefinido. Imagine en el ejemplo anterior que el objeto de datos es solo {} no {valor: ''texto''}. En este caso, estarás en problemas, pero con el siguiente ajuste estarás bien:

<div data-bind="text: $data[''value'']"></div> 

Answer 4

Encontré otro que puede ser útil. Estaba depurando algunos enlaces e intenté usar el ejemplo de Ryans. Me dio un error que JSON encontró un bucle circular.

<ul class="list list-fix" data-bind="foreach: detailsView().tabs">
 <li>
   <pre data-bind="text: JSON.stringify(ko.toJS($parent), null, 2)"></pre>
   <a href="#" data-bind="click: $parent.setActiveTab, text: title"></a>
 </li>
</ul>

Pero, utilizando este enfoque, se reemplazó el valor de enlace de datos con lo siguiente:

  <ul class="list list-fix" data-bind="foreach: detailsView().tabs">
    <li>
      <pre data-bind="text: ''click me'', click: function() {debugger}"></pre>
      <a href="#" data-bind="click: $parent.setActiveTab, text: title"></a>
    </li>
  </ul>

Ahora, si hago clic en el elemento PRE mientras tengo abierta la ventana de depuración de Chrome, obtengo una ventana de variables de alcance bien llena.

Encontré una manera un poco mejor para ello:

<pre data-bind="text: ko.computed(function() { debugger; })"></pre>

Answer 5

Si está desarrollando en Visual studio e IE, me gusta más data-bind="somebinding:(function(){debugger; return bindvalue; })()" Me gusta más la función echo, ya que irá al script con Todos los enlaces en lugar del archivo eval y puedes mirar los datos $ context $ (yo también uso esto en Chrome);

Answer 6

Si está utilizando Chrome para el desarrollo, hay una gran extensión (con la que no estoy afiliado) llamada depurador de contexto de Knockoutjs que le muestra el contexto de enlace directamente en el panel Elementos de las Herramientas del desarrollador.

Answer 7

Todas las otras respuestas funcionarán muy bien, solo estoy agregando lo que me gusta hacer:

En su vista (asumiendo que ya ha enlazado un ViewModel):

<div data-bind="debugger: $data"></div>

Código de nocaut:

ko.bindingHandlers.debugger = {
    init: function (element, valueAccessor) {
        debugger;
    }
}

Esto pausará el código en el depurador, y element y valueAccessor() contendrán información valiosa.

Answer 8

Una cosa que hago muy a menudo cuando hay un problema con qué datos están disponibles en un determinado ámbito es reemplazar la plantilla / sección con algo como:

<div data-bind="text: ko.toJSON($data)"></div>

O, si quieres una versión un poco más legible:

<pre data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></pre>

Esto escupirá los datos que se están enlazando en ese ámbito y le permitirá asegurarse de que está anidando las cosas adecuadamente.

Actualización: a partir de KO 2.1 , puede simplificarlo a:

<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>

Ahora los argumentos se pasan a JSON.stringify .

Answer 9

Define a bindingHandler una vez , en algún lugar de los archivos de la biblioteca de JavaScript.

ko.bindingHandlers.debug = 
{
    init: function(element, valueAccessor) 
    {
        console.log( ''Knockoutbinding:'' );
        console.log( element );
        console.log( ko.toJS(valueAccessor()) );
    }
};

que simplemente usarlo le gusta esto:

<ul data-bind="debug: $data">

Ventajas

• Usa toda la potencia del depurador de Chrome, como Revelar en el Panel de elementos
• No tiene que agregar elementos personalizados a su DOM, solo para la depuración

Answer 10

La forma más fácil de ver qué datos se pasan al enlace es soltar los datos en la consola:

<div data-bind="text: console.log($data)"></div>

Knockout evaluará el valor para el enlace de texto (de hecho, se puede usar cualquier enlace aquí ) y descarga $ data al panel del navegador de la consola.