En este artículo quiero ofrecer unas pocas técnicas básicas para depurarel código JavaScript. Sea paciente con usted mismo y con la práctica de estatécnica de depuración pues así aprenderá. Muchos conocen estas técnicas en micaso me di varias caídas, hasta el sol de hoy, pero cada vez que caes en elmismo lugar después tientas y te das cuenta que hay fallaste la ultima vez y nola vuelves a cometer.
Trabajar conherramientas de desarrollo
Los dos navegadores más populares (dedesarrollo son Firefox y Chrome tododesarrollador que inician o esta, tiene que saber eso, sino es el caso retíresede esto ), ambos ofrecen un conjunto de herramientas que puede utilizar paragestionar el DOM. Google Chrome tiene su propio inspector de depuraciónintegrada, sin embargo los usuarios de Firefox ya están familiarizado con Firebug.
Ambas herramientas ofrecen un inspectorDOM, así como una ventana desde la consola. Mediante la consola se puede darsalida a las variables y la información almacenada en JavaScript. Tambien Sepodría comparar esto a la ventana de terminal para una aplicación PHP.
Hace una década, en los viejos tiempos la mayoría de los desarrolladoresde JavaScript le daban salida ha su código cuestionándolo en un cuadro de diálogo de alerta. Podrías probar variables y ver siestás recibiendo la respuesta adecuada a partir de un script del servidor. Sin embargo frente a estos mensajes dealerta interrumpe el flujo de la secuencia de comandos, y puede causar másproblemas.
console.error('1 ');
console.info('2 ');
console.log('3 ');
console.warn('4 ');
Los depuradores en línea de código
Junto con herramientas basadas en explorador haysitios web que puedes utilizar para comprobar la sintaxis de tu código. Unode mis favoritos es jsFiddle donde puedes ejecutar desde cualquier navegador moderno. Hay algunos buenos tutoriales sobre el sitio que se pueden encontrar buscando en Google.
En Chrome y Firebug tiene lasherramientas disponibles para el control de cada uno de los puntos deinterrupción en la secuencia de comandos. Laventana de resultados mostrará una serie de puntos de corte ajustando cadascript individual en su página web. Estaes probablemente la forma más sofisticada para depurar problemas ya que no esnecesario añadir mas código JavaScript . Echaun vistazo a la documentación paradesarrolladores de Chrome en punto interesante para para entender un poco más.
alerta ('1 ª vez ');
depurador;
alerta ('2 nd el tiempo ');
El código anterior debería funcionar sin tener que hacer nada a la ventana de laconsola. El comando depurador JavaScript ; coloca automáticamente un punto deinterrupción en esa línea en el script. Esto me parece que este método es un poco anticuado,ya que podemos utilizar plugins del navegador más avanzados para la gestión deestos puntos. Sin embargo probarambos métodos y evaluar cómo se siente.
De hecho, los puntos de interrupción ni siquiera pueden ser útil enmuchas de las secuencias de comandos! Cadasituación es muy distinta cuando se trata de escribir, implementar y probarJavaScript.
jQuery Ajax Errores
El objeto XMLHttpRequest es un método muy popular depasar datos dinámicos. El auge dela web 2.0 ha ido y venido con claridad,lo que nos deja en algún lugar en medio de una nueva revolución tecnológica,mientras que todavía los modelos anteriores se siguen moldeando aunque quedanun poco anticuado se siguen usando . jQuery tiene fantástica documentaciónsobre su documentation on their .ajax() method que se puede implementar utilizando cualquiersecuencia de comandos desde el servidor.
Sin embargo, la depuración de las respuestas puede sertediosa! estos casos de codificación son más conocidas en PHP - sin embargo, cualquier lenguaje deback-end, tales como Ruby o Python sería igualmente eficaz. Siempre que llame a un método Ajaxusted tiene que manejar dos (2) controladores de eventos - en el éxito y elfracaso. Cada caso daría lugar auna llamada de función diferente, donde se puede manipular desde los datos devueltos.
$. Ajax ({
Tipo: "POST",
url: "myscript.php",
datos: myform.serialize (),
el éxito: function (datos, textStatus) {
/ / En el éxito de la gestión de la llamada
},
error: function (XHR, textStatus, err) {
alert ("readyState:" + xhr.readyState + "\ n xhrStatus:" + xhr.status);
alert ("responseText:" + xhr.responseText);
}
});
Con esto no les estoy dando un tutorial sinomás bien como podemos aprender algunos trucos
Elpoder del descanso
Soy como muchos desarrolladores que quieren mantenerse tirando códigos durante horas y horas sininterrupciones permitidas. Desafortunadamente,este es el peor pensamiento.
Ha habidoun montón de veces en que he escrito mal una variable o nombre que están llamandoun método que no fue declarado todavía. Tras ver todas esas línea de códigote tiendes a perder la cabeza en estos pequeñosdetalles. Y por desgracia estosson los detalles que terminan haciendo hincapié en tratar de determinar por quélas cosas no funcionan, y la expresión porque aun sigue saliendo mal.
Lo mejorde los casos es pensar en otra cosa. Comer un poco, ver televisión, salir con losamigos, lo que sea necesario dejar de preocuparse por el código, y que estahaciendo mal.
Lectura Avanzada
Estas ideas son sólo algo para empezar en el camino ala codificación y depuración de JavaScript. Nadie es perfecto y todos estamospropensos a errores. Junto con mis sugerenciaslos dejo con algunos artículosrelacionados a continuación.
- Depuración avanzada con JavaScript
- Técnicas más avanzadas de depuración de JavaScript
- Depuración de JavaScript para IE 6
- Depurar con herramientas de desarrollo de Google Chrome
Pensamientos finales
Sé que he dicho muchas cosas de codificación en JavaScript perotiene que entender que es una de las actividades más lucrativas que puedes adoptar. Usted ni siquiera requerirá generar el código en un servidor web, y hoy endía hay incluso una gran cantidad deIDE en línea o con el que puede escribir código JavaScriptcon sólo conexión a Internet. A medida quepractiques estas técnicas de depuración obtendrá una comprensión másprofunda de cómo funciona JavaScript.
No hay comentarios:
Publicar un comentario
Si tienes algún aporte, duda o comentario sobre este post dínoslo en los comentarios.