Puedes abrir DevTools al seccionar el men\u00fa hamburguesa de Chrome en la esquina superior derecha del explorador, luego seleccionando More Tools > Develope Tools. Alternativamente puedes usar Ctrl+Shift+I o Cmd+Opt+I en Mac. Una vez que est\u00e1 abierto el DevTools, puedes usar Ctrl+ para ir de panel a panel.<\/p>\n Uno de los usos m\u00e1s comunes para esta herramienta es examinar el HTML y el CSS de un elemento de una p\u00e1gina web que est\u00e9 abierta en Chrome, esto se lograr al hacer click en la tabla del elemento en la barra de navegaci\u00f3n del DevTools. Puedes mover el foco a un elemento diferente de la p\u00e1gina web haciendo clic derecho en un elemento de la p\u00e1gina y seleccionando inspeccionar elemento. Tambi\u00e9n puedes editar en vivo el CCS en el panel de estilo de la derecha. Es una excelente manera de ver c\u00f3mo quedar\u00eda alterada una p\u00e1gina web sin tener que ir hasta el editor de c\u00f3digo.<\/p>\n <\/p>\n Truco: Desactivar el cach\u00e9<\/strong><\/p>\n <\/p>\n <\/p>\n <\/p>\n Consola de JavaScript<\/strong><\/p>\n <\/p>\n Audits<\/strong><\/p>\n Por ejemplo, \u201cminifying\u201d tu CCS y archivos de JavaScript para reducir la cantidad de espacios en blanco y la combinaci\u00f3n de los archivos minimizados para reducir el n\u00famero de peticiones GET necesarios para cargarlos es una pr\u00e1ctica est\u00e1ndar en la producci\u00f3n de sitios web, y puede hacer una gran diferencia en el desempe\u00f1o del sitio.<\/p>\n <\/p>\n Conectividad<\/strong><\/p>\n <\/p>\n PageSpeed Insights<\/strong><\/p>\n <\/p>\n <\/p>\n <\/p>\n YSlow<\/strong><\/p>\n <\/p>\n Perfiles<\/strong><\/p>\n <\/p>\n <\/p>\n La tabla de recursos del DevTools es una manera f\u00e1cil y r\u00e1pida de mirar todos los scripts incluidos en una p\u00e1gina web. Normalmente se usa este panel para ver c\u00f3mo una p\u00e1gina funciona y qu\u00e9 est\u00e1 haciendo. La funci\u00f3n de $(document).ready de este ejemplo muestra claramente un dise\u00f1o responsive de la p\u00e1gina con ayuda de jQuery.<\/p>\n <\/p>\n <\/p>\n![\"002\"](\"https:\/\/blog.facilcloud.com\/noticias\/wp-content\/uploads\/2015\/07\/002.jpg\")
<\/a>La herramienta de desarrollo de Chrome, tambi\u00e9n conocido como DevTools es un set de herramientas \u00fatiles para desarrollo web y herramientas para debug dentro de Chome. Incluyen paneles para elementos, conectividad, fuentes, l\u00ednea de tiempo, perfiles, recursos, auditorias y consolas.<\/p>\n<\/a>Si est\u00e1s usando Chrome para mostrar y depurar una p\u00e1gina web mientras editas uno de los archivos de JavaScript o CCS, es probable que desees desactivar el cach\u00e9 de Chrome. Esta opci\u00f3n funciona \u00fanicamente mientras la herramienta DevTools est\u00e1 abierta. Para activar esta opci\u00f3n haz clic en la rueda de ajustes al lado derecho de la barra de navegaci\u00f3n del DevTools y selecciona la cajita de la opci\u00f3n \u201cDisable cache\u201d.<\/p>\n<\/a>La consola de JavaScript es el lugar para buscar mensajes de error de JavaScript, adicional a otros tipos de mensajes que te ayudar\u00e1n a resolver los problemas de tu c\u00f3digo. Tambi\u00e9n podr\u00e1s interactuar con el contexto actual desde esta consola; eso incluye evaluar expresiones e invocar al debugger. Esta herramienta se usa regularmente como una forma r\u00e1pida de invocar y probar un API que se est\u00e1 desarrollando.Puedes abrir esta consola desde la barra de navegaci\u00f3n del DevTools al hacer clic en la consola o directamente con Ctrl+Shift+J o Cmd+Iot+J en Mac.<\/p>\n<\/a>La tabla de auditor\u00edas del DevTools es una de la docena de maneras que tienes para ver sugerencias para mejorar el desempe\u00f1o de una p\u00e1gina web en Chrome. La larga lista de este ejemplo muestra un sitio comercial t\u00edpico.<\/p>\n<\/a>La tabla de conectividad del DevTools te muestra una l\u00ednea de tiempo y una lista de los requerimientos HTTP y respuestas actuales de la p\u00e1gina. La p\u00e1gina contin\u00faa actualiz\u00e1ndose mientras la miras. Ver\u00e1s menos requerimientos si habilitas el cach\u00e9. Puedes filtrar f\u00e1cilmente lo que est\u00e1s viendo para ayudarte a profundizar en los temas espec\u00edficos que est\u00e1n llevando mucho tiempo. Simplemente escribe una cadena en la caja del filtro para filtrar las fuentes por nombres o haciendo clic en la etiqueta del tipo de fuente a la derecha del filtro. Eso permite conocer qu\u00e9 est\u00e1 sucediendo en el script o en el requerimiento de cada p\u00e1gina, el desarrollador de la p\u00e1gina normalmente conocer\u00e1 eso, sin embargo a veces se podr\u00e1 descubrir por las fuentes de la tabla de recursos.<\/p>\n<\/a>El PageSpped Insights de Google sol\u00eda ser un product separado, sin embargo hace poco comenz\u00f3 a formar parte de DevTools. De alguna manera esta herramienta se considera redundante con otras como lo es Audit, pero existen programadores que prefieren utilizar esta herramienta, ya que al hacer clic en las reglas de los nombres se despliega informaci\u00f3n adicional y se pueden implementar cambios sugeridos.<\/p>\n<\/a>Si se habla de desempe\u00f1o, YSlow es una extensi\u00f3n de Chrome bastante \u00fatil para entender por qu\u00e9 una p\u00e1gina en particular puede estar funcionando lento. YSlow realiza un an\u00e1lisis a la p\u00e1gina basado en 23 reglas de pruebas de las 34 en total desarrolladas por el equipo de Exceptional Performance de Yahoo. YSlow es, desde 2012 de c\u00f3digo abierto; es similar a PageSpeed Insights, sin embargo, muchos programadores utilizan las dos herramientas. Cada prueba recibe una calificaci\u00f3n de la A a la F, se recomienda comenzar a revisar aquellas donde la calificaci\u00f3n result\u00f3 ser F. Al hacer click en el resultado del test se ver\u00e1n una serie de recomendaci\u00f3n de YSlow para remediar el problema.<\/p>\n<\/a>En la tabla perfiles del DevTools podr\u00e1s ver d\u00f3nde tu p\u00e1gina est\u00e1 invirtiendo m\u00e1s tiempo. En una p\u00e1gina con mucha publicidad este an\u00e1lisis puede resultar bastante deprimente. Algunos programadores ignoran el tiempo de inactividad y normalmente trabajan de los tiempos m\u00e1s bajos hasta que encuentran un punto que consideran de rendimiento decente y ven qu\u00e9 m\u00e1s pueden mejorar. Normalmente al aceptar sugerencias de PageSpeed y\/o de YSlow se ver\u00e1 reflejado en la mejora del desempe\u00f1o en la tabla de perfiles.<\/p>\n<\/a>Recursos<\/strong><\/p>\n