Explicación del menú de las herramientas de desarrollador de IE8

Este artículo ha explicado brevemente los diversos menús de las herramientas de desarrolladores. Creo que todos pueden usar fácilmente esta poderosa herramienta.

Explicación detallada del uso de herramientas de desarrollador IE8 (explicación detallada de los menús en todos los niveles)

La versión oficial de IE8 ha sido lanzada. Este artículo no hará ningún comentario en una tontería, y luego dará la conclusión de que Chrome tiene la capacidad de ejecutar JavaScript que es 15 veces más que IE8, que IE8 tiene 2.456 veces mayor que el de Safari, y lo que IE8 tiene 1.235 veces más alto que Firefox. ¿A quién me importa es mejor que quién? Todo lo que sé es: cuando se lanza Windows 7, la cuota de mercado del navegador IE8 hará que los desarrolladores front-end no puedan decir: no se preocupen por IE8, pocas personas lo están usando. Entonces, este artículo lo explicará muy pragmáticamente. IE8 puede ser la única herramienta de desarrollador que hace que los desarrolladores se sientan amigables. Al mismo tiempo, extenderemos información y conocimiento relevantes. Entonces, abandone su prejuicio contra IE8 y siga observando pacientemente.

¿No ha instalado IE8?

Si es un desarrollador front-end, instale esto. Porque la versión oficial ha sido lanzada. A diferencia de la versión beta anterior, tenemos que prestarle atención en serio esta vez. Vaya e descargue e instale uno, la siguiente es la dirección de descarga-

IE8 Lista de descarga de la versión china

Windows XP

Windows Vista

Windows Server 2003

Windows Server 2008

Windows XP 64 bits

Windows Vista 64 bits

Windows Server 2003 64 bits

Windows Server 2008 64 bits

IE8 Lista de descarga de la versión en inglés

Windows XP

Windows XP 64 bits

Windows Vista

Windows Vista 64 bits

Windows Server 2003

Windows Server 2003 64 bits

Windows Server 2008

Windows Server 2008 64 bits

Oh, tal vez te preocupes que IE6 o IE7 en tu sistema haya terminado. Sí, de hecho, esto es posible. Sin embargo, puede probar la siguiente herramienta. Le permite coexistir con múltiples versiones de IE - Soluciones para la coexistencia de múltiples versiones de IE - Ietester

SuperPreview (con descarga)

Aunque esto ha cambiado su nombre de moda, no es algo nuevo. Su predecesor fue Iedevtoolbar. Sin embargo, solía ser solo un complemento para IE. En IE8, el navegador ha integrado automáticamente esta cosa, que no solo cambió el nombre de un poco rústico, sino que también tiene mucha mejora de las funciones.

Las herramientas de desarrollador también se pueden llamar en el menú Herramientas de IE8 o hacer clic directamente en la tecla F12 Actual.

Antes de presentarlo, ¿hablemos de lo que esto puede hacer? Si solo usa un navegador para navegar por el sitio web, sin preocuparse por cómo se hace la página. Entonces creo que puedes dejar esta página.

En general, las herramientas de desarrollador son herramientas diseñadas para que los desarrolladores front-end desarrollen páginas. Proporcione una serie de gadgets para permitirle encontrar fácilmente errores de página, incluido el código HTML, el código CSS y el código JavaScript. Al mismo tiempo, también proporciona algunas herramientas pequeñas que son bastante inútiles pero que aún pueden golpear el olor, como la recolección de colores, la regla de pantalla, etc.

Ok, lo hemos visto y sabemos lo que puede hacer. Luego, presentemos uno por uno de acuerdo con el orden del menú

Este artículo ha explicado brevemente los diversos menús de las herramientas de desarrolladores. Creo que todos pueden usar fácilmente esta poderosa herramienta.

【Revocar todo】

Todas las operaciones realizadas en las herramientas del desarrollador se han cancelado y la página y las estructuras DOM se actualizan.

【Fuente de intento de explorador de Internet personalizado】

【Intentando fuente】 Qué jodido sustantivo. De una manera simple, es: qué editor usar para ver el archivo fuente web. Por ejemplo: estoy usando EditPlus.

【abandonar】

Para no insultar su coeficiente intelectual, no diré mucho sobre esto. Bueno, F12 es una clave de atajo de paridad, mencionemos esto por cierto.

【Buscar】 Menú

Haga clic para seleccionar elemento

La tecla de acceso directo CTRL B tiene el mismo efecto que hacer clic en el botón ICO del mouse en la imagen. La función más utilizada. También es un interruptor de paridad. Al abrir, al hacer clic en un elemento en la página con el mouse, se seleccionará el elemento modificado y se enumerará la estructura DOM, el estilo CSS y otra información del elemento modificado.

