Error de página web para depurar. Errores de script en Internet Explorer. Razones y métodos de eliminación. Perfilado de consultas SQL Depurar una página web

Mientras navega por Internet navegador de Internet Explorer puede mostrar mensajes de que la página contiene errores y puede que no se muestre correctamente. Veamos algunas formas de solucionar este problema.

Instrucción

Si no hay dificultades visibles en el navegador, a excepción de un error intermitente, puede intentar desactivar la depuración de secuencias de comandos para que el mensaje no vuelva a aparecer (si el error aparece en más de un sitio, pero en varios sitios a la vez, proceda al siguiente paso). En el menú Herramientas, abra Opciones de Internet, seleccione la pestaña Avanzado y marque la casilla junto a Evitar la depuración de secuencias de comandos. Si necesita desactivar la notificación de todos los errores, desmarque la casilla de verificación "Mostrar notificación de cada error de secuencia de comandos".

Intente abrir el sitio que está causando el error mientras navega desde una cuenta diferente o desde una computadora diferente para ver si el problema es local. Si aparece el error, lo más probable es que se deba a un código de página web incorrecto. En este caso, puede deshabilitar la depuración de secuencias de comandos siguiendo las instrucciones del paso anterior. Si el problema desaparece al navegar por el sitio usando una computadora o cuenta diferente, continúe con el próximo paso.

Quizás el navegador explorador de Internet en el momento de navegar por la página no bloquea los scripts activos, Java y ActiveX, que determinan la visualización de la información en la página. Para solucionar el problema, debe restablecer la configuración de seguridad de su navegador. Para hacer esto, en el menú "Herramientas", seleccione "Opciones de Internet" y vaya a la pestaña "Seguridad". Haga clic en el botón "Predeterminado" y luego en "Aceptar". Si el problema persiste después de reiniciar la página que estaba causando el error, pruebe el siguiente método.

Como sabe, el navegador almacena archivos temporales y copias de páginas en una carpeta separada para acceder a ellos posteriormente. Si el tamaño de la carpeta es demasiado grande, algunas páginas pueden mostrar errores. El problema se puede resolver limpiando periódicamente la carpeta de archivos temporales. Para hacer esto, abra el cuadro de diálogo Opciones de Internet desde el menú Herramientas. En la pestaña General, en el grupo Historial, haga clic en el botón Eliminar. Marque las casillas de Archivos temporales de Internet, Cookies, Historial, Datos de formulario web y haga clic en Aceptar.

Hay, por supuesto, otros, definitivamente los mencionaré.

Firebug para Firefox

no estoy seguro si chinche de fuego el progenitor de otras herramientas de desarrollo, pero definitivamente es el más popular, conveniente y funcional hasta la fecha.

Firebug es un complemento para Firefox, lo que significa que debe descargarse del sitio de complementos de Firefox e instalarse.

Para llamar al firebug, simplemente presione F12.

Características de este complemento:

• Inspección y edición de HTML que cambia dinámicamente;
• Edición de CSS sobre la marcha;
• Depuración de JavaScript línea de comando ejecutar guiones;
• Monitoreo de solicitudes de red: puede ver el tamaño y el tiempo de descarga de archivos y scripts, encabezados de solicitudes;
• analizador DOM.

Puede hablar sobre estas características en detalle durante mucho tiempo, pero creo que todos nuestros lectores las conocen y, si no, información detallada está en la página de inicio de Firebug o lo mismo en la traducción de Ilya Kantor.

Además del propio firebug, es posible que necesite loción útil a él - galleta de fuego, con el que (sorpresa:-) puedes ver y modificar las cookies.

Barra de herramientas para desarrolladores WEB para Firefox

Otra adición útil a Ognelis. Se parece a esto:

Vamos a repasar los puntos.

Desactivar

Le permite desactivar JavaScript, deshabilitar el uso del caché, lo cual es muy útil al desarrollar (le permite estar seguro de que la página cargada con últimas actualizaciones), cancela los colores utilizados en la página y reemplázalos por los estándar, deshabilita el envío en el encabezado de referencia (la página desde la que se realizó la transición).

Galletas

Una opción útil para trabajar con cookies: se pueden ver, eliminar, bloquear y agregar.

CSS

Este menú contiene la característica más genial de la barra de herramientas del desarrollador: la edición de CSS sobre la marcha. Además, es posible ver css, desactivar, etc., etc. En mi opinión, la presencia de atajos de teclado es muy útil aquí (CTRL + SHIFT + C, por ejemplo, le permite ir inmediatamente a ver estilos de página)

formularios

