Uso de herramientas de desarrolladores de Chrome para el desarrollo de WordPress

Una de las preguntas más comunes que veo en los foros y cuando hablo con personas en una es “¿Dónde sabes?” ¿Cómo sabes qué reglas de estilo tiene un elemento en particular? ¿Cómo sabes exactamente qué clases se aplica a él? ¿Cómo puedes decir que el script no cobra correctamente? ¿Hay errores de JavaScript? ¿Cómo sabes cuál es la devolución de una llamada Ajax? Y así. ¡Mi respuesta son las herramientas de desarrollador de Chrome! Todos los navegadores grandes tienen herramientas de desarrollo integradas que pueden brindarle mucha información sobre un sitio web. En este artículo, echamos un vistazo a las herramientas de los desarrolladores de Chrome, pero la idea general se puede aplicar a todos los grandes navegadores.
Si tiene un Chrome abierto, vaya a ver> Desarrollador> Herramientas de desarrollador o presione Order + Shift + C en Mac o Control + Shift + C en Windows para mostrar herramientas de desarrollador. ¡Vamos a agrietar! Inspeccionar la base de elementos de cualquier información HTML/CSS es el elemento de elementos de sección y el elemento inspector. Cuando comienza el instrumento, esta es la visualización inicial (a continuación). Debería ver la estructura HTML de la página a la izquierda y las reglas CSS a la derecha. Por defecto, el inspector se activará. Se puede activar/deshabilitar utilizando el icono de lobo superior izquierdo de la barra de herramientas superior.
El inspector le permite colocar el cursor sobre un elemento en la página y hacer clic para seleccionarlo. La visualización HTML a la izquierda del inspector saltará a ese elemento, las reglas CSS mostrarán todas las reglas para ello.

Inspeccionar un título en este artículo. Haga clic para obtener una vista mayor, puede hacer clic en el lado izquierdo del inspector para ver ciertos elementos o usar las teclas de flecha para moverse. Un truco que me gusta es que puedes copiar/editar/eliminar los nudos. Haga clic derecho en cualquier elemento para copiarlo o editarlo. Puede eliminar el elemento seleccionado actualmente presionando la eliminación. Utilizo el método de eliminación para averiguar qué causa errores y también cómo se muestran las páginas si no se muestra un elemento en particular. Trabajando con CSS Hay tres formas en que puede usar herramientas de desarrollador para su ventaja:
Obtenga una visión general de los estilos de un artículo
Vea todas las reglas: ¿qué recibe qué y qué selectores se usan?
Agregar estilos rápidos en línea
Presentación general del estilo del elemento Al ver un elemento, eche un vistazo al lado derecho de la ventana de la herramienta. Para obtener una presentación general de los estilos de elementos, muévase a la pestaña calculada desde la parte superior.
La imagen de la izquierda muestra un ejemplo de lo que verá. Haga clic para extenderlo en la vista completa. La sección superior le muestra visualmente el modelo de la caja, y debajo puede ver todas las propiedades. Sus propiedades y valores son el resultado de la cascada completa, lo que significa que muestra el resultado final de todas sus reglas. Al hacer clic en las flechas negras al lado de cada propiedad, puede ver todas las reglas que contribuyeron a ella. Esta es una visualización útil si desea encontrar el valor final de una propiedad en particular o si desea tener una buena idea sobre el tamaño de un artículo. Sin embargo, he descubierto que si tiene que continuar referiéndose a esta vista en lugar de los principales estilos de visualización, puede indicar que sus reglas de estilo son demasiado complejas. Esta no es una regla difícil, pero es algo que he notado en varios proyectos. Verá y agregue las reglas que la visualización predeterminada es la pestaña Estilos, que muestra todas las reglas aplicadas a este elemento. En el caso del título de segundo nivel que se muestra anteriormente, verá que hay un peso general de la fuente asociada con todos los títulos, que es 400. También hay una regla aplicada a todo el segundo nivel que les hace tener una dimensión de 3.125 em. El selector H2 de estilo. Altícula se usa para agregar estilos a este elemento específico, haciendo que el peso sea 500 y el tamaño de la fuente de 34 px/40px.

