HERRAMIENTAS PARA DESARROLLADORES DE GOOGLE CHROME
Información
general
Los desarrolladores de Chrome Herramientas (DevTools
para abreviar), son un conjunto de sitio
web y herramientas de depuración
integradas en Google Chrome, proporcionan a los desarrolladores web
profunda acceso a
los componentes internos del navegador y su
aplicación web se pueden utilizar los DevTools para
rastrear de manera eficiente por
problemas de diseño, establecer puntos
de interrupción de JavaScript, y
obtener ideas para la
optimización de código.
Chrome
Developer Tools permite profundizar en las entrañas de una página web y revisar
casi todo, desde su estructura hasta los recursos utilizados. En general se
puede:
- Obtener una visión general de los estilos utilizados en una página y que estilo se aplica a cada elemento.
- Visualizar
y modificar el código correspondiente a los elementos HTML
- Modificar
un estilo y ver los cambios en el navegador en tiempo real
- Ejecutar
código JavaScript en el contexto de la página
- Ver
las peticiones HTTP realizadas por el navegador
- Identificar
cuellos de botella que afecten al rendimiento
- Consultar
métricas de rendimiento
- Investigar los recursos offline para averiguar qué datos de la página se almacenan localmente
Cómo
acceder a los DevTools
Para acceder a los DevTools, abrir
una página web o aplicación
web en Google Chrome. O bien:
·
Seleccione el menú de Chrome en la parte
superior derecha de la ventana del navegador,
·
seleccione Herramientas>
Herramientas de desarrollo, o
·
Haga clic en
cualquier elemento de la página y
selecciona Inspeccionar Elemento.
La ventana DevTools se abrirá en la parte inferior de su navegador Chrome.
Hay varios accesos directos útiles para la apertura de las DevTools:
Hay varios accesos directos útiles para la apertura de las DevTools:
·
Utilice Ctrl
+ Shift + I (o Cmd + Opt + I en Mac) para abrir el DevTools.
·
Utilice Ctrl
+ Shift + J
(o Cmd + Opt + J en Mac) para abrir los DevTools y llevar el foco a la consola.
·
Utilice Ctrl
+ Shift + C
(o Cmd + Shift
+ C en Mac)
para abrir los DevTools en Inspeccionar Elemento modo,
o alternar Inspeccionar
Elemento modo si
los DevTools ya
están abiertas.
Para el flujo de trabajo del día a día, el aprendizaje de los métodos abreviados le ahorrará tiempo.
La ventana
DevTools
Los DevTools se organizan en grupos orientados a tareas en la barra de herramientas en la parte superior de la ventana. Cada elemento de la barra de herramientas y el panel correspondiente permiten trabajar con un tipo específico de página o información de la aplicación, incluyendo los elementos DOM, recursos y fuentes.
En total, hay ocho grandes grupos de
herramientas disponibles Herramientas vista Desarrollador:
- · Elementos,
- Recursos,
- Redes,
- Fuentes,
- Línea de tiempo,
- Perfiles,
- Almacenamiento,
- Auditorías,
- La consola.
Puede utilizar las teclas Ctrl + [y Ctrl +]
atajos para moverse entre los paneles.
Controles de la interfaz
Los
diferentes controles de la interfaz de Chrome Developer Tools son:- Los
diferentes paneles de herramientas.
- Anclar/Desanclar
las herramientas de desarrollo de la ventana del navegador.
- Muestra/oculta
la consola.
- Inspeccionar
un elemento. Haz click en la herramienta inspeccionar y selecciona un
elemento de la página para ver sus propiedades.
- Errores
de JavaScript que hay en la página.
- Abre
la pantalla de configuración de las herramientas de desarrollo.
- Botón
para cerrar las herramientas de desarrollo.
Desacoplar
la ventana de las Herramientas de Desarrollo puede ser útil y muy cómodo si
tienes dos monitores por ejemplo.
Panel elementos
- Código
fuente de la página
- Un
elemento, si tiene una flecha significa que tiene elementos hijos. Si la
flecha está hacia abajo significa que los elementos están contraídos
- Miga
de pan (o como se conoce en inglés "Breadcrumb"). Se índica
desde el elemento inicial <html> hasta el elemento seleccionado. Si
pasas el cursor por encima de la miga de pan, destacará el elemento
correspondiente en la ventana del navegador.
- Paneles
plegables que muestran el estilo u otras características aplicadas al
elemento.
- Panel
"Computed Style": muestra información de los estilos del
elemento seleccionado.
- "Show
inherited": muestra los estilos heredados, así como los estilos por
defecto del navegador que se aplican al elemento seleccionado.
- Muestra
los estilos incrustados directamente sobre un elemento del html, estilos
añadido a través de JavaScript y estilos añadido a través de las
herramientas de desarrollo.
- Botón
"Añadir nueva regla de estilo": permite crear crea una regla de
estilo nuevo para el elemento seleccionado.
- Botón
para desplegar/plegar los estilos que se aplican sobre el elemento en los
estados: hover, activo, foco y visitado.
- Te
permite escoger el formato preferido para los valores de color. El valor
por defecto es "como autor" en el que el color se muestra tal
cual está indicado en el estilo. Puedes cambiarlo a hexadecimal, RGB y
HSL.
- En
el panel "Metrics" puedes ver los valores de margin, padding y
border aplicado al elemento, así como su ancho y alto.
Inspección
de la DOM y estilos
El panel Elementos le permite ver todo en un árbol DOM,
y permite la inspección y la edición on-the-fly de elementos DOM. A
menudo visita las pestañas Elementos cuando
se necesita para identificar el
fragmento de código HTML para
algún aspecto de la página. Por ejemplo, puede ser curioso si una imagen tiene un
atributo id HTML, y lo que
el valor del atributo es.
Modificar el DOM
Cambiar el tipo de un elemento es posible haciendo doble clic en el nombre del elemento en sí. Por ejemplo: si cambiamos un elemento spam a un div cambiará tanto la etiqueta de apertura como la de cierre.
Añadir atributos
Editar atributos
La edición de
atributos es similar a la adición. Busca el atributo que quieres modificar y
haz doble clic en el nombre del atributo o su valor.
Editar el código html
Para editar el HTML directamente desde
la herramienta de desarrollo tienes que hacer click derecho sobre el elemento y
escoger Edit as HTML
Trabajar con la consola
La consola de JavaScript proporciona
dos funciones principales para
las páginas web de pruebas de desarrolladores y aplicaciones:
·
Un lugar para
registrar información de diagnóstico utilizando los métodos proporcionados
por la API de consola,
como console.log (), o console.profile ().
·
Un intérprete
de comandos donde puede introducir comandos e interactuar con
el documento y el Chrome DevTools.
Usted puede evaluar expresiones directamente en la consola, y también puede
utilizar los métodos proporcionados por la API de línea de comandos, como el comando $ () para los elementos de la selección, o el perfil () para iniciar el generador de perfiles de la CPU.
Depuración JavaScript
La mejora de rendimiento de la
red
Auditorías
El
panel de
Auditoría puede analizar una
página que se carga y proporcionar sugerencias y optimizaciones para reducir tiempo de carga y el aumento
percibido (y real) de respuesta. Para más
información, se recomienda instalar también la extensión PageSpeed.
Mejorar el rendimiento de
representación
El panel Línea de tiempo le da una visión completa de donde el tiempo se gasta en la carga y el uso de su aplicación web o página. Todos los eventos, de los
recursos de carga a analizar JavaScript calcular
estilos y repintado
se representan en una línea de tiempo.
JavaScript y CSS rendimiento
El panel de perfiles
le permite perfilar el tiempo de ejecución y el uso de memoria de una
aplicación web o una página. El
panel de perfiles incluye unos perfiladores:
un perfil del CPU,
un perfil del Javascript
y de perfil del Montón. Estos ayudan a entender dónde se gastan los recursos,
y por lo que ayudará a optimizar el código:
·
El perfilador CPU muestra donde el
tiempo de ejecución se gasta
en funciones JavaScript de su página.
·
El perfilador Montón muestra la distribución de la memoria por objetos
JavaScript de su página y los
nodos DOM relacionados.
·
El perfil de JavaScript
muestra que el tiempo de ejecución se gasta en
los scripts
Almacenamiento de Inspección
Localizar elementos
Si
se selecciona un elemento se verá una capa con información sobre el elemento
correspondiente de la página web.Si sobre un elemento se hace click derecho y se selecciona "Scroll into view" se desplazará el cursor hasta la parte de la página donde está localizado ese elemento.
Las herramientas de desarrollo también disponen de una función de búsqueda interna, por lo que si dentro de la ventana de las Dev Tools pulsa Ctrl+F se abrirá un cuadro de búsqueda, para localizar el elemento que estás buscando.
Visualización de la
información del estilo
Al
situarte encima de un elemento aparecen unos cuadros de colores sobre dicho
elemento en la página web. Estos colores representan: el margin (en color
anaranjado), el padding (en verde), el borde (en beige) y el propio elemento
(color azul). Esto nos da una información rápida sin necesidad de ver el panel
de estilos.Esta misma información se puede obtener desde el panel Metrics
Añadir y modificar estilos
Para
añadir y/o modificar estilos directamente a una clase o id se debe dirigir al
panel Styles
ubicado a la derecha, en Matched
CSS Rules se verán los estilos pertenecientes a la clase o id
que afectan a ese elemento, si se hace click sobre una de sus propiedades se
puede modificar. Para añadir un nuevo
estilo, se hace un click dentro de las llaves de la clase/id de ese elemento.
Verás que al empezar a escribir la propiedad aparecerá una ventana de
sugerencias, pulsando tabulador o enter para autocompletar la propiedad y
posteriormente se indica el nuevo valor.Cosas a tener en cuenta:
- Si
se escribe incorrectamente una
propiedad aparecerá un icono de warning a la izquierda de la propiedad.
- Si
se hace click sobre un pequeño cuadrado de color aparecerá una ventana
flotante, para poder escoger el color desde una paleta de color.
- Si se pulsa shift+click sobre un pequeño
cuadro de color, cambiarás el formato de color.
Panel de Recursos
El
panel Recursos muestra los recursos utiliza una página.- El
panel de la izquierda muestra los distintos tipos de recursos que puedes
inspeccionar. Desde información de almacenamiento
de sesión hasta información de cookies. Haciendo
click en la flecha se desplegará un submenú con más opciones.
- Muestra
los detalles sobre el recurso seleccionado en el panel de la izquierda.
- En
el menú frames obtendremos información de lso recursos utilizados,
incluyendo imágenes, hojas de estilo, fuentes, archivos JavaScript...
- Si
la página web utiliza bases de datos SQL la información se mostrará aquí.
- Si
la página web utiliza base de datos IndexedDB mostrará su información
aquí.
- Se
muestran los pares clave/valor almacenados en localStorage.
- Se
muestran los pares clave/valor almacenados en sessionStorage.
- Muestra
las cookie creadas por el dominio.
- Muestra
los activos almacenados en caché.
La
opción Frame nos muestra información detallada de los siguientes elementos de
la página:
Extensiones Google Chrome para
desarrolladores Web
Además
de ser uno de los buscadores más rápidos y, por ello, uno de los más utilizados
por los internautas en la actualidad, Google Chrome ofrece variadas extensiones
que pueden resultar muy provechosas.
A continuación otorgamos una lista con 14 extensiones que consideramos de utilidad para desarrolladores webs, las cuales pueden aprovechar para facilitar sus tareas.
Alexa Traffic Rank
Extensión oficial de Alexa que provee información del ranking de tráfico Alexa e información del sitio visitado.
Chrome SEO
Extensión SEO que permite realizar varias tareas básicas, las cuales ayudan con el posicionamiento en buscadores. Presenta información estadística, rankings, análisis de keywords, etc.
Chrome Access
Acceso rápido a varias páginas de configuración e información de Chrome tales como memoria usada, extensiones instaladas, historial, cache, network y muchas otras.
Diigo Bookmark, Archive, Highlight & Sticky-Note
Anexa los servicios de Diigo al Chrome; con esta extensión podremos guardar anotaciones, archivar y agregar a marcadores las páginas web que visitemos.
Eye Dropper
De manera similar a la herramienta “gotero” de las aplicaciones de diseño, esta extensión permite seleccionar colores de cualquier parte de una página.
Hover Zoom
Posibilita ver las imágenes a tamaño completo simplemente pasando el mouse por arriba de las miniaturas (sin tener que hacer clic para ir a otra página) en sitios como Facebook, Twitter, Flickr, DeviantArt, etc.
Awesome Screenshot: Capture & Annotate
extensas) o parte de ella y guardas junto con dichas anotaciones.
MeasureIt!
Herramienta que permite tomar medidas de cualquier elemento de una página dibujando un recuadro.
SEO & Website Analysis
El informe SEO y Posicionamiento Web de WooRank ofrece un estudio de SEO / Posicionamiento muy completo. Se analizan más de 50 criterios SEO en la página web.
Speed Tracer
Extensión oficial de Google que nos ayudará a identificar y solucionar problemas de performance de nuestras aplicaciones web con varios instr
Nos permite capturar en una imagen una página web completa (incluso la parte que no está visible en páginas umentos de medición y análisis.
Ultimate Chrome Flag
Muestra información de un sitio relacionada con su localización (país, región, ciudad, ip) así como otra información útil de diferentes rankings, como por ejemplo pagerank, alexa, wot, etc.
Validity
Valida los documentos HTML con respecto a los estándares de la W3C.
Web Developer
Agrega un botón con varias herramientas útiles para el desarrollador web. Se trata de la versión oficial realizada por los mismos desarrolladores de la famosa extensión “Web Developer” de Firefox.
Window Resizer
Redimensiona la ventana de Chrome para emular los tamaños de varias resoluciones estándares.
- Imágenes
- Hojas
de estilo
- Fuentes
- Scripts
- Recursos
que no han podido ser cargados (verás un pequeño icono rojo a la derecha
del recurso no disponible). El número junto al icono indica la cantidad de
errores detectados
Extensiones Google Chrome para
desarrolladores Web
Además
de ser uno de los buscadores más rápidos y, por ello, uno de los más utilizados
por los internautas en la actualidad, Google Chrome ofrece variadas extensiones
que pueden resultar muy provechosas.A continuación otorgamos una lista con 14 extensiones que consideramos de utilidad para desarrolladores webs, las cuales pueden aprovechar para facilitar sus tareas.
Alexa Traffic Rank
Extensión oficial de Alexa que provee información del ranking de tráfico Alexa e información del sitio visitado.
Chrome SEO
Extensión SEO que permite realizar varias tareas básicas, las cuales ayudan con el posicionamiento en buscadores. Presenta información estadística, rankings, análisis de keywords, etc.
Chrome Access
Acceso rápido a varias páginas de configuración e información de Chrome tales como memoria usada, extensiones instaladas, historial, cache, network y muchas otras.
Diigo Bookmark, Archive, Highlight & Sticky-Note
Anexa los servicios de Diigo al Chrome; con esta extensión podremos guardar anotaciones, archivar y agregar a marcadores las páginas web que visitemos.
Eye Dropper
De manera similar a la herramienta “gotero” de las aplicaciones de diseño, esta extensión permite seleccionar colores de cualquier parte de una página.
Hover Zoom
Posibilita ver las imágenes a tamaño completo simplemente pasando el mouse por arriba de las miniaturas (sin tener que hacer clic para ir a otra página) en sitios como Facebook, Twitter, Flickr, DeviantArt, etc.
Awesome Screenshot: Capture & Annotate
extensas) o parte de ella y guardas junto con dichas anotaciones.
MeasureIt!
Herramienta que permite tomar medidas de cualquier elemento de una página dibujando un recuadro.
SEO & Website Analysis
El informe SEO y Posicionamiento Web de WooRank ofrece un estudio de SEO / Posicionamiento muy completo. Se analizan más de 50 criterios SEO en la página web.
Speed Tracer
Extensión oficial de Google que nos ayudará a identificar y solucionar problemas de performance de nuestras aplicaciones web con varios instr
Nos permite capturar en una imagen una página web completa (incluso la parte que no está visible en páginas umentos de medición y análisis.
Ultimate Chrome Flag
Muestra información de un sitio relacionada con su localización (país, región, ciudad, ip) así como otra información útil de diferentes rankings, como por ejemplo pagerank, alexa, wot, etc.
Validity
Valida los documentos HTML con respecto a los estándares de la W3C.
Web Developer
Agrega un botón con varias herramientas útiles para el desarrollador web. Se trata de la versión oficial realizada por los mismos desarrolladores de la famosa extensión “Web Developer” de Firefox.
Window Resizer
Redimensiona la ventana de Chrome para emular los tamaños de varias resoluciones estándares.
No hay comentarios:
Publicar un comentario