Todo para trabajar con formularios: mostrar contraseñas, mostrar información sobre formularios, convertir métodos de formulario (GET » POST y viceversa) y mucho más. Función útil "Rellenar campos de formulario" para el llenado automático de campos de formulario (por ejemplo, al probar un sitio cuando la función de recordar contraseña está deshabilitada. De lo contrario, no veo nada útil en este párrafo.

Imágenes

Hay una función útil para desactivar las imágenes: para ver cómo se ve su sitio sin imágenes. Las imágenes se pueden rodear, mostrar sus tamaños, mostrar atributos alternativos.

información

Este menú tiene muchas opciones. Puede ser útil mostrar los atributos de clase e id en la página. Además, el elemento "Ver información de color" es interesante: para obtener rápidamente información sobre los colores que se utilizan en la página. "Ver tamaño del documento" - ver el tamaño de la página. "Ver encabezados de respuesta": vea los encabezados de página.

Misceláneas

La característica más utilizada es borrar el caché. Además, la "Regla de página" - regla, "Lupa de página" - lupa y "Guías de línea" - algunas líneas están disponibles aquí, que pueden ser útiles para recortar la plantilla.

describir

Selección de diferentes elementos de página: tablas, encabezados, enlaces, marcos, bloques. Redimensionar le permite cambiar el tamaño de la ventana del navegador para que se ajuste a cualquier extensión de pantalla estándar. Las herramientas aquí son funciones almacenadas para la validación de la página. Tanto locales como externos. Conveniente y acceso rápido validando HTML, CSS y más. Puede usar el método abreviado de teclado CTRL+MAYÚS+H para validar HTML.

ver fuente

Vista código fuente. Capacidad de ver en una aplicación externa, ver el código generado.

El de la derecha es mi favorito. Es un rápido validador de HTML, CSS e indicador de error de JavaScript. Si no hay problemas, el ícono es verde, y si hay problemas, es rojo.

Barra de herramientas para desarrolladores de Internet Explorer

A partir de 8.0, la depuración de errores ya está integrada en este navegador. Se llama fácilmente tecla F12. Cierto, es un miserable como programa de los 90.

Pero hay una herramienta mucho más genial para este navegador, la llamada Barra de herramientas para desarrolladores de Internet Explorer que se puede descargar desde el enlace.

En apariencia, esta barra de herramientas, por supuesto, se parece a Firebug, pero, por desgracia, aún no ha crecido. Aunque, por otro lado, tiene algunas características que el firebug no tiene. Llamaría a Internet Explorer Developer Toolbar un híbrido de Firebug y desarrollador web firefox Barra de herramientas.

Como en firebug, hay una opción para inspeccionar un elemento con un simple clic. Pero, si podemos ver inmediatamente rellenos y márgenes, entonces no existe tal posibilidad aquí.

Además, la barra de herramientas para desarrolladores de Internet Explorer no actualiza dinámicamente el árbol de elementos, como lo hace Firebug. Es decir, si cambiamos algo en la página usando js, ​​no veremos nada usando esta barra de herramientas.

De lo que puede disfrutar: cambiar CSS sobre la marcha (una manera fácil de encontrar qué piratear :), la capacidad de deshabilitar CSS e imágenes, la capacidad de borrar rápidamente el caché y jugar con cookies, acceso rápido a la validación.

Lo más delicioso: hay un selector de color incorporado que le permite obtener cualquier color de la página usando un cuentagotas. (para ff hay un complemento ColorZilla separado).

Barra de depuración de depuración para Internet Explorer

Puede descargar DebugBar para Internet Explorer desde el enlace proporcionado.

Una extensión interesante por derecho propio. Instalado como un panel adicional al navegador:

Por alguna razón, hay un motor de búsqueda incorporado, un cuentagotas, la capacidad de cambiar el tamaño de la ventana y, de nuevo, por alguna razón, la capacidad de enviar una página a un amigo para que la jabone. Aunque podría ser útil. Pero no supe aprovechar esta oportunidad.

Además, hay un inspector:

El método de inspección haciendo clic o señalando no se adaptaba a los desarrolladores: se les ocurrió algo más interesante. En DebugBar, debe arrastrar el destino al elemento deseado para verlo en el árbol. No hay opción para editar CSS. Pero hay un validador y una consola js incorporada.

Y si profundizas en la configuración, puedes encontrar esto:

Tanto divertido como triste.

Se sabe que la barra de herramientas del desarrollador se integrará en el octavo explorador. Será similar al descrito en el tercer párrafo, pero esperamos que sea mejor.

Depurar DragonFly para Opera

DragonFly está integrado en Opera desde la versión 9.5, por lo que no es necesario instalarlo. Para activar Dragonfly, vaya a Herramientas → Avanzado → Herramientas para desarrolladores. Y si está en inglés, entonces Herramientas → Avanzado → Herramientas para desarrolladores.

Inmediatamente le advertiré que DragonFly está en la etapa Alpha2, esto explica muchos de sus problemas técnicos.

Lista de características:

• inspector DOM;
• Haga clic en Inspección (nuevamente, no veremos el relleno como en FireFox);
• Edición;
• Acceso rápido a la consola de errores.

DF es algo así como una página separada en un marco. Si lo abre, estará abierto para todas las pestañas (a diferencia de firebug). Por tanto, antes de inspeccionar un elemento, debemos seleccionar la página que queremos visualizar de la lista.

Desafortunadamente, aquí, como en Internet Explorer, la barra de herramientas de Dav no muestra los elementos creados dinámicamente. Y, en general, cuando inspeccionamos la página, no se ejecuta JavaScript: no se hace clic en los enlaces y botones. Esperemos que cuando DragonFly se acerque al lanzamiento, veamos todas estas características.

Depurar WEB Inspector en Safari

Diré de inmediato eso sobre el navegador. safari Silbé la información, por lo tanto, como dicen, no me hago responsable de la adecuación del material.

Para habilitar el elemento "Desarrollo" en el menú de Safari, debe habilitar el elemento correspondiente en la configuración (la pestaña "Avanzado"):

Las siguientes funciones están disponibles para nosotros en el menú "Desarrollo":

Echemos un vistazo más de cerca al inspector WEB:

De forma predeterminada, el inspector se abre en modo de vista HTML. Pero se puede cambiar al modo de vista DOM. Para hacer esto, hay un interruptor en la placa superior. Al pasar el cursor sobre un elemento en el inspector, se resaltará en la página misma. No puede ver el relleno, cambiar el marcado o CSS sobre la marcha, o ver cambios dinámicos en el DOMe sobre la marcha como no puede hacerlo en FireBug. Pero, ya ves, se ve muy bien.

Si desea trabajar con el inspector en una ventana del navegador, puede hacer clic en el botón en la esquina inferior izquierda.

Incluso en Safari, una función como la "Línea de tiempo de la red" está disponible (el botón "Red" en el inspector):

Puede ver claramente cuándo y cuánto tiempo se cargan los archivos. También puede ver los encabezados de las solicitudes, pero, lamentablemente, no puede ver el contenido en sí.

Depuración para desarrolladores en Google Chrome

Lame nació en una forma avanzada, e inmediatamente tiene, aunque torcido por ahora, pero todavía herramientas para desarrolladores.

• Inspector DOM;
• depurador javascript;
• Consola JavaScript.

Para inspeccionar un elemento, haga clic derecho sobre él y Menú de contexto seleccione "Ver código de elemento":

La funcionalidad es la misma que en Safari: los elementos se resaltan al pasar el mouse, pero la edición de CSS y HTML no está disponible, los cambios en el DOM no se rastrean. Solo que el botón en la esquina inferior izquierda, que debería adjuntar el inspector a la ventana del navegador, no funciona.

En la pestaña "Recursos", podemos ver lo siguiente:

Ligeramente diferente de la escala en el safari. Translúcidos en este diagrama son los tamaños de archivo relativos, y a todo color es el tiempo de descarga. De una forma u otra, es obvio que esta parte de Chrome aún está lejos de completarse.

En este artículo, revisé las extensiones más famosas y las herramientas integradas para navegadores.

Hay otros, por ejemplo:

• Internet Explorer WEB Development Helper es una buena ayuda para los desarrolladores de ASP.NET (Internet Explorer);
• WEB Developer Toolbar: barra de herramientas para Internet Explorer y FireFox. Hay varias características útiles;
• Barra de herramientas de accesibilidad WEB: barra de herramientas para Internet Explorer. Nada interesante.

Si hay complementos que no mencioné, pero que valdrían la pena, o hay funciones para las extensiones mencionadas que me perdí, escriba.

¡Úsalo en la salud!

Escribir HTML es genial, pero ¿cómo saber dónde está el error cuando algo no funciona? Este artículo describe varias herramientas que lo ayudan a encontrar y corregir errores en HTML.

La depuración no da miedo

Mientras escribe algo de código, todo suele ir bien hasta el momento en que comete un error. Entonces su código no funciona, o no funciona de la manera que pretendía. Si intenta compilar un programa Rust que no funciona, el compilador informará un error:

En este caso, el mensaje de error es relativamente fácil de entender: "cadena de comillas dobles sin terminar". Si observa cuidadosamente println!(¡Hola, mundo!"); , notará que no hay comillas dobles. Por supuesto, los mensajes de error pueden volverse mucho más difíciles de entender a medida que su código crece, e incluso los casos más simples pueden resultar intimidantes para aquellos que no saben nada sobre Rust.

¡Pero no tengas miedo de depurar! Para escribir y depurar cómodamente cualquier código, debe comprender el lenguaje y sus herramientas.

HTML y depuración

HTML no es tan difícil de entender como Rust. El HTML no se compila en ninguna otra forma antes de que el navegador lo analice y muestre el resultado (se interpreta, no se compila). Sintaxis elementos HTML mucho más claro que los "lenguajes de programación reales" como Rust, JavaScript o Python. La forma en que los navegadores leen HTML es más tolerante que los lenguajes de programación que interpretan su código de manera más estricta. Esto es malo y bueno al mismo tiempo.

código tolerante

Entonces, ¿qué significa tolerante? En términos generales, cuando te equivocas en el código, te encontrarás con dos tipos de errores:

• errores de sintaxis: Estos son errores ortográficos, como se muestra arriba en el ejemplo de Rust. Suelen ser fáciles de solucionar, siempre que esté familiarizado con la sintaxis del idioma y sepa qué significan los mensajes de error.
• Errores lógicos: Son errores que aparecen cuando la sintaxis es correcta, pero el código no cumple su cometido, es decir, el programa no se ejecuta correctamente. Estos son más difíciles de corregir que los sintácticos, ya que no se muestran mensajes que indiquen el lugar donde cometió un error.

HTML no sufre errores de sintaxis porque el navegador lee el código con tolerancia, en el sentido de que las páginas se pueden representar incluso si hay errores de sintaxis. Los navegadores tienen reglas integradas para interpretar marcas mal escritas, y puede ejecutar algo incluso si quería decir otra cosa. ¡Esto puede ser un verdadero problema!

en una nota: HTML es legible porque cuando la web apareció por primera vez, se decidió permitir que las personas publicaran contenido incluso si el código era incorrecto, ya que esto es mucho más importante que asegurarse de que la sintaxis sea absolutamente correcta. La web no sería tan popular en este momento si fuera estricta con los recién llegados.

Aprendizaje activo: Introducción al código tolerante

Es hora de explorar la naturaleza del código tolerante en HTML.

Validación HTML

Está claro del ejemplo anterior que vale la pena verificar la validez del HTML. En el ejemplo simple anterior, puede revisar todo el código y encontrar errores, pero ¿qué pasa con las páginas grandes y complejas?

Lo mejor es comprobar la página en el servicio de validación de marcas. Fue creado y mantenido por W3C, la organización responsable de la especificación de HTML, CSS y otras tecnologías web. El servicio verificará su HTML e informará sobre los errores que contiene.

El HTML se puede verificar en la dirección cargando el archivo o simplemente copiándolo en la página.

Aprendizaje activo: validación de un documento HTML

1. Abra el servicio de validación de marcado en su navegador.
2. Cambie al modo Validar por entrada directa.
3. Copie todo el código del documento (no solo el cuerpo) y péguelo en el espacio de entrada.
4. Prensa Cheque cheque).

Verá una lista de errores y otra información.

Trabajar con mensajes de error

Por lo general, queda claro de inmediato lo que significan los mensajes, pero a veces hay que tratar de entender de qué se trata. Ahora repasaremos todos los errores y analizaremos lo que significan. Tenga en cuenta que los mensajes incluyen una fila y una columna de código para facilitar la búsqueda de errores.

• "Etiqueta final li implícita, pero había elementos abiertos" (2 instancias): no hay una etiqueta final explícita, aunque el navegador adivina dónde debería estar. El mensaje apunta a la línea posterior a la que se esperaba la etiqueta final, pero encontrará el lugar correcto.
• "Elemento no cerrado fuerte": Esto es muy simple error- elemento) indica que su contenido es de gran importancia, gravedad o urgencia. Los navegadores suelen renderizar contenido en negrita."> no está cerrado y el mensaje apunta directamente a la etiqueta de inicio.
• "La etiqueta final fuerte viola las reglas de anidamiento": el elemento está anidado incorrectamente; no hay una etiqueta de apertura coincidente en este nivel.
• "Se alcanzó el final del archivo cuando estaba dentro de un valor de atributo. Ignorando la etiqueta": Mensaje misterioso. El problema es que en algún lugar (lo más probable, al final del documento) la propiedad de un elemento está registrada incorrectamente y el final del archivo apareció en esta propiedad. El enlace no es visible en el navegador; lo más probable es que el problema esté al lado.
• "Final de archivo visto y había elementos abiertos": El archivo ha finalizado, pero algunos elementos no están cerrados. El mensaje indica el final del archivo, en este caso el elemento no está cerrado ejemplo: enlace a la página de inicio de Mozilla ↩

