Al principio: en realidad, estaba pensando en si escribir esto antes, porque no es difícil, pero ¿por qué hay tantas personas que preguntan? No están preguntando cómo usar la consola, pero no saben qué puede hacer la consola. También saben que hay consola.log y otras cosas, pero no saben por qué usan una cadena tan larga en lugar de alerta a la información de salida. En sus ojos, la alerta es suficiente. Ok, admito que me he quejado un poco, pero solo planeo introducir el conocimiento básico de la depuración en esta serie, y no implicará demasiado profundo, porque las cosas en profundidad se combinan con el conocimiento JS. Si no ha alcanzado el mismo nivel de JS, incluso si le enseño cómo depurar errores, descifrar algunos complementos, etc., no sabe lo que estoy haciendo. Mi propósito es hacerle saber la consola y comenzar con la depuración. Tienes que caminar por el camino por delante.
Por supuesto, por favor flote o quejes. .
Directorio de la Serie JS de depuración:
De hecho, las personas de desarrollo web saben esto, ya sea el front-end o el back-end, pero muchas personas solo se centran en la visualización de HTML y la modificación de CSS, y no han utilizado la consola en absoluto.
Tal vez algunos de los novatos no saben que existe esto. .
Hay mucha información sobre esto en línea, pero no habla de depuración, solo presenta cómo usarlo. .
Ya sea Chrome Firefox, es decir (8 o más de la versión) o el navegador Sogou de navegador rápido 360, etc., simplemente presione F12 para abrir la consola.
Nuestro artículo usa Chrome como ejemplo para explicarlo, pero no es porque me guste Chrome. . Todos tienen sus propias preferencias. .
PD: FF En el pasado, todo era Firebug, pero ahora es nativo.
Ahora hacemos clic en F12 para abrir la consola y hacer clic en el elemento de la consola.
Puedes ver mi avatar y algunas líneas de texto, pero todavía hay algunas líneas de cosas a continuación. Lo ignoraremos por el momento y lo explicaremos más tarde.
De hecho, para F12, el nombre más preciso son las herramientas de desarrollador, y la consola es la consola.
PD: Como tutorial básico, solo presentaré la depuración de la consola y las fuentes. Por favor, comprenda otras funciones usted mismo. .
Haga clic con el botón derecho en el menú de la consola Borrar o ingrese Clear () y presione ENTER para borrar el contenido de la consola.
Veamos el primer paso para generar información usando console.log.
Ingrese console.log ("jeje ...") y console.log ("jeje ...", "jaja ...") respectivamente y presione Entrar para ver el resultado de salida en la consola.
De hecho, solo está generando información, es muy simple. Úselo en lugar de alerta y documento. Escribe para depurar, y su trabajo se volverá muy fácil.
Por ejemplo, depuración de un código de bucle, pero hay docenas o incluso cientos de elementos en la matriz. Si alerta, se volverá loco.
Document.Write tampoco es malo, pero para la salida del objeto, solo puede ver cosas como [objeto de objeto].
Este es un problema real que encuentran muchos nuevos amigos.
Si usa console.log en lugar de alerta document.write para emitir información del objeto, puede expandir este objeto en la consola para ver información específica.
Por ejemplo:
var arr = [{nombre: "nima", edad: 22}, {nombre: "nima", edad: 20}]; for (var i = 0; i <arr.length; i ++) {console.log (arr [i]);}Puede ver directamente la información del objeto sin mostrar [objeto objeto], lo que nos confunde.
¿Sientes de repente que la consola.log está explotada?
De hecho, esto es solo la punta de su iceberg. Haré todo lo posible para mostrarles algunas de sus ventajas.
Continúe con los pasos justo ahora, ahora ingresamos directamente a ARR y luego presionamos ENTER.
¿Es aún más desenfrenado? Ahora puede hacer clic directamente en el objeto para expandir los objetos en esta matriz para ver, incluso guardar la salida del bucle.
Este es el encanto de la consola, y esta es solo su característica más básica.
Primero comprendamos qué métodos están debajo del objeto de la consola para que lo usemos.
Ingrese la consola y presione ENTER para expandir el objeto.
Puedes ver algunos colores oscuros y claros. Los colores oscuros son métodos que podemos llamar directamente. Los colores de la luz representan atributos o métodos predeterminados, y no hay necesidad de preocuparse por la pantalla. Lo hablaré más tarde si tienes la oportunidad.
De hecho, los únicos comunes son log dir. Otros rara vez se usan, y solo se utilizarán en la depuración avanzada.
Las propiedades auxiliares, como el grupo y la tabla, están disponibles o no, dependiendo de su preferencia. No me gusta mucho usarlo.
Echemos un vistazo paso a paso. De todos modos, comencemos con Log Dir, y la mayor parte de la depuración depende de ellos.
PD: En realidad, debería haberle dado la documentación oficial, pero Google no ha podido abrirla recientemente, por lo que puedo verificar las funciones de cada método en Baidu.
Encontré una versión china, no está mal. Lea primero "Objeto de consola".
Tomemos algunos ejercicios después de la clase: (Abra Baidu primero, luego abra la consola)
1 Ver información del elemento con ID KW1 en la consola
2 Luego use el método console.dir para ver la información del elemento KW1