Estilos de elementos Esta visualización es extremadamente útil porque le permite juzgar cuán complejas son sus reglas y, aún mejor, le permite cambiar y agregar cosas en el acto.
Puede hacer clic en cualquier propiedad o valor para cambiarla e incluso para crear nuevas reglas en cada selector. Usando el selector de elementos vacío. Estilo en la parte superior, incluso puede agregar estilos en línea que anulen todo. Utilizo mucho esta visualización para darme cuenta de tres cosas: por qué mis reglas de estilo no funcionan, qué selectores tengo que usar para apuntar a un elemento y qué elementos se verían como CSS. Cerca de la sección del elemento. Al estilo a la derecha hay dos íconos. El icono más le permite agregar una nueva regla de estilo con todo, selector y todo. El otro icono abre una nueva sección que le permite verificar los estados activos, enfocados, desplazados y visitados. Al marcarlos, puede ver los estados y escribir reglas específicas para ellos. JavaScript funciona para desarrolladores ofrece características extremadamente potentes para JavaScript y es poco similar a una idea a este respecto. La razón por la cual JavaScript es fácil de crear características es que es en gran medida la parte del cliente, por lo que Chrome tiene acceso a todo lo que necesita. La consola de la consola es el punto de partida para la mayoría de las necesidades de solución de problemas de JavaScript. Puede brindarle todo tipo de información, no solo sobre JavaScript.

Herramientas de consola para desarrolladores de Chrome en la captura de pantalla anterior podemos ver algunos buenos consejos (en azul) y dos problemas en rojo. El mensaje se muestra junto al archivo de origen, lo que facilita la búsqueda de dónde está el problema.
Si confiesa y minimiza a JavaScript, no olvide generar un mapa de origen, para que pueda ver dónde están los problemas en realidad, en lugar de solo una línea indescriptiva en un código enorme. Como alternativa, puede esperar la minimización del script hasta que empuje el producto a la producción. Si hace clic en la flecha a la izquierda de los mensajes, obtendrá más información sobre el problema. Al hacer clic en la flecha para el error 404, vemos que el problema está realmente en Global.js, pero llega a jQuey.js. Al hacer clic en el archivo, lo llevará a ese archivo, ¡maravilloso! Script Solución de problemas A veces, nuestros scripts no funcionan y no está claro por qué. La resolución de problemas de las Escrituras nos permite descubrir los problemas y resolverlos fácilmente. La forma habitual es usar puntos de interrupción. El concepto es bastante simple, pero los instrumentos nos dan tantas funciones que es poco difícil encontrar su camino. Los puntos de interrupción son esencialmente señales de parada que cesarán la ejecución del código. Usando varias comprobaciones, puede inspeccionar lo que sucede en el punto de interrupción (qué valores variables se usan, etc.) y puede continuar la ejecución cuando esté listo. Su primera parada debe ser el panel de fuentes donde puede abrir un archivo usando el comando + P (control + P para usuarios de Windows). Esto abre el script en el lado izquierdo, las herramientas a la derecha se pueden usar para controlar el flujo.
Puede establecer los puntos de interrupción haciendo clic en los números de las líneas a la izquierda. Aparecerán en la sección de interrupción a la derecha. Luego puede ejecutar el script nuevamente, lo que se detendrá en los puntos especificados.

Puntos de interrupción En nuestro JavaScript, puede agregar puntos de interrupción condicionados y puede usar esta sección para todo tipo de otra magia de solución de problemas. Le sugiero que lea la documentación de Google Chrome sobre la solución de problemas de JavaScript, ¡es extremadamente útil! La sección de red, la sección de red, ofrece muchos datos sobre solicitudes y activos cargados. Muestra cosas como el estado de las solicitudes, su tipo, tamaño, tiempos de carga, cronología de carga, etc. Hay muchos que puedes aprender aquí. Lo uso para lo siguiente: Solución de problemas de aplicaciones incorrectas
Encontrar bloqueos de tiempo de carga
Verifique los datos de la solicitud de AJAX

La sección de red con herramientas de desarrolladores cada artículo cada artículo muestra el método, el estado y el tipo de solicitud. Es inusual ser necesario para corregir un método y un tipo, pero la condición es muy importante. Por supuesto, debe prestar atención a los 404 errores que se marcarán con rojo. Al hacer clic en el encabezado de estado, puede pedir la lista por estado. Si hace clic nuevamente, los errores 404 deben estar cerca de arriba, porque se clasificarán. También debe prestar atención a las redirecciones y cualquiera de las ordinarias. Bloques de tiempo de carga