↩ ↩

Muy a menudo, los usuarios pueden observar una situación en la que aparece un mensaje de error de secuencia de comandos en el navegador (IE). Si la situación es aislada, entonces no debe preocuparse, pero cuando tales errores se vuelven regulares, debe pensar en la naturaleza de este problema.

Un error de secuencia de comandos en Internet Explorer generalmente se debe a que el navegador no maneja correctamente el código de la página HTML, la presencia de archivos temporales de Internet, la configuración de la cuenta y muchas otras razones que sera discutido en este material. También se considerarán métodos para resolver este problema.

Antes de continuar con los métodos comunes para diagnosticar problemas con Internet Explorer que causan errores de script, debe asegurarse de que el error ocurra no solo en un sitio en particular, sino en varias páginas web a la vez. También debe verificar la página web donde ocurre el problema bajo un cuenta, en un navegador diferente y en una computadora diferente. Esto limitará la búsqueda de la causa del error y excluirá o confirmará la hipótesis de que los mensajes aparecen como resultado de la presencia de ciertos archivos o configuraciones en la PC.

Bloqueo de scripts activos de Internet Explorer, ActiveX y Java

Los scripts activos, los controles ActiveX y Java afectan la forma en que se genera y muestra la información en el sitio y pueden ser la causa real del problema descrito anteriormente si se bloquean en la PC del usuario. Para asegurarse de que se produzcan errores de script por este motivo, solo necesita restablecer la configuración de seguridad del navegador. Para hacer esto, siga las siguientes pautas.