Por ejemplo, la imagen de arriba. El área a la izquierda muestra la información DOM para este elemento de hipervínculo. Sus elementos de padres, hijos y hermanos pueden verse claramente.

El área de la derecha muestra la información de estilo de elemento. El estilo que se toca por la línea significa que el estilo ya no funciona porque la prioridad no es lo suficientemente alta. Durante la depuración, el gancho anterior se puede conectar. Cuando se engancha, significa que este estilo se ve obligado a eliminarse. Además, las propiedades de cada estilo se pueden modificar inmediatamente después de hacer clic con el mouse. Esto verá instantáneamente el efecto de página modificado, que es muy conveniente.

Los amigos que han usado Firefox's Firebug deben estar familiarizados con esto. La única diferencia es: Firebug organiza estilos con menor prioridad a continuación, eso es todo.

La función de las vistas [estilo de rastreo] y [estilo] son ​​las mismas, y se utilizan para ver la información de estilo del elemento seleccionado. La única diferencia es: ha cambiado su método de visualización. La visión específica de su hábito depende de sus propias preferencias.

Este artículo ha explicado brevemente los diversos menús de las herramientas de desarrolladores. Creo que todos pueden usar fácilmente esta poderosa herramienta.

[Diseño] La vista puede mostrar información del modelo en caja de elementos seleccionados. Aunque puede mostrar más información que Firebug, todavía prefiero el camino en Firebug para expresarla directamente en la página con bloques de color.

[Propiedades] La vista puede ver la información del atributo del elemento seleccionado. Es muy gratificante: puede agregar o eliminar algunas propiedades de inmediato para depurar rápidamente la página.

Oh, claro. Cabe señalar que si modifica el estilo o los atributos del elemento seleccionado en la herramienta de desarrollador, son solo depuración temporal y no modificará el código fuente de su página web.

【Deshabilitar】 Menú

【guion】

Se prohíben los scripts JavaScript o VBScript en la página. ¿Por qué deshabilitarlo? Para probar la robustez de la página. Algunos clientes que tienen altos requisitos para el diseño de la página preguntarán: si el cliente deshabilita el script, ¿aún se puede usar esta página? Bueno, sí, esta función se usa para probar las necesidades pervertidas de estos jodidos clientes.

【Bloqueador de ventanas emergentes】

Filtrar para la ventana emergente. Se usa para probar cuál puede hacer que el navegador o el software de seguridad filtren mi ventana emergente.

【CSS】

¡Viene el festival de desnudos CSS! Use esto para probar la postura de su página cuando se ejecuta desnudo en CSS. Esta también es una prueba importante para verificar la robustez y la accesibilidad de la página. Aunque, ahora no hay muchas personas ciegas que puedan acceder a páginas web en China.

Este artículo ha explicado brevemente los diversos menús de las herramientas de desarrolladores. Creo que todos pueden usar fácilmente esta poderosa herramienta.

【Información de clase e identificación】

La tecla de acceso directo es Ctrl I, el interruptor de paridad. Después de abrirlo, verá que la página está cubierta con densos bloques de color rojos. Se mostrará el nombre de la clase o el nombre de ID. Sí, este es el efecto de ver información de clase e identificación. Pero para ser honesto, ¿quién estaría interesado en este taburete rojo? La página no solo se ve como la ropa de un mendigo llena de parches, sino que también desconoce por completo -_- B ...

【Ruta de enlace】

Igual que arriba. Boxeará todos los hipervínculos en la página en rojo y mostrará su dirección de enlace.

【Informe de enlace】

Usando la función de informe de enlace, la herramienta de desarrollador lo ayudará a generar un informe de enlace para esta página. Incluye información como el número de enlaces, la dirección de enlace, si una nueva ventana está abierta, etc. Pero, pero ¿de qué sirve esto? Yo tampoco lo sé.

【Índice de pestañas】

Destaca todos los elementos que contienen atributos TabIndex. La configuración de la propiedad Tabindex puede cambiar el orden en que los elementos de la página web obtienen enfoque.

Este artículo ha explicado brevemente los diversos menús de las herramientas de desarrolladores. Creo que todos pueden usar fácilmente esta poderosa herramienta.

【Clave de acceso】

Resalte todos los elementos que contienen el atributo AccessKey. Establezca el atributo AccessKey para establecer las teclas de acceso directo para elementos para obtener el enfoque.

【Archivo de origen】 Fuente de elementos con estilo

Genere un archivo fuente que contenga estilos de elementos seleccionados, código HTML e información a nivel web.

Se debe seleccionar un elemento antes de que este comando sea válido. Además, el archivo fuente generado solo está relacionado con los elementos seleccionados.