Todo el lado derecho de esta vista muestra diagramas de barras horizontales de los tiempos de carga. Puede ser necesario verlo en la pantalla completa para obtener una vista correcta. Si ve bares que son más largos de lo habitual, eche un vistazo más de cerca, ¡tal vez sucede algo! Puede pasar con el mouse sobre un bar para obtener mucha información, como tiempo de espera, búsqueda de DNS, tiempo de referencia, etc. Usando esta información, puede eliminar los servicios lentos o incluso un código lento de su propio sitio web. Verificación de solicitudes de AJAX Esta es mi parte favorita de las herramientas de desarrolladores, que funciona con AJAX mucho más fácil. Las solicitudes AJAX se muestran en la pestaña de red, puede hacer clic en el filtro XHR para mostrar solo aplicaciones AJAX. Se mostrarán continuamente. Si sube una página y hace algo a través de AJAX, la solicitud se agregará en vivo. Puede hacer clic en la solicitud para ver los encabezados, la vista previa, la respuesta, las cookies y la sincronización. Paso la mayor parte de mi tiempo en la sección y la sección de encabezado. Veamos un ejemplo. Sube el sitio web de Dustin Curtis, una lectura bastante buena y eche un vistazo a las solicitudes de XHR. Deberías ver algo como:
Felicitaciones XHR Solicitudes es algo que puede ofrecer a los artículos en la red SVBTLE. Está claro que esta solicitud atrae los saludos ofrecidos a las publicaciones cargadas en esta página. Si carga el primer elemento, debería ver que realmente tiene el número de Kudos que se muestra en la respuesta. Ahora mantenga la ventana del desarrollador abierta y coloque el cursor sobre las instalaciones de Kudos. Una vez que haya recibido un Kudos, debería ver una nueva solicitud AJAX. Esta solicitud solo devuelve verdadera, probablemente indica al JavaScript que Kudos fue recibido con éxito. Ahora, dirige tu atención a la sección del encabezado. Puede ver allí la sección del formulario de datos, que muestra los datos que se enviaron junto con la solicitud. Esta información, junto con la respuesta, le brinda todos los datos que necesita para solucionar sus llamadas AJAX sin recurrir a Echo, Alertas, registro de consolas y todas esas cosas feas. Prueba de reacción ¿Qué conjunto de herramientas de desarrolladores estarían completos sin probar su capacidad de respuesta? Chrome tiene una de las mejores interfaces para manejar esto. Echar un vistazo:
WPMU en los comandos activados y iPhone 5 anteriores hacen que toda la magia suceda. Puede seleccionar un dispositivo popular particular, como un iPhone 5 o Google Nexus S, o establecer dimensiones personalizadas. Lo fuerte es que Chrome falsifica al agente de usuario para usted, por lo que en lugar de hacer la misma página más delgada, hace que el sitio web crea que en realidad está cargado por el dispositivo especificado. Tenga en cuenta que debe refrescarse para hacer falsificación. También puede optar por reducir automáticamente la conexión de red. Esto ayuda a probar en condiciones donde las redes no son excelentes, puedes ver lo molesto que es usar su sitio en una conexión GPRS de 50 kb/s. El icono del paso izquierdo abrirá un menú que muestra las consultas de medios especificadas, por lo que puede cambiar entre ellas. ¡Creo que esto es bastante bueno! Auditorías de la página Esta es una característica que hemos llegado muy tarde, simplemente porque está oculta a la vista. No muestra nada y la opción de ejecutar una auditoría del sitio no es muy visible, especialmente en pantallas grandes. Eche un vistazo a la parte inferior y ejecute una auditoría del sitio web del sitio web. ¡Es como tener tu propio asistente personal! Desde la velocidad hasta las reglas de CSS no utilizadas, analice mucho y le da mucho que hacer.
La auditoría de las herramientas de página para desarrolladores utiliza esta herramienta cada vez que creo cualquier producto nuevo, ya sea un sitio web completo o simplemente un complemento. Me hace saber cuándo soy descuidado o olvidé algo. Conclusión Herramientas para desarrolladores de Chrome es simplemente excelente y ofrece mucha información para mejorar su sitio. Esta es también una de las desventajas: a primera vista, se pierde de inmediato. Conocer esta herramienta es una gran ventaja para el desarrollo y definitivamente vale la pena dar tiempo para aprender. Además de las características que he alcanzado, hay muchas otras, eche un vistazo a su alrededor. Si cree que necesita más, visite la Galería de Extensiones donde puede encontrar extensiones de Chrome, que agregan más. Si usa un navegador diferente, como Safari o Firefox, tienen sus propias herramientas de desarrollo. En su mayor parte, ofrecen las mismas características a través de una interfaz de usuario diferente. Personalmente prefiero Chrome o Firefox debido a la cantidad de extensiones ofrecidas. ¿Usas herramientas de desarrollador de Chrome? Háganos saber en los comentarios a continuación. Etiquetas: navegadores

código

desarrolladores