• Abra Internet Explorer 11
• Servicio

• En la ventana, ve a la pestaña Seguridad
• A continuación, haga clic en el botón Por defecto y luego el boton DE ACUERDO

Archivos temporales de Internet Explorer

Cada vez que abre una página web, Internet Explorer guarda una copia local de esta página web en su PC en los llamados archivos temporales. Cuando hay demasiados archivos de este tipo y el tamaño de la carpeta que los contiene alcanza varios gigabytes, pueden ocurrir problemas con la visualización de la página web, es decir, aparecerá un mensaje de error de secuencia de comandos. Limpiar regularmente la carpeta de archivos temporales puede ayudar a solucionar este problema.
Para eliminar archivos temporales de Internet, siga los pasos a continuación.

• Abra Internet Explorer 11
• Servicio
• En la ventana, ve a la pestaña Son comunes
• en el capitulo Historial del navegador presiona el botón Borrar…

• En la ventana Eliminar el historial de búsqueda marque las casillas junto a los elementos Archivos temporales de Internet y sitios web, Galletas y datos del sitio web, Revista
• Clic en el botón Borrar

Funcionamiento del software antivirus.

Los errores de script son posibles a través del trabajo. programa antivirus cuando bloquea scripts activos, controles ActiveX y Java en la página, o carpetas para guardar archivos temporales del navegador. En este caso, debe consultar la documentación del producto antivirus instalado y deshabilitar el escaneo de carpetas para guardar archivos temporales de Internet, así como bloquear objetos interactivos.

Procesamiento incorrecto del código de la página HTML

Aparece, por regla general, en un sitio en particular e indica que el código de la página no está completamente adaptado para funcionar con Internet Explorer. En este caso, es mejor deshabilitar la depuración de scripts en el navegador. Para hacer esto, siga estos pasos.

• Abra Internet Explorer 11
• En la esquina superior derecha del navegador, haga clic en el icono Servicio en forma de engranaje (o la combinación de teclas Alt + X). Luego, en el menú que se abre, seleccione
• En la ventana, ve a la pestaña Además
• A continuación, desmarque la casilla Mostrar notificación para cada error de script y presiona el boton DE ACUERDO.

Esta es una lista de las más causas comunes, que provocan errores de script en Internet Explorer, así que si estás cansado de este tipo de mensajes, presta un poco de atención y soluciona el problema de una vez por todas.

En este momento hay una gran cantidad de navegadores diferentes que soportan los estándares HTML existentes hasta cierto punto. Personalmente, prefiero el navegador de Mozilla Corporation. Este navegador tiene una larga historia (se basa en el famoso navegador Netscape Navigator). También me gusta este navegador porque admite un sistema de complementos: complementos distribuidos por separado, cuando está conectado, puede cambiar la funcionalidad y personalizarlo según sus necesidades. Y por último, este navegador se distribuye gratuitamente con códigos fuente abiertos, lo cual también es importante. Por lo tanto, decidí describir las posibilidades que brinda este navegador no solo al usuario, sino también al desarrollador de páginas Web, lo fácil y conveniente que puede ser el proceso de depuración de productos escritos.

Mozilla Firefox es uno de los navegadores más populares entre los desarrolladores y desarrolladores web. Atrae su atención debido a las oportunidades que brinda este navegador para depurar proyectos creados, corregir errores y mejorar. El navegador viene estándar con una consola java (o "consola de errores"). Esta utilidad le permite depurar java-scripts incrustados. Pero, los complementos de terceros le dan mucha más funcionalidad al navegador, que se pueden descargar e instalar desde el sitio web oficial de la Fundación Mozilla. Ahora quiero ver dos de estos complementos: Web Developer y Firebug. Ambos complementos se pueden descargar desde los enlaces anteriores del sitio oficial de complementos. Después de instalarlos y reiniciar el navegador, el desarrollador tiene amplias oportunidades, que describiré a continuación, a su vez para cada uno de los complementos.

complemento de firebug

Como se indica en la página oficial: “Firebug se integra con el navegador Firefox para enriquecer enormemente el kit de herramientas para desarrolladores. Podrá editar, depurar y explorar CSS, HTML y Javascript en vivo, en cualquier página web”. Y de hecho lo es. Considere algunas de las funciones de este complemento, a saber:

• Ver y editar HTML.
• Creación de CSS.
• Supervisión de solicitudes de red
• Depuración de JavaScript
• Investigación de JavaScript
• Iniciar sesión para JavaScript

Esta no es una lista completa de todas sus características. Dado que el proyecto es de código abierto, cualquiera puede cambiar y agregar funcionalidad.

Para trabajar con el complemento, debe presionar la tecla F12 (Ctrl-F12 para trabajar con él en una ventana separada). Después de un 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. Digamos que necesitamos encontrar este o aquel objeto en el código HTML, o determinar cómo se implementa exactamente con usando CSS fragmento actual. Para hacer esto, solo necesita seleccionar las opciones necesarias en el menú de la ventana del complemento con el mouse. En el siguiente ejemplo, esto es HTML en modo Inspeccionar. Ahora, yendo a la página del documento, debajo del cursor del mouse notaremos un área rectangular que ilustra aquí el área con la que estamos trabajando. En la ventana del complemento, veremos los parámetros HTML y CSS que se utilizan. Además, al hacer clic en cada uno de ellos, puede realizar cambios y seguirlos en forma dinámica. Las acciones descritas se ilustran en las figuras 2,3,4.

En el desarrollo de este proyecto, el complemento descrito anteriormente se utilizó precisamente para estos fines. Sin embargo, aunque aquí no se ha utilizado ningún script java, el complemento firebug también se puede utilizar para depurarlo. En la Figura 5 se muestra un ejemplo de depuración.

En esto, como se describió anteriormente, la funcionalidad de esta extensión no está limitada. Puede estudiarlo completamente y usarlo según sus necesidades descargándolo de los enlaces proporcionados, después de instalar Mozilla Firefox.

complemento de desarrollador web

Web Developer - la segunda extensión para Navegador Mozilla Firefox, muy potente y funcional, que permite una depuración rápida y eficaz. Después de instalarlo, aparecerá una barra de herramientas adicional en la ventana del navegador, como se muestra en la Figura 6.

El trabajo adicional con el complemento es intuitivo. Por ejemplo, si necesitamos hacer un trabajo de CSS (aunque no tan completamente funcional como con el complemento de Firebug), podemos hacer clic en el menú de CSS y deshabilitar, habilitar o deshabilitar.