【Archivo de origen】 DOM (elemento)

La tecla de acceso directo es Ctrl T. Generar un archivo de origen. Este archivo fuente solo contiene información de estructura DOM para el elemento seleccionado. Los amigos que han usado Firebug pueden pensar en el código HTML del elemento de copia de comando. En realidad, este es similar a ese. Es solo que esto se genera en una ventana, y Firebug se copia directamente al portapapeles.

【Archivo de origen】 DOM (página)

Clave de acceso directo Ctrl G. Genere un archivo de origen. Este archivo fuente contiene la estructura de información DOM de toda la página. Es una característica muy jodida. No sé si es por el error. Esta característica es en realidad ver el código fuente de la página web. Porque el código fuente generado no es solo información DOM, sino también información CSS e script.

Estado original del archivo de origen】】

La función extremadamente jodida es en realidad ver el código fuente de la página web. Todos deberían preferir usar el botón derecho del mouse para hacer clic directamente en la página web.

El menú [Esquema] es obviamente un comando para describir elementos que cumplen con las condiciones y los muestran.

【Célula de mesa】

Es para enmarcar cada celda de la tabla de formulario con alambre de naranja . Que te conozcan, oh. Resulta que esta es la celda de la mesa.

【superficie】

Es para enmarcar el formulario en la estructura de alambre de naranja . Que te conozcan, oh. Resulta que este es el formulario de forma.

【Div Elementos】

Es para usar marcos verdes para todos los elementos DIV en la página. Que te conozcan, oh. Resulta que estos son elementos div.

Este artículo ha explicado brevemente los diversos menús de las herramientas de desarrolladores. Creo que todos pueden usar fácilmente esta poderosa herramienta.

【imagen】

Es para enmarcar todos los elementos IMG en la página en Púrpura de estructura alámbrica . Que te conozcan, oh. Resulta que todos estos son elementos IMG.

【Cualquier elemento】

Este es más poderoso. Puede personalizar cualquier etiqueta y de qué color quieran usar para alambre. Haga clic en este menú y aparecerá el cuadro de diálogo a continuación. Muy simple. No más explicaciones.

【Elementos de posicionamiento】 Pariente

Se enmarcará en verde , todos los elementos con posición: estilo relativo.

【Elemento de posicionamiento】 Absoluto

Se enmarcará con una estructura alámbrica negra , todos los elementos con posición: estilo absoluto.

【Elemento de posicionamiento】 fijo

Se enmarcará en azul , todos los elementos con posición: estilo estático.

【Elemento de posicionamiento】 Flotación

Se enmarcará con márgenes amarillos , todos los elementos con estilo flotante.

【Esquema claro】

Cuando su página se ha hecho con varios colores de líneas como las tablas de Excel, puede usar este comando para borrar todas las líneas.

Este artículo ha explicado brevemente los diversos menús de las herramientas de desarrolladores. Creo que todos pueden usar fácilmente esta poderosa herramienta.

Obviamente, este comando controla varias imágenes en la página.

【Desactivar imágenes】

Para no insultar su coeficiente intelectual, no diré esto. Lo único que se debe explicar es que no solo el elemento IMG, sino también la imagen de fondo del elemento se deshabilitará.

【Mostrar tamaño de imagen】

Muy buena característica. Puede conocer rápidamente el tamaño de cada imagen sin verificar los atributos de la imagen. Por supuesto, la unidad es píxeles.

【Mostrar el tamaño del archivo de imagen】

Muy buena característica. Puede conocer rápidamente el tamaño del archivo de cada imagen sin verificar las propiedades de la imagen. Por supuesto, la unidad es bytes.

【Mostrar ruta de imagen】

Muy buena característica. Puede conocer rápidamente la ruta de URL de cada imagen sin verificar los atributos de la imagen, y también puede copiarla.

【Mostrar texto alternativo】

Se puede mostrar el texto del atributo ALT del elemento IMG. Por cierto: no acumule palabras clave para imágenes, de lo contrario se considerará fácilmente como optimización de transición de SEO.

【Ver informe de imagen】

Genere un informe de imagen detallado para modificar la página. Contiene información muy detallada para cada imagen.

Este artículo ha explicado brevemente los diversos menús de las herramientas de desarrolladores. Creo que todos pueden usar fácilmente esta poderosa herramienta.

Administre grupos de menú de cachés y cookies. Esta será una característica muy agradable para los desarrolladores.

【Siempre actualice el servidor】

Parece un comando muy profundo. En otras palabras, está prohibido usar el caché del navegador.

【Cache de navegador claro】

Tecla de acceso directo CTRL R. No hay nada que decir, solo simplifica los pasos de operación anteriores.

