Mientras trabaja en Internet, el navegador de Internet Explorer puede emitir mensajes que la página contiene errores y se puede mostrar incorrectamente. Considere varias formas de corregir este problema.
Instrucción
Mientras trabaja en Internet, el navegador de Internet Explorer puede emitir mensajes que la página contiene errores y se puede mostrar incorrectamente. Considere varias formas de corregir este problema.
Instrucción
Hay, por supuesto, y otros, definitivamente los mencionaré.
Firebug para Firefox
No lo sé seguro si Firebug. El progenitor de otros medios para los desarrolladores, pero definitivamente es el más popular, conveniente y funcional hasta la fecha.
Firebug es una adición para Firefox, lo que significa que se debe descargar desde el sitio web de Firefox Add-Ons.
Para llamar al Firebug, es suficiente presionar F12.
Oportunidades para este complemento:
- Inspección y edición de HTML cambiante dinámicamente;
- Edición de CSS sobre la marcha;
- Depuración JavaScript, línea de comandos para ejecutar scripts;
- Monitoreo de consultas de red: puede ver el tamaño y la hora de descargar archivos y scripts, encabezados de consulta;
- Analizador DOM.
Puede informar mucho tiempo sobre estas oportunidades en los detalles, pero creo que son conocidos por todos nuestros lectores, y si no, hay información detallada en la página de inicio de la bolsa de home, en la traducción de Ilya Cantor.
Además de Firebug'a, puedes usar una fila útil: Firecookie.Con lo que (sorpresa :-) se pueden ver y cambiar las cookies.
Barra de herramientas del desarrollador web para Firefox
Otra adición útil al fuego. Se parece a esto:
Vamos a examinar en puntos.
Desactivar
Le permite desactivar JavaScript, prohibir el uso del caché, lo cual es muy útil al desarrollar (le permite asegurarse de que la página se inicie con las últimas actualizaciones), cancele los colores utilizados en la página y reemplácelos con estándar, prohibirlos La salida en el encabezado del referente (la página con la que fue la transición).
Galletas.
Opción útil para trabajar con cookies: se pueden ver, eliminar, prohibir y agregar.
CSS.
Este menú almacena la característica enfriada de la barra de herramientas del desarrollador: editar CSS sobre la marcha. Además, es posible ver CSS, prohibir, etc., y similares. En mi opinión, aquí es muy útil para la presencia de teclas rápidas (Ctrl + Shift + C, por ejemplo, le permite ir inmediatamente para ver los estilos de la página)
Formas.
Todo para trabajar con formas: Mostrar contraseñas, mostrar información sobre los formularios, convertir métodos de formulario (obtener "POST y VICE VERSA) y mucho más. Función útil "Pumular campos de formulario" para rellenar automáticamente los campos de formulario (por ejemplo, al probar el sitio, cuando la función de memorización de contraseña está deshabilitada. Para el resto, no veo nada útil en este punto.
Imagenes
Hay una característica útil de las imágenes incapacitantes, para ver cómo se ve su sitio sin imágenes. Las imágenes se pueden rodear, muestran su tamaño, muestran atributos alt.
Información
Este menú tiene muchas opciones. Puede ser una característica útil de mostrar la clase e identificación de atributos en la página. Además, el artículo "Ver información de color" es interesante, para obtener información rápida sobre los colores que se utilizan en la página. Ver Tamaño del documento - Ver tamaño de página. "Ver encabezados de respuesta" - Ver encabezados de página.
Diverso.
La característica más utilizada es la limpieza del caché. Además, las funciones "Regla de página": una línea, "lupa de la página" - lupa y "guías de línea": varias líneas que pueden ser útiles para empujar el patrón.
Esquema
Asignación de diferentes elementos de la página - Tablas, encabezados, enlaces, marcos, bloques. El tamaño de tamaño le permite cambiar el tamaño de la ventana del navegador para cualquier extensión de pantallas estándar. Herramientas Aquí están las características para validar páginas. Tanto local como externo. Acceso conveniente y rápido a HTML, validación CSS y otras cosas. Para la validación HTML, puede usar Ctrl + Shift + H Cláusula.
Ver fuente.
Ver código fuente. Capacidad para ver en una aplicación externa, ver el código generado.
Lo que más está en la esquina correcta. Este es un validador de HTML rápido, indicador de error CSS y JavaScript. Si no hay problemas, icono verde, y si hay problemas, rojo.
Barra de herramientas del desarrollador de Internet Explorer
A partir de 8.0 errores de depuración, ya está integrado en este navegador. Es fácilmente llamado por kEY F12. Es cierto que es pobre como un programa de los años 90.
Pero hay una herramienta más fría para este navegador, las llamadas descargas de la barra de herramientas del desarrollador de Internet Explorer por referencia.
Con la forma de este tulbar, por supuesto, parece Firebug, pero, ay, no tengo a Doros. Aunque, por otro lado, hay algunas oportunidades que no hay Firebug. Llamaría a la barra de herramientas del desarrollador de Internet Explorer a un cierto fuego híbrido y Firefox Web Developer. Barra de herramientas.
Como en Firebug, existe la oportunidad de inspeccionar el elemento por simple clic. Pero, si podemos ver inmediatamente alojamiento y margen, entonces no hay tal oportunidad.
Además, la barra de herramientas del desarrollador de Internet Explorer no actualiza el árbol de elementos dinámicamente, ya que el Firebug hace. Es decir, si cambiamos algo en la página del Fondo JS, no veremos nada con este tulbara.
Por lo que se puede rechazar, cambie CSS sobre la marcha (una manera fácil de encontrar ese pirateo :), la capacidad de prohibir la CSS e imágenes, la capacidad de limpiar rápidamente el caché y jugar con cookies, acceso rápido a la validación.
Lo más delicioso es que hay un selector de color incorporado, que le permite obtener cualquier color de la tubería. (Para FF hay un complemento de colorzilla separado).
Debug debugbar para Internet Explorer
Debugbar para Internet Explorer, puede descargar en el enlace especificado.
En su interesante expansión. Instalado como panel adicional al navegador:
Hay un motor de búsqueda incorporado, una pipeta, la capacidad de cambiar el tamaño de la ventana y, nuevamente, por alguna razón, la capacidad de enviar una página a un amigo al jabón. Aunque, puede ser útil. Pero no pude aprovechar esta oportunidad.
Además, hay un inspector:
El método de creación haciendo clic o por la guía de los desarrolladores no se adaptó: se les ocurrió una pieza más interesante. En Debugbar'e, necesita arrastrar la vista en el elemento deseado para verlo en el árbol. Posibilidad de editar CSS no. Pero hay un validador y la consola de JS incorporada.
Y si desea cavar en la configuración, puede encontrarlo:
Y ridículo y triste.
Se sabe que en el octavo explotador se construirá en la barra de herramientas del desarrollador. Será similar a la que se describió en el tercer punto, pero esperamos que sea mejor.
Dragonfly de depuración para la ópera
La libélula está integrada en la ópera, comenzando con la versión 9.5, por lo que no es necesario instalar. Para activar los Dragonflays, vaya a Herramientas → Advanced → Medios para desarrolladores. Y en inglés, Herramientas → Herramientas avanzadas → Desarrollador.
Inmediatamente le advierte que la libélula está en la etapa Alpha2, esto explica muchas de sus fallas.
Características de la lista:
- Inspector DOM;
- Una inspección por clic (nuevamente, no veremos sangrías como en Firefox);
- Edición;
- Acceso rápido a la consola de errores.
DF - Algo así como una página separada en Freme. Si lo abriste, estará abierto a todas las pestañas (a diferencia de FireBug'a). Por lo tanto, antes de inspeccionar el artículo, debe seleccionar la página de la lista que queremos ver.
Desafortunadamente, aquí, como en la barra de herramientas DAV de Internet Explorer, los elementos creados dinámicamente no se muestran. Y en general, cuando inspeccionamos la página, no se inicia JavaScript: los enlaces y los botones no se presionan. Esperemos que cuando la libélula sea adecuada para su lanzamiento, veremos todas estas oportunidades.
Inspector web de depuración en Safari
Te lo diré sobre el navegador. Safari. Información silbada, por lo que para la adecuación del material, como dicen, no respondo.
Para habilitar en el menú Safari, el elemento "Desarrollo" es necesario en la configuración (pestaña Avanzada) en el artículo correspondiente:
En el menú "Desarrollo", las siguientes funciones están disponibles:
Consideremos en los detalles del Inspector Web:
De forma predeterminada, el inspector se abre en el modo de visualización HTML. Pero se puede cambiar al modo Vista DOM. Para hacer esto, hay un interruptor en la parte superior de la erupción. Cuando se enfoca sobre un elemento en el inspector, se resaltará en la página en sí. Para ver sangrías, cambio de marca o CSS sobre la marcha o vea el cambio dinámico en la cúpula sobre la marcha, como en Firebug, es imposible. Pero estarás de acuerdo, se ve muy lindo.
Si hay un deseo de trabajar con un inspector en la ventana del navegador, puede hacer clic en el botón en la esquina inferior izquierda.
Incluso en el safari, esta función como "escala de tiempo de red" está disponible, (Botón de red en el Inspector):
Puede ver claramente cuándo y cuánto tiempo se cargan los archivos. También puede ver los encabezados de solicitud, pero el contenido de sí mismo para ver, desafortunadamente, no se puede ver.
Depuración para desarrolladores en Google Chrome
Chrome apareció en la luz en forma avanzada, e inmediatamente lo tiene, dejó que sean curvas, pero aún así los fondos para los desarrolladores.
- Inspector DOM;
- JavaScript Depurador;
- Consola de JavaScript.
Para inspeccionar cualquier elemento, debe hacer clic con el botón derecho en él y seleccione "Ver el código del artículo" en el menú contextual:
La funcionalidad es la misma que en Safari: los elementos se tipen a típicamente flotando, pero la edición de CSS y HTML no están disponibles, los cambios en el DOM no se rastrean. Eso es solo, el botón en la esquina inferior izquierda, que debe adjuntar el inspector a la ventana del navegador no funciona.
En la pestaña "Recursos", podemos ver lo siguiente:
Moto difiere de la escala en safaris. Translúcido en este esquema es un tamaño de archivo relativo y el tiempo completo. De una forma u otra, es obvio que esta parte del cromo todavía no se completa.
En este artículo, revisé las extensiones más conocidas y las herramientas incorporadas para los navegadores.
Hay otros, por ejemplo:
- Internet Explorer Web Development Helper: un buen asistente para los desarrolladores de ASP.NET (Internet Explorer);
- Barra de herramientas del desarrollador web - Tulbar para Internet Explorer y Firefox. Hay varias características útiles;
- Barra de herramientas de accesibilidad web - Tulbar para Internet Explorer. Nada interesante.
Si hay adiciones que no mencioné, pero valdría la pena, o que hay funciones de las extensiones mencionadas, que extrañé, escribo.
Uso en salud!
Escribe HTML - Genial, pero ¿cómo entender dónde está el error cuando algo no funciona? Este artículo describe varias herramientas que ayudan a buscar y corregir errores en HTML.
La depuración no tiene miedo
Mientras escribe algún código, generalmente todo va bien hasta que aparece el momento cuando comete un error. Así que su código no funciona, o no funciona como pensó. Si intenta compilar el programa que no funciona en el idioma de Rust, el compilador indicará un error:
En este caso, el mensaje de error es comprender relativamente simple: "Cadena de cita doble no obstruida". ¡Si mire cuidadosamente la impresión! (¡Hola, mundo! ");, Luego observe que no hay una cita doble aquí. Por supuesto, los mensajes de error pueden volverse mucho más complejos para comprender a medida que su código crece, e incluso los casos más simples pueden Parece aterrador para aquellos que no saben nada de óxido.
¡Pero no tengas miedo de la depuración! Para escribir cómodamente y depurar cualquier código, debe comprender el idioma y sus herramientas.
Html y depuración
HTML no está tan plegado para entender cómo oxidarse. HTML no se compila en ningún otro formulario antes de que el navegador analice esto y muestre el resultado (se interpreta y no se compila). La sintaxis de elementos HTML es mucho más clara que la de los idiomas de programación reales, como el óxido, JavaScript o Python. El método a qué navegadores leen más HTML. tolerar deque en lenguajes de programación Interpretando su código es más estricto. Es al mismo tiempo malo, y bueno.
Código tolerante
Entonces, ¿qué significa lo tolerante? En términos generales, cuando se le inyectó en el Código, hay dos tipos de errores con los que se encontrará:
- Errores de sintaxis (errores de sintaxis): Estos son errores en la exactitud de la escritura, ya que era más alto, en el ejemplo con óxido. Tal es generalmente fácil de corregir, en la medida en que sepa lo familiar con la sintaxis del idioma y saber qué significan los mensajes de error.
- Errores lógicos (errores lógicos): Estos son errores que aparecen si la sintaxis es correcta, pero el código no cumple con su propósito, es decir, el programa es incorrecto. Dicha corrección es más complicada que la sintáctica, ya que los mensajes indican el lugar donde se equivoca.
HTML no sufre de errores de sintaxis, porque el navegador lee el código tolerantemente, en el sentido de que las páginas pueden aparecer incluso si los errores de sintaxis están presentes. Los navegadores tienen reglas incorporadas para la interpretación de marcado por escrito incorrectamente, y puede ejecutar algo, incluso si quisiste decir otra. ¡Esto puede ser un problema real!
En una nota: HTML lee tolerantemente, porque cuando apareció solo la web, se decidió permitir que las personas publiquen contenido, incluso si es incorrecto en el código, ya que es mucho más importante que la confianza en la sintaxis absolutamente correcta. Web no sería tan popular ahora, si fue tratado con principiantes estrictamente.
Aprendizaje activo: familiaridad con el código tolerante.
Tiempo para estudiar la naturaleza del código tolerante en HTML.
Validación HTML
Desde el ejemplo anterior, está claro que vale la pena revisar la validez HTML. En un ejemplo simple desde arriba, simplemente puede ver todo el código y encontrar errores, pero ¿qué pasa con las páginas enormes y complejas?
Es mejor comprobar la página en la marca de servicio de validación. Fue creado y apoyado por W3C, una organización que se dedica a HTML, especificaciones CSS y otras tecnologías web. El servicio revisará su HTML y realizará un informe sobre los errores.
HTML se puede verificar en la dirección descargando el archivo o simplemente raspando la página.
Aprendizaje activo: Validando el documento HTML
- Abra el servicio de validación de marcado en el navegador.
- Vaya a Validar con el modo de entrada directa.
- Copie el código de documento completo (no solo el cuerpo) e inserte en su lugar para ingresar.
- prensa Cheque cheque).
Verá una lista de errores y otra información.
Trabajando con mensajes de error
Por lo general, está claramente claro qué significan los mensajes, pero a veces hay que tratar de entender qué es el problema. Ahora pasaremos por todos los errores y nos preguntaremos qué significan. Tenga en cuenta que los mensajes indican la línea y la columna de código para que los errores sean más fáciles de buscar.
- "Tag final LI implícita, pero había elementos abiertos" (2 instancias): no hay una etiqueta clara de cierre, aunque el navegador está adivinando dónde debería ser. El mensaje indica una cadena después de la que se esperaba la etiqueta de cierre, pero encontrará el lugar correcto.
- "Elemento no cerrado fuerte": este es un error muy simple: el elemento) indica que su contenido es de gran importancia, seriedad o urgencia. Los navegadores suelen mostrar los contenidos de negrita ".\u003e No cerrado, y el mensaje indica directamente a la etiqueta de apertura.
- "La etiqueta final fuerte viola las reglas de anidación": el artículo se invierte incorrectamente, en este nivel no hay un par de la etiqueta de apertura.
- "Fin del archivo alcanzado cuando está dentro de un valor de atributo. Ignorando la etiqueta": Mensaje misterioso. El hecho es que en algún lugar (lo más probable es que, al final del documento) explicó incorrectamente la propiedad del elemento, y el final del archivo estaba dentro de esta propiedad. El navegador no ve los enlaces, lo más probable es que el problema al lado.
- "Fin del archivo visto y hubo elementos abiertos": el archivo ha terminado, pero algunos elementos no están cerrados. El mensaje indica el final del archivo, en este caso, el elemento de ejemplo no está cerrado: enlace a la página de inicio de Mozilla ↩
Muy a menudo, los usuarios pueden observar la situación cuando aparece el error del script en el navegador (es decir,). Si la situación es parte de un solo carácter, entonces no está preocupado, pero cuando tales errores se vuelven regulares, vale la pena pensar en la naturaleza de este problema.
El script de error en Internet Explorer generalmente se llama procesando incorrectamente el navegador de código HTML-PAGE, la presencia de archivos temporales de Internet, parámetros de cuenta, así como muchas otras razones sobre las cuales se discutirán en este material. Los métodos para resolver este problema también se considerarán.
Antes de continuar con los métodos generalmente aceptados para diagnosticar problemas con Internet Explorer, que causan errores de escenario, debe asegurarse de que el error ocurra no solo en un sitio en particular, e inmediatamente en varias páginas web. También debe revisar la página web en la que se ha producido este problema en otra cuenta, en otro navegador y en otra computadora. Esto causará el rango de búsqueda de las causas del error y eliminará o confirmará la hipótesis de que los mensajes aparecen como consecuencia de la presencia de algunos archivos o configuraciones en la PC
Bloqueo de Internet Explorer Scripts activos, ActiveX y Java
Los escenarios activos, ActiveX y los elementos Java afectan el método de formación y visualización de información en el sitio y puede ser una razón real para el problema descrito anteriormente si están bloqueados en la PC del usuario. Para garantizar que los errores del script surgen por este motivo, es necesario simplemente restablecer la configuración de seguridad del navegador. Para implementar esto sigue las recomendaciones.
- Open Internet Explorer 11
- Servicio
- En la ventana, vaya a la pestaña. Seguridad
- Siguiente presione el botón Defectoy luego botón OK
Internet Explorer Archivos temporales
Cada vez que abre una página web, Internet Explorer mantiene una copia local de esta página en línea en la PC en los llamados archivos temporales. Cuando dichos archivos se vuelven demasiado y el tamaño de la carpeta que los contiene alcanza varios gigabytes, puede haber problemas para mostrar una página web, a saber, aparecerá un mensaje sobre el error del script. La carpeta de limpieza regular con archivos temporales puede ayudar a eliminar este problema.
Para eliminar archivos temporales de Internet, siga la siguiente secuencia de acciones.
- Open Internet Explorer 11
- Servicio
- En la ventana, vaya a la pestaña. General
- En capitulo Revista del navegador presiona el botón Eliminar ...
- En la ventana Eliminando la historia de la revisión. Compruebe las banderas cerca de los párrafos Internet temporal y sitio web, Galletas y datos del sitio web., Revista
- presiona el botón Borrar
Trabajo de software antivirus
Los errores de guión son posibles a través de la operación del programa antivirus cuando bloquea escenarios activos, ActiveX y elementos Java en una página o carpeta para guardar archivos temporales del navegador. En este caso, debe recurrir a la documentación del producto antivirus instalado y deshabilitar la exploración de carpetas para ahorrar archivos de Internet, así como bloquear objetos interactivos.
Procesamiento incorrecto del código de página HTML
Nos manifiesta, por regla general, en uno de los sitios en particular e indica que el código de la página no está completamente adaptado para trabajar con Internet Explorer. En este caso, es mejor desactivar la depuración de scripts en el navegador. Para hacer esto, siga estos pasos.
- Open Internet Explorer 11
- En la esquina superior del navegador (derecha), haga clic en el icono Servicio En forma de engranaje (o una combinación de las teclas ALT + X). Luego, en el menú abierto, seleccione el elemento.
- En la ventana, vaya a la pestaña. Adicionalmente
- A continuación, desmarque la casilla de verificación desde el punto. Mostrar notificación sobre cada error de script y haz clic OK.
Esta lista de las razones más frecuentes que causan errores de script en Internet Explorer, por lo que si está cansado de tales mensajes, preste ligeramente atención y resuelva el problema de una vez por todas.
En este momento hay una gran cantidad de navegadores diferentes, a un grado u otro que respalda los estándares HTML existentes. Personalmente, prefiero el navegador de la Corporación Mozilla. Este navegador tiene una larga historia (se escribe sobre la base del famoso navegador Netscape Navigator). Además, también me gusta este navegador por el hecho de que admite el sistema de complementos, las adiciones propagadas por separado, cuando se conecta a las que puede cambiar la funcionalidad y configurar sus necesidades. Y, finalmente, este navegador se distribuye libremente con códigos de código abierto, que también es importante. Por lo tanto, decidí describir las oportunidades de que este navegador proporciona no solo al usuario, sino también al desarrollador de páginas web, lo fácil y conveniente de ser el proceso de depuración de productos escritos.
Mozilla Firefox es uno de los desarrolladores más populares y navegadores de desarrolladores web. Atrae su atención debido a las capacidades que este navegador proporciona depuración de proyectos creados, corrigiendo errores, mejoras. La entrega estándar del navegador incluye la consola Java (o "Error Console"). Esta utilidad le permite solucionar los scripts Java-Script incorporados. Pero, una funcionalidad mucho mayor del navegador otorga complementos de terceros que se pueden descargar e instalar desde el sitio web oficial de la Fundación Mozilla. Ahora quiero considerar dos de estos complementos: este es desarrollador web y Firebug. Ambas adiciones se pueden descargar de acuerdo con los enlaces anteriores del sitio adicional. Después de su navegador de instalación y reinicio, el desarrollador ofrece amplias oportunidades que describiré a continuación, a su vez para cada uno de los complementos.
Complemento Firebug.
Como se indicó en la página oficial: "Firebug se integra con Firefox Browser para enriquecer mucho el kit de herramientas del desarrollador. Puede editar, depurar y explorar CSS, HTML y JavaScript "Live", en cualquier página web ". Y de hecho lo es. Considere algunas de las funciones de este plugin, a saber:
- Ver y editar HTML.
- Construir CSS.
- Monitoreo de consultas de red
- Depuración JavaScript.
- Estudio de javascript
- Registro de javascript
Esta no es una lista completa de todas sus capacidades. Por lo tanto, el proyecto está abierto (OpenSource), entonces cualquiera puede cambiar y complementar la funcionalidad.
Para trabajar con el complemento, debe presionar la tecla F12 (CTRL-F12 para funcionar con él en una ventana separada). Después del lanzamiento exitoso, obtenemos lo siguiente - Figura 1A, 1B.
Figura 1A. La ventana inicial del complemento Firebug.
Figura 1b. La ventana inicial del complemento Firebug.
A continuación, comienza el trabajo real con el complemento. Por ejemplo, debemos encontrar un objeto en particular en el código HTML, o determinar exactamente el fragmento actual se implementa utilizando CSS. Para hacer esto, solo necesita seleccionar las opciones necesarias en el menú de la ventana del complemento. El siguiente ejemplo es HTML en modo de inspección. Ahora, al ir a la página del documento, bajo el cursor del mouse, notaremos el área rectangular que ilustra la trama aquí con la que está en marcha el trabajo. En la ventana Plug-in, veremos esos parámetros HTML y CSS que se utilizan. Además, al hacer clic en cada uno de ellos, puede hacer cambios y rastrearlos en la dinámica. Las acciones descritas se ilustran en las figuras 2,3,4.
El desarrollo de este proyecto descrito anteriormente, se utilizó el complemento para estos fines. Sin embargo, aunque Java-Script no se usó aquí, el complemento Firebug también se puede usar para depurarlo. Un ejemplo de depuración se muestra en la Figura 5.
En esto, como se describe anteriormente, la funcionalidad de esta expansión no está limitada. Puede estudiarlo por completo y usarlo en sus necesidades descargando los siguientes enlaces instalando Mozilla Firefox.
Plugin de desarrollador web.
El desarrollador web es la segunda expansión para el navegador Mozilla Firefox, muy potente y funcional, lo que le permite producir una depuración rápida y eficiente. Después de instalarlo, aparece un panel adicional con herramientas en la ventana del navegador, que se muestra en la Figura 6.Trabajar más con el complemento intuitivamente comprensible. Por ejemplo, si necesitamos realizar trabajos con CSS (aunque no tan totalmente funcionalmente, como con un complemento Firebug), puede hacer clic en el menú CSS y bloquear, encender o apagar.
Muy conveniente para el desarrollador es el hierro para ver cómo se verá su proyecto en los monitores, con una resolución diferente. Para hacer esto, use la pestaña de cambio de tamaño. Aquí puede configurar manualmente las resoluciones de pantalla necesarias (800x600, 1024x768, etc.), y luego cambiar libremente entre ellos, contactar o eliminar contenido. Esta funcionalidad se representa en la Figura 7.
Esta extensión también tiene una funcionalidad rica, que se describen y están disponibles en sitios oficiales.
Lista de fuentes usadas
- 1. www.getfirebug.com
Sitio adicional adicional. - 2. http://addons.mozilla.org.
El sitio web oficial de Mozilla, que coloca los complementos para el navegador Firefox, información para desarrolladores, información sobre el uso de complementos. - 3. http://chrispederick.com/work/web-developer/
Complemento oficial de desarrollador web de desarrollador web.
Escribe HTML - Genial, pero ¿cómo entender dónde está el error cuando algo no funciona? Este artículo describe varias herramientas que ayudan a buscar y corregir errores en HTML.
La depuración no tiene miedo
Mientras escribe algún código, generalmente todo va bien hasta que aparece el momento cuando comete un error. Así que su código no funciona, o no funciona como pensó. Si intenta compilar el programa que no funciona en el idioma de Rust, el compilador indicará un error:
En este caso, el mensaje de error es comprender relativamente simple: "Cadena de cita doble no obstruida". ¡Si mire cuidadosamente la impresión! (¡Hola, mundo! ");, Luego observe que no hay una cita doble aquí. Por supuesto, los mensajes de error pueden volverse mucho más complejos para comprender a medida que su código crece, e incluso los casos más simples pueden Parece aterrador para aquellos que no saben nada de óxido.
¡Pero no tengas miedo de la depuración! Para escribir cómodamente y depurar cualquier código, debe comprender el idioma y sus herramientas.
Html y depuración
HTML no está tan plegado para entender cómo oxidarse. HTML no se compila en ningún otro formulario antes de que el navegador lo analice y muestre el resultado (es interpretado, pero no compilado). La sintaxis de elementos HTML es mucho más clara que la de los idiomas de programación reales, como el óxido, JavaScript o Python. El método a qué navegadores leen más HTML. tolerar deque en lenguajes de programación Interpretando su código es más estricto. Es al mismo tiempo malo, y bueno.
Código tolerante
Entonces, ¿qué significa lo tolerante? En términos generales, cuando se le inyectó en el Código, hay dos tipos de errores con los que se encontrará:
- Errores de sintaxis (errores de sintaxis): Estos son errores en la exactitud de la escritura, ya que era más alto, en el ejemplo con óxido. Tal es generalmente fácil de corregir, en la medida en que sepa lo familiar con la sintaxis del idioma y saber qué significan los mensajes de error.
- Errores lógicos (errores lógicos): Estos son errores que aparecen si la sintaxis es correcta, pero el código no cumple con su propósito, es decir, el programa es incorrecto. Dicha corrección es más complicada que la sintáctica, ya que los mensajes indican el lugar donde se equivoca.
HTML no sufre de errores de sintaxis, porque el navegador lee el código tolerantemente, en el sentido de que las páginas pueden aparecer incluso si los errores de sintaxis están presentes. Los navegadores tienen reglas incorporadas para la interpretación de marcado por escrito incorrectamente, y puede ejecutar algo, incluso si quisiste decir otra. ¡Esto puede ser un problema real!
En una nota: HTML lee tolerantemente, porque cuando apareció solo la web, se decidió permitir que las personas publiquen contenido, incluso si es incorrecto en el código, ya que es mucho más importante que la confianza en la sintaxis absolutamente correcta. Web no sería tan popular ahora, si fue tratado con principiantes estrictamente.
Aprendizaje activo: familiaridad con el código tolerante.
Tiempo para estudiar la naturaleza del código tolerante en HTML.
- Para comenzar, descargue nuestro ejemplo de depuración y guardar localmente. Esta demostración está escrita intencionalmente con los errores que tenemos que detectar.
- A continuación, ábralo en el navegador. Verás algo como esto:
- Ahora el documento no parece particularmente bueno; Veamos el código y descubramos por qué (solo se muestra el cuerpo del documento):
Ejemplos de depuración HTML.
¿Qué causa los errores en HTML?
- Elementos no cerrados: Si un elemento es no se cierra correctamente, entonces su efecto puede extenderse a áreas que no intentó
- Elementos mal anidados: los elementos de anidación adecuadamente también son muy importantes para que el código se comporte correctamente. fuerte. fuerte enfatizado? ¿Qué es ésto?
- Atributos no cerrados: otra fuente común de problemas HTML. Veamos un ejemplo: enlace a la página de inicio de Mozilla
- Elementos no cerrados: Si un elemento es no se cierra correctamente, entonces su efecto puede extenderse a áreas que no intentó
- Considere problemas:
- W. параграфа!} Y se usa para crear un elemento de lista ".\u003e El elemento de la lista no está cerrado las etiquetas. En la imagen, está claro que el marcado no se ve afectado, ya que el navegador es fácil de concluir sobre dónde finaliza un elemento y el otro comienza .
- El primero) indica que su contenido es de gran importancia, seriedad o urgencia. Los navegadores suelen mostrar los contenidos de negrita ".\u003e El elemento tampoco tiene una etiqueta de cierre. Ya es más problemático, ya que es difícil decir dónde debe terminar el elemento. De hecho, todo el texto restante fue asignado a la grasa.
- La siguiente parte viola la falla de anidación: fuerte. fuerte enfatizado? ¿Qué es ésto? . En este caso, el código también es difícil de interpretar debido a lo descrito anteriormente anterior.
- El atributo HREF carece de una cotización doble de cierre. Esta fue la causa de un problema importante: el enlace no se reprodució en absoluto.
- Ahora veamos cómo el navegador generó su propio marcado, en lugar de la marca inicial del documento. Para hacer esto, use las herramientas del desarrollador. Si no está familiarizado con las herramientas del desarrollador, tome unos minutos para obtener una descripción general de las herramientas de desarrollo en los navegadores.
- En el inspector DOM puede ver cómo se generó una nueva marca:
- Usando el inspector DOM, veamos los detalles de nuestro código para ver cómo el navegador está tratando de corregir nuestros errores en HTML (revisamos en Firefox; Otro navegador moderno debe emitir los mismos resultados):
- Los artículos y los elementos de la lista se obtienen con las etiquetas de cierre.
- No era obvio donde el elemento. Debe haber cerrado, por lo que el navegador envolvió a cada bloque de texto con sus propias etiquetas fuertes, y hasta la parte inferior del documento.
- El anidamiento incorrecto fue fijado por el navegador de la siguiente manera: fuerte. fuerte enfatizado? ¿Qué es ésto?
- El enlace con las comillas dobles faltantes fue eliminado por la conmemoración. El último elemento de la lista se verá así:
- Atributos no cerrados: otra fuente común de problemas HTML. Veamos un ejemplo:
Validación HTML
Desde el ejemplo anterior, está claro que vale la pena revisar la validez HTML. En un ejemplo simple desde arriba, simplemente puede ver todo el código y encontrar errores, pero ¿qué pasa con las páginas enormes y complejas?
Es mejor comprobar la página en la marca de servicio de validación. Fue creado y apoyado por W3C, una organización que se dedica a HTML, especificaciones CSS y otras tecnologías web. El servicio revisará su HTML y realizará un informe sobre los errores.
HTML se puede verificar en la dirección descargando el archivo o simplemente raspando la página.
Aprendizaje activo: Validando el documento HTML
- Abra el servicio de validación de marcado en el navegador.
- Vaya a Validar con el modo de entrada directa.
- Copie el código de documento completo (no solo el cuerpo) e inserte en su lugar para ingresar.
- prensa Cheque cheque).
Verá una lista de errores y otra información.
Trabajando con mensajes de error
Por lo general, está claramente claro qué significan los mensajes, pero a veces hay que tratar de entender qué es el problema. Ahora pasaremos por todos los errores y nos preguntaremos qué significan. Tenga en cuenta que los mensajes indican la línea y la columna de código para que los errores sean más fáciles de buscar.
- "Tag final LI implícita, pero había elementos abiertos" (2 instancias): no hay una etiqueta clara de cierre, aunque el navegador está adivinando dónde debería ser. El mensaje indica una cadena después de la que se esperaba la etiqueta de cierre, pero encontrará el lugar correcto.
- "Elemento no cerrado fuerte": este es un error muy simple: el elemento) indica que su contenido es de gran importancia, seriedad o urgencia. Los navegadores suelen mostrar los contenidos de negrita ".\u003e No cerrado, y el mensaje indica directamente a la etiqueta de apertura.
- "La etiqueta final fuerte viola las reglas de anidación": el artículo se invierte incorrectamente, en este nivel no hay un par de la etiqueta de apertura.
- "Fin del archivo alcanzado cuando está dentro de un valor de atributo. Ignorando la etiqueta": Mensaje misterioso. El hecho es que en algún lugar (lo más probable es que, al final del documento) explicó incorrectamente la propiedad del elemento, y el final del archivo estaba dentro de esta propiedad. El navegador no ve los enlaces, lo más probable es que el problema al lado.
- "Fin del archivo visto y hubo elementos abiertos": el archivo ha terminado, pero algunos elementos no están cerrados. El mensaje indica el final del archivo, en este caso, el elemento de ejemplo no está cerrado: enlace a la página de inicio de Mozilla ↩