Es muy conveniente para un desarrollador poder ver cómo se verá su proyecto en monitores con diferentes resoluciones. Para hacer esto, use la pestaña Cambiar tamaño. Aquí puede configurar manualmente permisos necesarios pantalla (800x600, 1024x768, etc.), y luego cambiar libremente entre ellos, acercar o alejar el contenido. Esta funcionalidad se muestra en la Figura 7.

Esta extensión también tiene una rica funcionalidad, todas descritas y disponibles en los sitios oficiales.

Lista de fuentes utilizadas

• 1. www.getfirebug.com
  Sitio web oficial del complemento.
• 2. http://addons.mozilla.org
  Complementos de alojamiento del sitio web oficial de Mozilla para navegador firefox, información para desarrolladores, información sobre el uso de complementos.
• 3. http://chrispederick.com/work/web-developer/
  Sitio web oficial del desarrollador del complemento WebDeveloper.

Mientras navega por Internet, Internet Explorer puede mostrar mensajes de que la página contiene errores y es posible que no se muestre correctamente. Veamos algunas formas de solucionar este problema.

Instrucción

Si no hay dificultades visibles en el navegador, a excepción de un error intermitente, puede intentar desactivar la depuración de secuencias de comandos para que el mensaje no vuelva a aparecer (si el error aparece en más de un sitio, pero en varios sitios a la vez, proceda al siguiente paso). En el menú Herramientas, abra Opciones de Internet, seleccione la pestaña Avanzado y marque la casilla junto a Evitar la depuración de secuencias de comandos. Si necesita desactivar la notificación de todos los errores, desmarque la casilla de verificación "Mostrar notificación de cada error de secuencia de comandos".

Intente abrir el sitio que está causando el error mientras navega desde una cuenta diferente o desde una computadora diferente para ver si el problema es local. Si aparece el error, lo más probable es que se deba a un código de página web incorrecto. En este caso, puede deshabilitar la depuración de secuencias de comandos siguiendo las instrucciones del paso anterior. Si el problema desaparece al navegar por el sitio usando una computadora o cuenta diferente, continúe con el próximo paso.

Es posible que Internet Explorer no bloquee los scripts activos, Java y ActiveX, que determinan la visualización de información en la página en el momento de la navegación. Para solucionar el problema, debe restablecer la configuración de seguridad de su navegador. Para hacer esto, en el menú "Herramientas", seleccione "Opciones de Internet" y vaya a la pestaña "Seguridad". Haga clic en el botón "Predeterminado" y luego en "Aceptar". Si el problema persiste después de reiniciar la página que estaba causando el error, pruebe el siguiente método.

Como sabe, el navegador almacena archivos temporales y copias de páginas en una carpeta separada para acceder a ellos posteriormente. Si el tamaño de la carpeta es demasiado grande, algunas páginas pueden mostrar errores. El problema se puede resolver limpiando periódicamente la carpeta de archivos temporales. Para hacer esto, abra el cuadro de diálogo Opciones de Internet desde el menú Herramientas. En la pestaña General, en el grupo Historial, haga clic en el botón Eliminar. Marque las casillas de Archivos temporales de Internet, Cookies, Historial, Datos de formulario web y haga clic en Aceptar.

Muy a menudo, los usuarios pueden observar una situación en la que aparece un mensaje de error de secuencia de comandos en el navegador Internet Explorer (IE). Si la situación es aislada, entonces no debe preocuparse, pero cuando tales errores se vuelven regulares, debe pensar en la naturaleza de este problema.

Un error de secuencia de comandos en Internet Explorer generalmente se debe a que el navegador no procesa correctamente el código de la página HTML, la presencia de archivos temporales de Internet, la configuración de la cuenta y muchas otras razones, que se analizarán en este material. También se considerarán métodos para resolver este problema.

Antes de continuar con los métodos comunes para diagnosticar problemas con Internet Explorer que causan errores de script, debe asegurarse de que el error ocurra no solo en un sitio en particular, sino en varias páginas web a la vez. También debe verificar la página web que está experimentando este problema con una cuenta diferente, en un navegador diferente y en una computadora diferente. Esto limitará la búsqueda de la causa del error y excluirá o confirmará la hipótesis de que los mensajes aparecen como resultado de la presencia de ciertos archivos o configuraciones en la PC.

Bloqueo de scripts activos de Internet Explorer, ActiveX y Java

Los scripts activos, los controles ActiveX y Java afectan la forma en que se genera y muestra la información en el sitio y pueden ser la causa real del problema descrito anteriormente si se bloquean en la PC del usuario. Para asegurarse de que se produzcan errores de script por este motivo, solo necesita restablecer la configuración de seguridad del navegador. Para hacer esto, siga las siguientes pautas.

• Abra Internet Explorer 11
• Servicio

• En la ventana, ve a la pestaña Seguridad
• A continuación, haga clic en el botón Por defecto y luego el boton DE ACUERDO

Archivos temporales de Internet Explorer

Cada vez que abre una página web, Internet Explorer guarda una copia local de esta página web en su PC en los llamados archivos temporales. Cuando hay demasiados archivos de este tipo y el tamaño de la carpeta que los contiene alcanza varios gigabytes, pueden ocurrir problemas con la visualización de la página web, es decir, aparecerá un mensaje de error de secuencia de comandos. Limpiar regularmente la carpeta de archivos temporales puede ayudar a solucionar este problema.
Para eliminar archivos temporales de Internet, siga los pasos a continuación.

• Abra Internet Explorer 11
• En la esquina superior derecha del navegador, haga clic en el icono Servicio en forma de engranaje (o la combinación de teclas Alt + X). Luego, en el menú que se abre, seleccione
• En la ventana, ve a la pestaña Son comunes
• en el capitulo Historial del navegador presiona el botón Borrar…

• En la ventana Eliminar el historial de búsqueda marque las casillas junto a los elementos Archivos temporales de Internet y sitios web, Cookies y datos del sitio web, Revista
• Clic en el botón Borrar

Funcionamiento del software antivirus.

Los errores de secuencias de comandos son posibles a través de la operación de un programa antivirus cuando bloquea secuencias de comandos activas, controles ActiveX y Java en una página o carpetas para guardar archivos temporales del navegador. En este caso, debe consultar la documentación del producto antivirus instalado y deshabilitar el escaneo de carpetas para guardar archivos temporales de Internet, así como bloquear objetos interactivos.

Procesamiento incorrecto del código de la página HTML

Aparece, por regla general, en un sitio en particular e indica que el código de la página no está completamente adaptado para funcionar con Internet Explorer. En este caso, es mejor deshabilitar la depuración de scripts en el navegador. Para hacer esto, siga estos pasos.