No sé si notaste que hay tres puntos detrás de [caché del navegador transparente] en el menú. Esto significa que el cuadro de diálogo se confirmará después de hacer clic en este menú.

【Borrar el caché del navegador para este dominio】

CTRL CTRL D. CTRL D. No hay nada que decir, solo borre el caché del navegador en este dominio.

【Deshabilitar cookies】

No hay ningún beneficio que decir. No se permiten galletas.

【Clear Cookies de sesión】

Limpie todas las galletas en su navegador. Su foro y comunidad están esperando iniciar sesión nuevamente.

【Borrar las galletas de dominio】

Solo cookies limpias en este dominio.

【Ver información de cookies】

Vea la información de cookie contenida en esta página. Ni siquiera lo pienses, no obtendrás la contraseña.

Algunos dispositivos útiles se incluyen con las herramientas del desarrollador, aunque son un poco más débiles que otras herramientas relacionadas especializadas. Pero la respuesta de emergencia sigue siendo suficiente.

【Cambiar el tamaño】

Gadget muy útil. Puede ajustar rápidamente la ventana del navegador al tamaño relevante. De esta manera, será mucho más conveniente probar la compatibilidad de la resolución web.

【Mostrar regla】

Una herramienta de regla simple. Úselo para medir la longitud, la distancia y otra información. El color de la línea se puede cambiar. También se pueden crear múltiples títulos. Si es demasiado delgado, puede usar la función de lupa .

【Mostrar el selector de color】

Una herramienta simple de selección de color. Haga clic en el mouse para seleccionar el color. Sin embargo, le recomiendo otra herramienta: mi caja de herramientas de trabajo, ColorPic, que es demasiado simple en las herramientas de desarrollador.

Este artículo ha explicado brevemente los diversos menús de las herramientas de desarrolladores. Creo que todos pueden usar fácilmente esta poderosa herramienta.

Definitivamente causará tormentas sangrientas en el mundo (gracias Xiaoqi por recordarme este idioma que de repente olvidé, por desgracia ~ tal vez porque he leído menos novelas de artes marciales más recientes. Pero parece que estoy familiarizado con modismos como Panting y Lianlian recientemente). En el futuro cercano, innumerables Kong Yiji seguramente se producirá.

【Html】

Verifique el código HTML de la página. Esta página se enviará a la herramienta de verificación HTML de W3C y se obtendrá un informe de verificación.

【CSS】

Verifique el código CSS de la página. Esta página se enviará a la herramienta de verificación CSS de W3C y se obtendrá un informe de verificación.

【fuente】

Verifique el código de archivo fuente de la página. Esta página se enviará a la herramienta de verificación FeedValidator.org y se obtendrá un informe de verificación.

【Enlace】

Verifique el enlace a la página. Esta página se enviará a la herramienta de verificación de W3C y se obtendrá un informe de verificación.

【HTML local】

Abra la herramienta de verificación HTML de W3C para verificar la página local.

【CSS local】

Abra la herramienta de verificación CSS de W3C para verificar la página local.

【Funciones accesivas】 Lista de WCAG

Verifique el WCAG de la página (accesibilidad de contenido web Accesibilidad a la página de la página). Esta página se enviará a la herramienta de verificación ContentQuality.com y se obtendrá un informe de verificación.

Lista de [Funciones accesivas]

Verificar los estándares de la página 508. Esta página se enviará a la herramienta de verificación ContentQuality.com y se obtendrá un informe de verificación.

【Verificaciones múltiples】

Verifique la página al mismo tiempo para verificar múltiples especificaciones.

Con respecto a la verificación de la página, me gustaría decir algunas palabras: de hecho, ¿la página necesita aprobar la verificación antes de que pueda lanzarse? Personalmente siento que es completamente innecesario. Si eres un estudiante, acuéstate dentro de la Torre de Marfil. Puede tirar su página en cualquier momento, porque es el cliente y solo tiene tiempo. Sin embargo, no es necesario desperdiciar valiosos recursos de proyectos para un pase para proyectos comerciales. Debido a que ningún cliente se preocupa por usted, la página que hice ha sido verificada por W3C en muchos aspectos. Si a un cliente realmente le importa, entonces solo puedo decir que admiro su capacidad de engañar.

Este artículo ha explicado brevemente los diversos menús de las herramientas de desarrolladores. Creo que todos pueden usar fácilmente esta poderosa herramienta.

Pero no hemos mencionado las funciones más poderosas en absoluto. Todos, esperamos nuestro próximo artículo. En el siguiente artículo, explicaremos en detalle el uso de la depuración de JavaScript, el modo del navegador, el modo de texto y otras funciones.