• Abra Internet Explorer 11
• En la esquina superior derecha del navegador, haga clic en el icono Servicio en forma de engranaje (o la combinación de teclas Alt + X). Luego, en el menú que se abre, seleccione
• En la ventana, ve a la pestaña Además
• A continuación, desmarque la casilla Mostrar notificación para cada error de script y presiona el boton DE ACUERDO.

Esta es una lista de las razones más comunes que causan errores de script en Internet Explorer, así que si estás cansado de este tipo de mensajes, presta un poco de atención y resuelve el problema de una vez por todas.

Hay, por supuesto, otros, definitivamente los mencionaré.

Firebug para Firefox

no estoy seguro si chinche de fuego el progenitor de otras herramientas de desarrollo, pero definitivamente es el más popular, fácil de usar y repleto de funciones.

Firebug es un complemento para Firefox, lo que significa que debe descargarse del sitio de complementos de Firefox e instalarse.

Para llamar al firebug, simplemente presione F12.

Características de este complemento:

• Inspección y edición de HTML que cambia dinámicamente;
• Edición de CSS sobre la marcha;
• Depuración de JavaScript, línea de comando para ejecutar scripts;
• Monitoreo de solicitudes de red: puede ver el tamaño y el tiempo de descarga de archivos y scripts, encabezados de solicitudes;
• analizador DOM.

Puede hablar sobre estas características en detalle durante mucho tiempo, pero creo que todos nuestros lectores las conocen y, si no, la información detallada se encuentra en la página de inicio de Firebug o la misma está traducida por Ilya Kantor.

Además del propio firebug, es posible que necesite una loción útil para él: galleta de fuego, con el que (sorpresa:-) puedes ver y modificar las cookies.

Barra de herramientas para desarrolladores WEB para Firefox

Otra adición útil a Ognelis. Se parece a esto:

Vamos a repasar los puntos.

Desactivar

Le permite desactivar JavaScript, deshabilitar el uso del caché, que es muy útil en el desarrollo (le permite estar seguro de que la página se cargó con las últimas actualizaciones), cancelar los colores utilizados en la página y reemplazarlos con los estándar, deshabilite el envío en el encabezado de referencia (la página desde la que se realizó la transición).

Galletas

Una opción útil para trabajar con cookies: se pueden ver, eliminar, bloquear y agregar.

CSS

Este menú contiene la característica más genial de la barra de herramientas del desarrollador: la edición de CSS sobre la marcha. Además, es posible ver css, desactivar, etc., etc. En mi opinión, la presencia de atajos de teclado es muy útil aquí (CTRL + SHIFT + C, por ejemplo, le permite ir inmediatamente a ver estilos de página)

formularios

Todo para trabajar con formularios: mostrar contraseñas, mostrar información sobre formularios, convertir métodos de formulario (GET » POST y viceversa) y mucho más. Función útil "Rellenar campos de formulario" para el llenado automático de campos de formulario (por ejemplo, al probar un sitio cuando la función de recordar contraseña está deshabilitada. De lo contrario, no veo nada útil en este párrafo.

Imágenes

Hay una función útil para desactivar las imágenes: para ver cómo se ve su sitio sin imágenes. Las imágenes se pueden rodear, mostrar sus tamaños, mostrar atributos alternativos.

información

Este menú tiene muchas opciones. Puede ser útil mostrar los atributos de clase e id en la página. Además, el elemento "Ver información de color" es interesante: para obtener rápidamente información sobre los colores que se utilizan en la página. "Ver tamaño del documento" - ver el tamaño de la página. "Ver encabezados de respuesta": vea los encabezados de página.

Misceláneas

La característica más utilizada es borrar el caché. Además, la "Regla de página" - regla, "Lupa de página" - lupa y "Guías de línea" - algunas líneas están disponibles aquí, que pueden ser útiles para recortar la plantilla.

describir

Selección de diferentes elementos de página: tablas, encabezados, enlaces, marcos, bloques. Redimensionar le permite cambiar el tamaño de la ventana del navegador para que se ajuste a cualquier extensión de pantalla estándar. Las herramientas aquí son funciones almacenadas para la validación de la página. Tanto locales como externos. Acceso conveniente y rápido para validar HTML, CSS y más. Puede usar el método abreviado de teclado CTRL+MAYÚS+H para validar HTML.

ver fuente

Ver código fuente. Capacidad de ver en una aplicación externa, ver el código generado.

El de la derecha es mi favorito. Es un rápido validador de HTML, CSS e indicador de error de JavaScript. Si no hay problemas, el ícono es verde, y si hay problemas, rojo.

Barra de herramientas para desarrolladores de Internet Explorer

A partir de 8.0, la depuración de errores ya está integrada en este navegador. Se llama fácilmente tecla F12. Cierto, es un miserable como programa de los 90.

Pero hay una herramienta mucho más genial para este navegador, la llamada Barra de herramientas para desarrolladores de Internet Explorer que se puede descargar desde el enlace.

En apariencia, esta barra de herramientas, por supuesto, se parece a Firebug, pero, por desgracia, aún no ha crecido. Aunque, por otro lado, tiene algunas características que el firebug no tiene. Llamaría a Internet Explorer Developer Toolbar un híbrido de Firebug y desarrollador web firefox Barra de herramientas.

Al igual que en firebug, es posible inspeccionar un elemento con un simple clic. Pero, si podemos ver inmediatamente rellenos y márgenes, entonces no existe tal posibilidad aquí.

Además, la barra de herramientas para desarrolladores de Internet Explorer no actualiza dinámicamente el árbol de elementos, como lo hace Firebug. Es decir, si cambiamos algo en la página usando js, ​​no veremos nada usando esta barra de herramientas.

De lo que puede disfrutar: cambiar CSS sobre la marcha (una manera fácil de encontrar qué piratear :), la capacidad de deshabilitar CSS e imágenes, la capacidad de borrar rápidamente el caché y jugar con cookies, acceso rápido a la validación.

Lo más delicioso: hay un selector de color incorporado que le permite obtener cualquier color de la página usando un cuentagotas. (para ff hay un complemento ColorZilla separado).

Barra de depuración de depuración para Internet Explorer

Puede descargar DebugBar para Internet Explorer desde el enlace proporcionado.

Una extensión interesante por derecho propio. Instalado como un panel adicional al navegador:

Por alguna razón, hay un motor de búsqueda incorporado, un cuentagotas, la capacidad de cambiar el tamaño de la ventana y, de nuevo, por alguna razón, la capacidad de enviar una página a un amigo para que la jabone. Aunque podría ser útil. Pero no supe aprovechar esta oportunidad.

Además, hay un inspector:

El método de inspección haciendo clic o señalando no se adaptaba a los desarrolladores: se les ocurrió algo más interesante. En DebugBar, debe arrastrar el destino al elemento deseado para verlo en el árbol. No hay opción para editar CSS. Pero hay un validador y una consola js incorporada.

Y si profundizas en la configuración, puedes encontrar esto:

Tanto divertido como triste.

Se sabe que la barra de herramientas del desarrollador se integrará en el octavo explorador. Será similar al descrito en el tercer párrafo, pero esperamos que sea mejor.

Depurar DragonFly para Opera

DragonFly está integrado en Opera desde la versión 9.5, por lo que no es necesario instalarlo. Para activar Dragonfly, vaya a Herramientas → Avanzado → Herramientas para desarrolladores. Y si está en inglés, entonces Herramientas → Avanzado → Herramientas para desarrolladores.

Inmediatamente le advertiré que DragonFly está en la etapa Alpha2, esto explica muchos de sus problemas técnicos.

Lista de características:

• inspector DOM;
• Haga clic en Inspección (nuevamente, no veremos el relleno como en FireFox);
• edición;
• Acceso rápido a la consola de errores.

DF es algo así como una página separada en un marco. Si lo abre, estará abierto para todas las pestañas (a diferencia de firebug). Por tanto, antes de inspeccionar un elemento, debemos seleccionar la página que queremos visualizar de la lista.

Desafortunadamente, aquí, como en Internet Explorer, la barra de herramientas de Dav no muestra los elementos creados dinámicamente. Y, en general, cuando inspeccionamos la página, no se ejecuta JavaScript: no se hace clic en los enlaces y botones. Esperemos que cuando DragonFly se acerque al lanzamiento, veamos todas estas características.

Depurar WEB Inspector en Safari

Diré de inmediato eso sobre el navegador. safari Silbé la información, por lo tanto, como dicen, no me hago responsable de la adecuación del material.

Para habilitar el elemento "Desarrollo" en el menú de Safari, debe habilitar el elemento correspondiente en la configuración (la pestaña "Avanzado"):

Las siguientes funciones están disponibles para nosotros en el menú "Desarrollo":

Echemos un vistazo más de cerca al inspector WEB:

De forma predeterminada, el inspector se abre en modo de vista HTML. Pero se puede cambiar al modo de vista DOM. Para hacer esto, hay un interruptor en la placa superior. Al pasar el cursor sobre un elemento en el inspector, se resaltará en la página misma. No puede ver el relleno, cambiar el marcado o CSS sobre la marcha, o ver cambios dinámicos en el DOMe sobre la marcha como no puede hacerlo en FireBug. Pero, ya ves, se ve muy bien.

Si desea trabajar con el inspector en una ventana del navegador, puede hacer clic en el botón en la esquina inferior izquierda.

Incluso en Safari, una función como la "Línea de tiempo de la red" está disponible (el botón "Red" en el inspector):

Puede ver claramente cuándo y cuánto tiempo se cargan los archivos. También puede ver los encabezados de las solicitudes, pero, lamentablemente, no puede ver el contenido en sí.

Depuración para desarrolladores en Google Chrome

Lame nació en una forma avanzada, e inmediatamente tiene, aunque torcido por ahora, pero todavía herramientas para desarrolladores.

• Inspector DOM;
• depurador javascript;
• Consola JavaScript.

Para inspeccionar un elemento, haga clic derecho sobre él y seleccione "Ver código de elemento" en el menú contextual:

La funcionalidad es la misma que en Safari: los elementos se resaltan al pasar el mouse, pero la edición de CSS y HTML no está disponible, los cambios en el DOM no se rastrean. Solo que el botón en la esquina inferior izquierda, que debería adjuntar el inspector a la ventana del navegador, no funciona.

En la pestaña "Recursos", podemos ver lo siguiente:

Ligeramente diferente de la escala en el safari. Translúcidos en este diagrama son los tamaños de archivo relativos, y a todo color es el tiempo de descarga. De una forma u otra, es obvio que esta parte de Chrome aún está lejos de completarse.

En este artículo, revisé las extensiones más famosas y las herramientas integradas para navegadores.

Hay otros, por ejemplo:

• Internet Explorer WEB Development Helper es una buena ayuda para los desarrolladores de ASP.NET (Internet Explorer);
• WEB Developer Toolbar: barra de herramientas para Internet Explorer y FireFox. Hay varias características útiles;
• Barra de herramientas de accesibilidad WEB: barra de herramientas para Internet Explorer. Nada interesante.

Si hay complementos que no mencioné, pero que valdrían la pena, o hay funciones para las extensiones mencionadas que me perdí, escriba.

¡Úsalo en la salud!

Internet Explorer 11 en Windows 8.1 y Windows 7 viene con un conjunto mejorado y completamente rediseñado de herramientas para desarrolladores integradas en el navegador para ayudar a los desarrolladores a crear, diagnosticar y optimizar aplicaciones y sitios web modernos en muchos dispositivos. Las nuevas herramientas, a las que simplemente nos referimos como F12 en aras de la brevedad, permiten a los desarrolladores web trabajar de manera rápida y eficiente.

Los grupos de trabajo de Visual Studio e Internet Explorer trabajaron juntos para crear las herramientas F12, que se basan en el principio de ayudar a los desarrolladores a pasar rápidamente del problema a la solución utilizando datos significativos. La nueva suite F12 brinda una experiencia web rápida y flexible con herramientas para diagnosticar y solucionar problemas de rendimiento, así como herramientas para ayudarlo a comprender mejor cómo Internet Explorer diseña y representa las aplicaciones web. Las herramientas F12 son compatibles con el flujo de trabajo rápido e interactivo que utilizan los desarrolladores web de hoy.

Juego de herramientas universales.

El nuevo conjunto F12 ayuda a los desarrolladores a pasar rápidamente del problema a la solución. Algunas de las nuevas características interesantes incluyen:

• Herramientas de análisis de respuesta de la interfaz de usuario y creación de perfiles de memoria para ayudar a los desarrolladores a crear aplicaciones web rápidas y flexibles.
• Live DOM Explorer y CSS checker actualizados con la página para que los desarrolladores puedan explorar de forma interactiva cómo el contenido dinámico afecta el diseño y el estilo.
• Capacidad para depurar JavaScript que se inicia rápidamente sin actualizar la página para que los desarrolladores puedan trabajar más rápido

A medida que utilice las herramientas F12, notará muchas otras mejoras que lo ayudarán a lograr un flujo de trabajo rápido e interactivo:

• Acceso rápido a estas herramientas haciendo clic derecho en un elemento de menú con el "elemento de inspección"
• Interacción eficiente con el teclado
• Amplia capacidad para copiar elementos y componentes de herramientas, de modo que se puedan pegar en cualquier editor sin formato adicional

Lo que es más importante, estas herramientas ahora muestran la información más completa y precisa disponible, desde las reglas @media y!important en DOM Explorer hasta la estructura de costos por elemento en UI Response Profiler. Estas herramientas también proporcionan datos directamente significativos; por ejemplo, el generador de perfiles de memoria identifica los nodos DOM que están "activos" pero no referenciados desde el marcado o el árbol de representación.

Las capacidades de la nueva suite F12 también están disponibles en Visual Studio, por lo que los desarrolladores tienen una experiencia uniforme y sin problemas en todas nuestras herramientas y plataformas de desarrollo web.

Ahora echemos un vistazo rápido a estas herramientas en acción.

Creación de perfiles de aplicaciones con el analizador de capacidad de respuesta de la interfaz de usuario

La herramienta de capacidad de respuesta de la interfaz de usuario lo ayuda a comprender dónde se gasta el tiempo de la CPU para que su aplicación pueda alcanzar su máximo potencial de rendimiento. Esta herramienta le brinda la información que necesita para comprender el funcionamiento interno de Internet Explorer, proporcionando visualización en tiempo de ejecución de código HTML, CSS y JavaScript, así como efectos secundarios importantes, como el marcado y la recolección de elementos no utilizados. De un vistazo, puede ver exactamente qué tan rápido responde su aplicación y cómo se procesa. Esto le permitirá identificar fuentes específicas cuellos de botella y un enfoque más inteligente para su optimización.

perfilado de sitios web

Analice el uso de la memoria de la aplicación con el generador de perfiles de memoria

Este analizador de memoria te ayudará a evitar fugas de memoria o un consumo excesivo de memoria. Creación de aplicaciones web que funcionan para clientes las 24 horas del día, o complejas aplicaciones interactivas a menudo significa que su desarrollador debe prestar especial atención a los problemas de uso de la memoria.

Si bien JavaScript es un entorno de recolección de basura, las aplicaciones generalmente consumen más memoria simplemente porque las referencias de objetos no se han liberado (y no se pueden). El analizador de memoria lo ayuda a identificar estos problemas al proporcionar información sobre cada objeto en la página, ya sea un objeto JavaScript o el DOM. Con esta información puede, por ejemplo, ver cuánta memoria tiene un elemento y qué objetos soportan su persistencia. Pero lo más importante, puede comparar dos instantáneas y ver qué ha cambiado. Esto le permitirá comprender por qué su aplicación utiliza más memoria y corregir esta situación.

Instantánea de montón que muestra elementos DOM deshabilitados

Obtenga una comprensión rápida del rendimiento de la aplicación con el Panel de rendimiento

Para ayudarlo a identificar rápidamente los problemas que afectan el rendimiento de su página, Internet Explorer 11 proporciona un widget de "página" llamado Panel de rendimiento, al que se accede mediante el método abreviado de teclado Ctrl+Shift+U o el elemento de menú Herramientas correspondiente ( Alt+T ). Este panel muestra dinámicamente estadísticas en Internet Explorer para métricas clave de rendimiento, como el tiempo de procesamiento, la memoria, los fotogramas por segundo (fps) y el uso de la CPU. El panel de rendimiento no requiere el uso de herramientas F12 y también se puede usar en navegadores modernos.

Con el panel de rendimiento, puede identificar rápidamente las interacciones de la página que están causando caídas en la velocidad de fotogramas o un uso elevado de la CPU. Luego puede cambiar a F12 para reproducir el problema y encontrar una solución.

Inspeccionar elementos y modificar marcas y estilos usando DOM Explorer

DOM Explorer facilita la configuración interactiva de consultas @media y reglas CSS y sus propiedades. Es por eso interfaz de usuario su aplicación se convierte en una interfaz multidispositivo de alta capacidad de respuesta. Puede comenzar rápidamente en una página web haciendo clic con el botón derecho e inspeccionando el elemento deseado, lo que iniciará las herramientas F12 junto con el elemento seleccionado en DOM Explorer, mostrando dinámicamente el DOM y las reglas CSS aplicadas. Las tablas DOM y CSS representadas son dinámicas, lo que le permite comprender cómo Internet Explorer interpreta las particularidades de su marcado, estilos CSS y reglas. A medida que interactúe con la página o la modifique con DOM Explorer, los cambios que realice se mostrarán inmediatamente.

Verifique el marcado y los estilos

DOM Explorer facilita la obtención del valor correcto de una propiedad o propiedades mediante IntelliSense al realizar cambios en una tabla CSS. Puede ver fácilmente qué propiedades son incorrectas o no reconocidas y luego copiar la regla para volver a aplicarla a su fuente.

Depuración de JavaScript con el depurador y la consola

El nuevo depurador de JavaScript le brinda las herramientas para ubicar y corregir rápidamente el código que no es de confianza. El depurador de JavaScript puede abrir y ver varios archivos incluso si su biblioteca de secuencias de comandos se ha minimizado, establecer puntos de interrupción y puntos de rastreo, inspeccionar objetos, valores, cadenas de alcance de JavaScript y ver el contenido de la pila. Al ejecutar las herramientas F12, también se iniciará el depurador de JavaScript de inmediato, por lo que puede comenzar de inmediato.

Durante la depuración, probablemente querrá interactuar con su sitio web. La consola es la herramienta clave para esta tarea. Puede acceder a la consola en cualquier momento, lo que hace que el uso de este entorno interactivo con IntelliSense y los procesadores de objetos sea eficiente. La consola también proporciona una amplia gama de API especializadas que le permiten registrar la salida, analizar la cantidad de tiempo dedicado a un código específico y proporcionar procesadores de objetos cuando necesita realizar una inspección profunda de los objetos de JavaScript.

Resumiendo

Esta publicación de blog simplemente contiene un boceto de la descripción de los nuevos elementos en las herramientas F12. puedes encontrar Lista llena nuevo funcionalidad disponible para los desarrolladores en Internet Explorer 11 en el artículo "Novedades de las herramientas F12" y en la "Guía para desarrolladores de versión preliminar de Internet Explorer 11". También puede obtener más información en la demostración de prueba de Internet Explorer, "F12 Adventure".

Esperamos sus comentarios y esperamos una larga colaboración con la comunidad de desarrolladores. Comparta sus sugerencias a través de la herramienta Comentarios y sugerencias en Internet Explorer 11 o en el sitio de Connect.

PJ Hough
, vicepresidente de Visual Studio