{"id":5650,"date":"2013-09-12T18:38:50","date_gmt":"2013-09-12T16:38:50","guid":{"rendered":"http:\/\/www.palentino.es\/blog\/?p=5650"},"modified":"2013-09-12T19:00:21","modified_gmt":"2013-09-12T17:00:21","slug":"los-secretos-de-las-herramientas-de-desarrollo-y-depuracion-web-master-en-herramientas-web","status":"publish","type":"post","link":"https:\/\/www.palentino.es\/blog\/los-secretos-de-las-herramientas-de-desarrollo-y-depuracion-web-master-en-herramientas-web\/","title":{"rendered":"Los Secretos de las herramientas de desarrollo y depuraci\u00f3n web."},"content":{"rendered":"<div id=\"palen-1907129103\" class=\"palen-antes-del-contenido palen-entity-placement\"><div class=\"palen-adlabel\">Anuncios<\/div><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-2815317153396146\" crossorigin=\"anonymous\"><\/script><ins class=\"adsbygoogle\" style=\"display:inline-block;width:300px;height:250px;\" \ndata-ad-client=\"ca-pub-2815317153396146\" \ndata-ad-slot=\"4593837716\"><\/ins> \n<script> \n(adsbygoogle = window.adsbygoogle || []).push({}); \n<\/script>\n<\/div><p style=\"text-align: justify;\">En esta entrada os voy a mostrar una serie de <strong>secretos muy interesantes para los desarrolladores<\/strong>, que nos permitir\u00e1n agilizar los trabajos web, as\u00ed como sacar provecho al m\u00e1ximo de las herramientas \u00a0que poseen los diferentes navegadores para depurar y revisar los c\u00f3digos (HTML, Javascript, CSS) de las p\u00e1ginas que visitas o creas.<\/p>\n<p style=\"text-align: justify;\">Antiguamente, la depuraci\u00f3n de componentes de las p\u00e1ginas era una tarea tediosa, al menos para mi. Muchas depuraciones en javascript se hac\u00edan con el comando Alert, mediante diferentes ventanas popup pod\u00edamos ver los valores que determinaban ciertos comportamientos de nuestras aplicaciones.<\/p>\n<p>Hoy en d\u00eda, por fortuna eso ha cambiado, y disponemos de verdaderos entornos de depuraci\u00f3n que agilizan el desarrollo web. Pero que no exprimimos, ni sacamos partido. Comencemos categorizando estos secretos. <!--more--><\/p>\n<p style=\"text-align: justify;\">La gran mayor\u00eda de los navegadores proporcionan herramientas de depuraci\u00f3n y acceso a los elementos web que han sido descargados.<\/p>\n<p style=\"text-align: justify;\">Las funcionalidades gen\u00e9ricas son: Consola, Elementos\/Inspector\/HTML, Estilos, Depurador, Profiler (analiza el rendimiento javascript), Herramientas de red (ver el tr\u00e1fico, carga, etc).<\/p>\n<p style=\"text-align: justify;\"><span style=\"color: #800000;\"><strong>LOS SECRETOS QUE NO TEN HAN CONTADO<\/strong><\/span><\/p>\n<p style=\"text-align: justify;\">Para acceder a estas herramientas incorporadas en los navegadores, en la mayor\u00eda de las ocasiones se realiza pulsando la tecla <strong>F12<\/strong>, o pulsando\u00a0\u00a0&#8220;Cmd&#8221; \u2318 &#8220;Option&#8221; \u2325 y &#8220;I&#8221; en el Mac. Tambi\u00e9n podemos usar los men\u00fas superiores o contextuales (inspeccionar elemento). En navegadores como Safari, tendremos que activar las herramientas de desarrollo, en preferencias avanzadas.<\/p>\n<p style=\"text-align: justify;\">En otras ocasiones, tambi\u00e9n podemos aumentar y complementar las caracter\u00edsticas de estos entornos, agregando complementos o plugins con bastante calidad. Entre ellos destaca\u00a0<a href=\"http:\/\/getfirebug.com\/\" target=\"_blank\">Firebug<\/a><\/p>\n<p style=\"text-align: justify;\">Estas herramientas de desarrollo, se encuentran mejorando constantemente.<\/p>\n<p style=\"text-align: justify;\">Pero lo que <strong>pocos saben es que existen versiones de navegadores espec\u00edficas para el desarrollo web<\/strong>.<\/p>\n<p style=\"text-align: justify;\">Podemos destacar la versi\u00f3n experimental de Canary de Chrome.<\/p>\n<p style=\"text-align: justify;\"><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"5657\" data-permalink=\"https:\/\/www.palentino.es\/blog\/los-secretos-de-las-herramientas-de-desarrollo-y-depuracion-web-master-en-herramientas-web\/chrome-canary\/\" data-orig-file=\"https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/09\/chrome-canary.jpg\" data-orig-size=\"310,144\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}\" data-image-title=\"chrome-canary\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/09\/chrome-canary.jpg\" class=\"aligncenter size-full wp-image-5657\" alt=\"chrome-canary\" src=\"http:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/09\/chrome-canary.jpg\" width=\"310\" height=\"144\" srcset=\"https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/09\/chrome-canary.jpg 310w, https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/09\/chrome-canary-300x139.jpg 300w\" sizes=\"auto, (max-width: 310px) 100vw, 310px\" \/><\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/www.google.com\/intl\/es\/chrome\/browser\/canary.html\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"5652\" data-permalink=\"https:\/\/www.palentino.es\/blog\/los-secretos-de-las-herramientas-de-desarrollo-y-depuracion-web-master-en-herramientas-web\/chrome-canary-lockup\/\" data-orig-file=\"https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/09\/chrome-canary-lockup.png\" data-orig-size=\"143,43\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}\" data-image-title=\"chrome-canary-lockup\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/09\/chrome-canary-lockup.png\" class=\"aligncenter size-full wp-image-5652\" alt=\"chrome-canary-lockup\" src=\"http:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/09\/chrome-canary-lockup.png\" width=\"143\" height=\"43\" \/><\/a>Visitar web de <a href=\"https:\/\/www.google.com\/intl\/es\/chrome\/browser\/canary.html\" target=\"_blank\">Canary<\/a><\/p>\n<p style=\"text-align: justify;\">Solo como an\u00e9cdota, os recuerdo que existe un chrome llamado <strong>Chromium\u00a0<\/strong>y que<strong>\u00a0<\/strong>es un proyecto de\u00a0navegador web\u00a0de\u00a0c\u00f3digo abierto, a partir del cual se basa el c\u00f3digo fuente de\u00a0Google Chrome. Entre otros detalles Chromium s\u00f3lo admite\u00a0<a title=\"Vorbis\" href=\"http:\/\/es.wikipedia.org\/wiki\/Vorbis\">Vorbis<\/a>,\u00a0<a title=\"Theora\" href=\"http:\/\/es.wikipedia.org\/wiki\/Theora\">Theora<\/a>\u00a0y\u00a0<a title=\"Codecs\" href=\"http:\/\/es.wikipedia.org\/wiki\/Codecs\">codecs<\/a>\u00a0<a title=\"WebM\" href=\"http:\/\/es.wikipedia.org\/wiki\/WebM\">WebM<\/a>\u00a0para las etiquetas de audio y video de\u00a0<a title=\"HTML5\" href=\"http:\/\/es.wikipedia.org\/wiki\/HTML5\">HTML5<\/a>, mientras que\u00a0Google Chrome\u00a0admite adem\u00e1s\u00a0<a title=\"Advanced Audio Coding\" href=\"http:\/\/es.wikipedia.org\/wiki\/Advanced_Audio_Coding\">AAC<\/a>\u00a0y\u00a0<a title=\"MP3\" href=\"http:\/\/es.wikipedia.org\/wiki\/MP3\">MP3<\/a>. Algunas distribuciones de Linux pueden a\u00f1adir soporte para los c\u00f3decs de otros a sus versiones personalizadas de Chromium.<\/p>\n<p>Sigamos &#8230; Sobre google (normal), tecleando la direcci\u00f3n:\u00a0<a href=\"chrome:\/\/flags\/\">chrome:\/\/flags\/<\/a><\/p>\n<p style=\"text-align: justify;\">Aparecer\u00e1n una serie de funciones experimentales. Podemos activar la opcion<strong>\u00a0Habilitar experimentos en Herramientas para desarrolladores\u00a0Mac, Windows, Linux, Chrome OS . <\/strong>Esto habilita experimentos en las Herramientas para desarrolladores. Podemos utilizar el panel de configuraci\u00f3n de las Herramientas para desarrolladores para alternar entre experimentos individuales.\u00a0<a href=\"chrome:\/\/flags\/#enable-devtools-experiments\">#enable-devtools-experiments<\/a>, recuerda relanzar el navegador para aplicar los cambios.<\/p>\n<p>Respecto a otros navegadores como Firefox, tenemos variantes como<a href=\"http:\/\/www.mozilla.org\/en-US\/firefox\/aurora\/\" target=\"_blank\"> Firefox Aurora<\/a>, que muestra las \u00faltimas tendencias que se incorporar\u00e1n en Firefox. <a href=\"http:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/09\/firefox-aurora.jpg\"><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"5656\" data-permalink=\"https:\/\/www.palentino.es\/blog\/los-secretos-de-las-herramientas-de-desarrollo-y-depuracion-web-master-en-herramientas-web\/firefox-aurora\/\" data-orig-file=\"https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/09\/firefox-aurora.jpg\" data-orig-size=\"310,144\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}\" data-image-title=\"firefox-aurora\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/09\/firefox-aurora.jpg\" class=\"aligncenter size-full wp-image-5656\" alt=\"firefox-aurora\" src=\"http:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/09\/firefox-aurora.jpg\" width=\"310\" height=\"144\" srcset=\"https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/09\/firefox-aurora.jpg 310w, https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/09\/firefox-aurora-300x139.jpg 300w\" sizes=\"auto, (max-width: 310px) 100vw, 310px\" \/><\/a><\/p>\n<p style=\"text-align: justify;\">Respecto a Safari el \u00a0Webkit Nightly es un lanzamiento nocturno de Safari.\u00a0Como se trata de una versi\u00f3n nocturna (nightly), es menos estable que los otros navegadores.\u00a0Sin embargo, con las herramientas de desarrollo de Safari se pueden corregir y estudiar gran parte de los problemas actuales.\u00a0<a href=\"http:\/\/nightly.webkit.org\/\" target=\"_blank\">Webkit Nightly<\/a> se puede ejecutar junto a Safari.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"5658\" data-permalink=\"https:\/\/www.palentino.es\/blog\/los-secretos-de-las-herramientas-de-desarrollo-y-depuracion-web-master-en-herramientas-web\/safari-webkit\/\" data-orig-file=\"https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/09\/safari-webkit.jpg\" data-orig-size=\"310,144\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}\" data-image-title=\"safari-webkit\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/09\/safari-webkit.jpg\" class=\"aligncenter size-full wp-image-5658\" alt=\"safari-webkit\" src=\"http:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/09\/safari-webkit.jpg\" width=\"310\" height=\"144\" srcset=\"https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/09\/safari-webkit.jpg 310w, https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/09\/safari-webkit-300x139.jpg 300w\" sizes=\"auto, (max-width: 310px) 100vw, 310px\" \/><\/p>\n<p style=\"text-align: justify;\">Respecto a Microsoft Explorer, s\u00f3lamente podremos probar sus diferentes versiones, y betas. Aquellos navegadores que no posean la barra de desarrollo pulsando la tecla f12, tendremos que instalar el complemento<a href=\"http:\/\/www.microsoft.com\/en-us\/download\/details.aspx?id=18359\" target=\"_blank\"> Explorer developer toolbar<\/a>\u00a0adicional para explorer.<\/p>\n<p><span style=\"color: #800000;\"><strong>Trucos de Consola<\/strong><\/span><\/p>\n<p style=\"text-align: justify;\">\n<div class=\"codecolorer-container text mac-classic\" style=\"overflow:auto;white-space:nowrap;width:635px;\"><table cellspacing=\"0\" cellpadding=\"0\"><tbody><tr><td class=\"line-numbers\"><div>1<br \/><\/div><\/td><td><div class=\"text codecolorer\">console.log()<\/div><\/td><\/tr><\/tbody><\/table><\/div>\n<p>\u00a0es una herramienta extremadamente \u00fatil para ver la salida de depuraci\u00f3n sin tener que utilizar las alertas, pero hay algunos otros m\u00e9todos que puede utilizar para la salida de informaci\u00f3n para facilitar la visualizaci\u00f3n de la consola.<\/p>\n<div class=\"codecolorer-container text mac-classic\" style=\"overflow:auto;white-space:nowrap;width:635px;\"><table cellspacing=\"0\" cellpadding=\"0\"><tbody><tr><td class=\"line-numbers\"><div>1<br \/><\/div><\/td><td><div class=\"text codecolorer\">console.log()<\/div><\/td><\/tr><\/tbody><\/table><\/div>\n<p>\u00a0funcionar\u00e1 estilo printf.\u00a0As\u00ed que podemos \u00a0hacer cosas como esta:\u00a0<\/p>\n<div class=\"codecolorer-container text mac-classic\" style=\"overflow:auto;white-space:nowrap;width:635px;\"><table cellspacing=\"0\" cellpadding=\"0\"><tbody><tr><td class=\"line-numbers\"><div>1<br \/><\/div><\/td><td><div class=\"text codecolorer\">console.log (&quot;%s es %d a\u00f1os de edad.&quot;, &quot;Oscar&quot;, 38)<\/div><\/td><\/tr><\/tbody><\/table><\/div>\n<p>\u00a0. Podemos utilizar\u00a0<\/p>\n<div class=\"codecolorer-container text mac-classic\" style=\"overflow:auto;white-space:nowrap;width:635px;\"><table cellspacing=\"0\" cellpadding=\"0\"><tbody><tr><td class=\"line-numbers\"><div>1<br \/><\/div><\/td><td><div class=\"text codecolorer\">console.info()<\/div><\/td><\/tr><\/tbody><\/table><\/div>\n<p>\u00a0para ver mensajes de informaci\u00f3n;<\/p>\n<div class=\"codecolorer-container text mac-classic\" style=\"overflow:auto;white-space:nowrap;width:635px;\"><table cellspacing=\"0\" cellpadding=\"0\"><tbody><tr><td class=\"line-numbers\"><div>1<br \/><\/div><\/td><td><div class=\"text codecolorer\">console.debug()<\/div><\/td><\/tr><\/tbody><\/table><\/div>\n<p>\u00a0para emitir mensajes de depuraci\u00f3n;<\/p>\n<div class=\"codecolorer-container text mac-classic\" style=\"overflow:auto;white-space:nowrap;width:635px;\"><table cellspacing=\"0\" cellpadding=\"0\"><tbody><tr><td class=\"line-numbers\"><div>1<br \/><\/div><\/td><td><div class=\"text codecolorer\">console.warn()<\/div><\/td><\/tr><\/tbody><\/table><\/div>\n<p>\u00a0mensajes de advertencia \u00a0y\u00a0<\/p>\n<div class=\"codecolorer-container text mac-classic\" style=\"overflow:auto;white-space:nowrap;width:635px;\"><table cellspacing=\"0\" cellpadding=\"0\"><tbody><tr><td class=\"line-numbers\"><div>1<br \/><\/div><\/td><td><div class=\"text codecolorer\">console.error()<\/div><\/td><\/tr><\/tbody><\/table><\/div>\n<p>\u00a0mensajes de error. Tambi\u00e9n podemos utilizar el patr\u00f3n c% al utilizar el segundo argumento como un par\u00e1metro. Por ejemplo:\u00a0<\/p>\n<div class=\"codecolorer-container text mac-classic\" style=\"overflow:auto;white-space:nowrap;width:635px;\"><table cellspacing=\"0\" cellpadding=\"0\"><tbody><tr><td class=\"line-numbers\"><div>1<br \/><\/div><\/td><td><div class=\"text codecolorer\">&lt;strong&gt;console.log&lt;\/strong&gt; (&quot;%c Esto es el texto en verde sobre un fondo amarillo.&quot;, &quot;color: green; background-color: yellow&quot;)<\/div><\/td><\/tr><\/tbody><\/table><\/div>\n<p>\u00a0.<\/p>\n<p style=\"text-align: justify;\">Firebug mostrar\u00e1 diferentes iconos para estas variaciones, as\u00ed como caja de los mensajes en fondos de colores.<\/p>\n<p style=\"text-align: justify;\">Firefox mostrar\u00e1 un peque\u00f1o icono gris junto a informaci\u00f3n, advertir\u00e1 y mostrar\u00e1 mensajes de error para indicar elementos que requieren mayor atenci\u00f3n.<\/p>\n<p style=\"text-align: justify;\">Chrome y Safari no mostrar\u00e1n un icono de informaci\u00f3n, pero se mostrar\u00e1 un icono azul de depuraci\u00f3n, un icono amarillo de advertencia y un icono rojo para el error.<\/p>\n<p style=\"text-align: justify;\">\n<div class=\"codecolorer-container text mac-classic\" style=\"overflow:auto;white-space:nowrap;width:635px;\"><table cellspacing=\"0\" cellpadding=\"0\"><tbody><tr><td class=\"line-numbers\"><div>1<br \/><\/div><\/td><td><div class=\"text codecolorer\">Console.table()<\/div><\/td><\/tr><\/tbody><\/table><\/div>\n<p>\u00a0se puede utilizar para mostrar datos de salida de una matriz de matrices o una lista de objetos en un formato tabular.<\/p>\n<p style=\"text-align: justify;\">\n<div class=\"codecolorer-container text mac-classic\" style=\"overflow:auto;white-space:nowrap;width:635px;\"><table cellspacing=\"0\" cellpadding=\"0\"><tbody><tr><td class=\"line-numbers\"><div>1<br \/><\/div><\/td><td><div class=\"text codecolorer\">Console.assert()<\/div><\/td><\/tr><\/tbody><\/table><\/div>\n<p>\u00a0se puede utilizar para poner a prueba si las expresiones son verdaderas o falsas.<\/p>\n<p style=\"text-align: justify;\">Console.time() se puede emplear para emplear un temporizador en la consola. Con console.timeEnd(etiqueta) detenerlo. console.timeStamp para medir cuando se ejecuto una determinada parte de c\u00f3digo.<\/p>\n<p style=\"text-align: justify;\">En Chrome a pesar de la consola tiene su propia pesta\u00f1a, es posible abrirla desde cualquier ficha pulsando la tecla de escape (logicamente si antes hemos pulsado f12).<\/p>\n<p>En Safari, la consola se encuentra en la parte inferior de las herramientas para desarrolladores.\u00a0La tecla de escape se utiliza para alternar la visibilidad del registro de la consola En Firefox, se puede navegar r\u00e1pidamente a la consola pulsando Ctrl, Shift y K en Windows o Comando \u2318, \u2325 Opci\u00f3n y K en el mac. <strong>Trucos en la Inspecci\u00f3n<\/strong> En la era del dise\u00f1o <strong>Responsive<\/strong>, es importante ver c\u00f3mo nuestros sitios se visualizar\u00e1n en pantallas de cualquier tama\u00f1o.\u00a0A pesar de que podemos cambiar el tama\u00f1o del navegador, <strong>existen algunas herramientas adicionales disponibles para nosotros en las herramientas de desarrollo<\/strong>.<\/p>\n<p style=\"text-align: justify;\">En el panel &#8216;<strong>Configuraci\u00f3n<\/strong>&#8216; de las herramientas de desarrollo de Chrome (que se encuentra haciendo clic en el engranaje en la esquina inferior derecha de las herramientas) bajo &#8216;<strong>Overrides<\/strong>&#8216; se encuentra &#8216;M\u00e9tricas de dispositivos&#8221; o &#8220;<strong>Device Metrics<\/strong>&#8221; que permite especificar una anchura y altura, junto con una tama\u00f1o de la escala de fuente.\u00a0Tambi\u00e9n podemos acoplar las herramientas de desarrollo a la derecha de la p\u00e1gina y los redimensionar al tama\u00f1o que deseamos probar.<\/p>\n<p style=\"text-align: justify;\">Las herramientas de desarrollo de Firefox es una herramienta para comprobar \u00a0el sitio en cualquier dimensi\u00f3n.\u00a0La herramienta &#8220;Modo Dise\u00f1o Sensible &#8216;se puede encontrar en la cabecera de la parte superior derecha de las herramientas de desarrollo. \u00a0Firefox tambi\u00e9n proporciona una opci\u00f3n para rotar las dimensiones para que podamos probar tanto en modos de landscape y \u00a0retrato.<\/p>\n<p><strong>Respecto a las fuentes.<\/strong> Firefox viene con un inspector de fuente, que le permite ver las fuentes utilizadas en el elemento que actualmente se est\u00e1 inspeccionando.<\/p>\n<div>Podemos modificar el texto predeterminado &#8220;Abc&#8221; a probar la fuente con cualquier texto que quisieramos.\u00a0En la parte inferior de la lista de fuentes hay un bot\u00f3n para visualizar todas las fuentes en la p\u00e1gina, lo que permite una manera f\u00e1cil de ver exactamente qu\u00e9 fuentes se utilizan en la p\u00e1gina.<\/div>\n<p>Firebug proporciona una informaci\u00f3n de consejos para cualquier declaraci\u00f3n de tipo de letra que aparece en el CSS.<\/p>\n<p><strong style=\"color: #800000;\">Trucos en la edici\u00f3n de elementos<\/strong><\/p>\n<p style=\"text-align: justify;\">Si tenemos la necesidad de modificar el margen, el relleno, la anchura o la altura de una web mediante CSS, podemos utilizar las teclas del cursor para aumentar \/ disminuir el tama\u00f1o.\u00a0Simplemente utilizaremos las teclas de cursor (arriba y abajo) para aumentar \/ disminuir en una unidad de 1.<\/p>\n<p style=\"text-align: justify;\">Podemos aumentar \/ disminuir en unidades de 10 manteniendo pulsada la tecla &#8220;Shift&#8221; mientras presionamos la teclas arriba y abajo del cursor, y se puede aumentar \/ disminuir en una unidad de 0,1 manteniendo presionada la tecla &#8220;Alt&#8221; mientras pulsamos las teclas el cursor arriba y abajo.<\/p>\n<p style=\"text-align: justify;\">Tambi\u00e9n podemos aumentar \/ disminuir en una unidades de 100, manteniendo pulsada la tecla &#8220;Shift&#8221; mientras pulsamos P\u00e1gina-Up y Page-Down.<\/p>\n<p style=\"text-align: justify;\">Estos accesos directos <strong>son especialmente \u00fatiles cuando no estamos seguros del tama\u00f1o y disposici\u00f3n exacta que deseamos ver<\/strong>. Permiten corregir <strong>en tiempo real<\/strong> las <strong>&#8220;Distorsiones CSS&#8221;<\/strong>, para cambiarlas posteriormente en la p\u00e1gina web a subir.<\/p>\n<p style=\"text-align: justify;\"><a href=\"http:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/09\/distorsion-css.jpg\"><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"5667\" data-permalink=\"https:\/\/www.palentino.es\/blog\/los-secretos-de-las-herramientas-de-desarrollo-y-depuracion-web-master-en-herramientas-web\/distorsion-css\/\" data-orig-file=\"https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/09\/distorsion-css.jpg\" data-orig-size=\"353,270\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}\" data-image-title=\"distorsion-css\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/09\/distorsion-css.jpg\" class=\"aligncenter size-full wp-image-5667\" alt=\"distorsion-css\" src=\"http:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/09\/distorsion-css.jpg\" width=\"353\" height=\"270\" srcset=\"https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/09\/distorsion-css.jpg 353w, https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/09\/distorsion-css-300x229.jpg 300w\" sizes=\"auto, (max-width: 353px) 100vw, 353px\" \/><\/a><\/p>\n<p style=\"text-align: justify;\">Otro curioso cambio que podemos realizar con estas herramientas es la posibilidad de tanto en\u00a0Chrome y Safari de arrastrar y soltar elementos en un orden diferente.\u00a0Basta con hacer clic y mantener presionado en el elemento que desee mover y arrastrarlo hasta donde deseemos moverlo.\u00a0Aparecer\u00e1 una l\u00ednea que muestra d\u00f3nde se colocar\u00e1.<\/p>\n<p style=\"text-align: justify;\">Respecto al Styling Activo en eventos (hover, focus, visited), google Chrome permite cambiar las pseudo-clases. En la Columna de la derecha de la pesta\u00f1a elementos, en la parte superior se pueden marcar los checkbox para los distintos eventos. En Firebug esto esta m\u00e1s escondido y es necesario pulsar la flecha desplegable de style.<\/p>\n<p style=\"text-align: justify;\">En Firefox, aparece como un menu desplegable al lado del DOM, cuando se hace clic en el modo inspeccionar. En Opera se muestra como un bot\u00f3n con opciones desplegables. En Safari en la opci\u00f3n &#8220;Forced Pseudo-Classes&#8221; a modo de menu.<\/p>\n<p style=\"text-align: justify;\"><span style=\"color: #800000;\"><strong>Curiosidades sobre \u00a0el rendimiento y mejoras WPO a considerar para los SEO<\/strong><\/span><\/p>\n<p style=\"text-align: justify;\">Cada navegador permite desactivar la cach\u00e9 de la p\u00e1gina web, asegurando que sus recursos provienen de un servidor cada vez. Esto es \u00fatil para evitar &#8220;sustos&#8221;, puesto que podemos estar viendo una representaci\u00f3n antigua de la web. En algunos navegadores para borrar la cache, es necesario pulsar la tecla Control+F5<\/p>\n<p style=\"text-align: justify;\">Respecto a la velocidad de carga, podemos emplear el siguiente truco para ordenar las solicitudes de red que se efect\u00faan de forma individual y buscar los posibles cuellos de botella.<\/p>\n<p style=\"text-align: justify;\">Esto se suele realizar en la pesta\u00f1a &#8220;<strong>red<\/strong>&#8220;. Podemos ordenar campos comunes como nombres, dominios, tipos de recursos, estado de HTTP, tama\u00f1os.<\/p>\n<p>Chrome va un paso m\u00e1s all\u00e1 y permite hacer clic en el encabezado del &#8220;Timeline&#8221; para mostrar una gama adicional de opciones de ajuste.<\/p>\n<ul>\n<li><b>Hora de inicio<\/b>\u00a0es la opci\u00f3n predeterminada y ordena por el momento en que se inicia cada solicitud de red.<\/li>\n<li><b>Tiempo de Respuesta<\/b>\u00a0ordena por el tiempo que se tard\u00f3 en obtener una respuesta de la solicitud de red.<\/li>\n<li><b>Instante final\u00a0<\/b>\u00a0de \u00a0la solicitud que se ha completado.<\/li>\n<li><b>Duraci\u00f3n,\u00a0<\/b>ordena por el momento de petici\u00f3n que se tard\u00f3 en completar.<\/li>\n<li><b>Latencia<\/b>\u00a0es la cantidad de tiempo para que el navegador reciba una respuesta despu\u00e9s de la petici\u00f3n inicial.\u00a0<strong>Esta opci\u00f3n nos permite ordenar la latencia para ver qu\u00e9 recursos est\u00e1n llevando m\u00e1s tiempo en responder<\/strong>. La \u00a0Latencia puede depender de la distancia que el usuario tiene hasta el servidor, y puede ser mejorada mediante la creaci\u00f3n de redes de distribuci\u00f3n de contenidos (CDN) pr\u00f3ximas al usuario.\u00a0Utilizando concatenaci\u00f3n de los archivos CSS y JavaScript, imagenes, etc &#8230; podemos<strong> reducir el n\u00famero de recursos necesarios, y por lo tanto la reducci\u00f3n de la latencia total.<\/strong><\/li>\n<\/ul>\n<p style=\"text-align: justify;\">Podemos exportar el timeline de red como un archivo HAR. Los archivos HAR (HTTP Archive) se pueden utilizar para una variedad de t\u00e9cnicas de an\u00e1lisis de rendimiento y depuraci\u00f3n. El desarrollador puede ejecutar los archivos HAR de forma local, para averiguar que puede suceder.<\/p>\n<p style=\"text-align: justify;\">Por lo que podemos exportar el timeline de la pesta\u00f1a RED a formato HAR haciendo clic derecho sobre &#8220;Save as HAR with content&#8221;<\/p>\n<p style=\"text-align: justify;\"><a href=\"http:\/\/ericduran.github.io\/chromeHAR\/\" target=\"_blank\">ChromeHAR\u00a0<\/a>es una herramienta en l\u00ednea que proporciona la misma interfaz de l\u00ednea de tiempo de Chrome y se puede utilizar para este prop\u00f3sito.<\/p>\n<p style=\"text-align: justify;\">Chrome muestra en una l\u00ednea de tiempo o timeline \u00a0la velocidad de fotogramas lo que permite la capacidad de depurar un sitio en base a los frames.<\/p>\n<p style=\"text-align: justify;\">Para crear una l\u00ednea de tiempo , primero es necesario abrir las Herramientas para desarrolladores de Chrome y seleccionar la pesta\u00f1a &#8220;Timeline&#8221;.\u00a0En la parte inferior de la pesta\u00f1a hay una serie de iconos que incluyen un c\u00edrculo negro que representa el &#8216;record&#8217;. Pulsaremos una vez para activar la grabaci\u00f3n de la l\u00ednea de tiempo y una segunda vez para detener la grabaci\u00f3n.\u00a0Durante la grabaci\u00f3n, se puede interactuar con la p\u00e1gina de la manera habitual y el modo de fotogramas se grabar\u00e1n todos los frames la de acci\u00f3n.<\/p>\n<div style=\"text-align: justify;\">Cada barra \u00a0de la l\u00ednea de tiempo representa un fotograma de la animaci\u00f3n, \u00a0con los siguientes colores: azul para la carga de las tareas, amarillo para las tareas de secuencias de comandos, p\u00farpura para las tareas de representaci\u00f3n y verde para las tareas de dibujo.\u00a0El \u00e1rea blanca representa el tiempo de inactividad.<\/div>\n<div><\/div>\n<div>Podemos arrastrar los dos deslizadores gris \u00a0con el rat\u00f3n para cambiar el n\u00famero de fotogramas de la l\u00ednea de tiempo que deseamos inspeccionar.<\/div>\n<p style=\"text-align: justify;\">Al pasar por las filas de encabezado en la l\u00ednea de tiempo se muestra la duraci\u00f3n del frame, los FPS , el el tiempo de CPU y el tiempo acumulado de las acciones dentro del frame. Al Pasar por encima de los registros, se puede ver un desglose de la duraci\u00f3n de cada tarea, junto con otra informaci\u00f3n \u00fatil. Respecto a las solicitudes de red XHR, tanto Chrome como Firebug<strong> \u00a0si\u00a0deseamos volver a ejecutar una petici\u00f3n XHR sin tener que recargar la p\u00e1gina<\/strong> o volver a ejecutar el evento, podemos hacer clic derecho sobre el recurso y seleccionar &#8220;<strong>Replay XHR<\/strong>&#8221; (&#8220;Reenviar&#8221; en Firebug). XMLHttpRequest <b>(XHR)<\/b>, tambi\u00e9n referida como XMLHTTP (<i>Extensible Markup Language \/ Hypertext Transfer Protocol<\/i>), es una\u00a0interfaz\u00a0empleada para realizar peticiones\u00a0HTTP\u00a0y\u00a0HTTPS\u00a0a servidores Web.<\/p>\n<p style=\"text-align: justify;\">Para los datos transferidos se usa cualquier codificaci\u00f3n basada en texto, incluyendo: texto plano,\u00a0<a title=\"XML\" href=\"http:\/\/es.wikipedia.org\/wiki\/XML\">XML<\/a>,\u00a0<a title=\"JSON\" href=\"http:\/\/es.wikipedia.org\/wiki\/JSON\">JSON<\/a>,\u00a0<a title=\"HTML\" href=\"http:\/\/es.wikipedia.org\/wiki\/HTML\">HTML<\/a>\u00a0y codificaciones particulares espec\u00edficas. La interfaz se implementa como una\u00a0clase\u00a0de la que una aplicaci\u00f3n\u00a0cliente\u00a0puede generar tantas instancias como necesite para manejar el di\u00e1logo con el servidor.<\/p>\n<p style=\"text-align: justify;\">El uso m\u00e1s popular, si bien no el \u00fanico, de esta interfaz es proporcionar contenido din\u00e1mico y actualizaciones as\u00edncronas en p\u00e1ginas WEB mediante tecnolog\u00edas construidas sobre ella como por ejemplo\u00a0<a title=\"AJAX\" href=\"http:\/\/es.wikipedia.org\/wiki\/AJAX\">AJAX<\/a>.<\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #800000;\"><strong>OPCIONES DE DEPURACION<\/strong><\/span><\/p>\n<p>Con Chrome, se puede lograr emular eventos t\u00e1ctiles directamente en el navegador.\u00a0Para ello el panel de la configuraci\u00f3n (el icono de engranaje en la parte inferior derecha de Chrome Developer Tools), selecciona la opci\u00f3n &#8220;anulaciones&#8221; y elegir la opci\u00f3n &#8220;Emular Touch Events&#8221;.<\/p>\n<p>En Chrome Canary, este reemplazar\u00e1 el cursor con un c\u00edrculo lo que no s\u00f3lo se puede saber en qu\u00e9 modo se encuentra, sino tambi\u00e9n qu\u00e9 \u00a0grande puede ser la superficie de un toque de clic.<\/p>\n<p>A veces puede ser \u00fatil para hacerse pasar por un navegador o dispositivo diferente para la depuraci\u00f3n, especialmente si trabajamos en un sitio que emplea la detecci\u00f3n de dispositivos.<\/p>\n<p>Desde Chrome, si abrimos el panel de configuraci\u00f3n (el icono de engranaje en la parte inferior derecha) y seleccionamos la opci\u00f3n &#8220;Overrides&#8221; , encontramos la opci\u00f3n &#8220;User Agent&#8221;.\u00a0Podemos seleccionar uno de los incorporados en las opciones o seleccionar &#8220;Otro&#8221; y introducir \u00a0el nuestro . Chrome \u00a0ajustar\u00e1 el navegador a las dimensiones correctas si se selecciona un dispositivo m\u00f3vil o tableta &#8211; pudiendo ser desactivado en caso de problemas.<\/p>\n<p>Con el navegador podemos usar breakpoints condicionales e interrupciones XHR (depurar peticiones AJAX).<\/p>\n<p>El empleo de breakpoints o puntos de interrupci\u00f3n de Javascript, puede ser muy \u00fatil, pero cuando trabajamos con archivos minified, suele ser bastante complicado depurar. Este interesante truco, permite que algunos navegadores puedan un-minify o desefuscar el javascript.<\/p>\n<p><b>Minificaci\u00f3n<\/b>\u00a0(tambi\u00e9n\u00a0<a href=\"http:\/\/en.wikipedia.org\/wiki\/Minification_(programming)\" target=\"_blank\"><b>minimizaci\u00f3n<\/b>\u00a0<\/a>o\u00a0<b>reducci\u00f3n al m\u00ednimo<\/b>\u00a0), en los \u00a0lenguajes de programaci\u00f3n\u00a0y sobre todo\u00a0JavaScript\u00a0, es el proceso de eliminaci\u00f3n de todos los caracteres innecesarios del\u00a0c\u00f3digo fuente\u00a0sin cambiar su funcionalidad. Es decir desofuscar el c\u00f3digo. Aclarar su l\u00f3gica a nuestros ojos.<\/p>\n<p>En\u00a0Chrome y Safari, s\u00f3lo tenemos que seleccionar la pesta\u00f1a &#8216;Scripts&#8217;, encontrar el archivo correspondiente y luego presionar el bot\u00f3n &#8220;{}&#8221; (Pretty Print) en el icono situado en el panel inferior.\u00a0En Internet Explorer, es necesario hacer clic en el icono de la herramienta de la selecci\u00f3n hasta encontrar la opci\u00f3n para formatear el JavaScript.\u00a0Opera aclara autom\u00e1ticamente el JavaScript minified.<\/p>\n<p><strong>Y para rematar&#8230;<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #800000;\"><strong>ANULACI\u00d3N de la geolocalizaci\u00f3n<\/strong><\/span><\/p>\n<p>La geolocalizaci\u00f3n permite que tu navegador informe a las p\u00e1ginas web que lo soliciten, sobre los datos de tu localizaci\u00f3n actual, algo que normalmente se usa para que la informaci\u00f3n que la p\u00e1gina te ofrezca sea filtrada por tu localizaci\u00f3n; por ejemplo, si visitas Google Maps y Google Chrome sabe donde est\u00e1s, te mostrar\u00e1 un mapa de tu zona, en vez de una versi\u00f3n gen\u00e9rica.<\/p>\n<p>Puedes permitir que algunos sitios que visitas utilicen la informaci\u00f3n de tu ubicaci\u00f3n para que la informaci\u00f3n que muestran te resulte m\u00e1s \u00fatil. Por ejemplo, si compartes tu ubicaci\u00f3n con un sitio especializado en opiniones de restaurantes, el sitio puede personalizar los resultados y mostrar opiniones de restaurantes pr\u00f3ximos a tu ubicaci\u00f3n. Puedes decidir si quieres compartir tu ubicaci\u00f3n con otros sitios o no.<\/p>\n<p><strong>Google Chrome nunca comparte la informaci\u00f3n de tu ubicaci\u00f3n sin tu permiso.\u00a0<\/strong>De forma predeterminada, cuando te encuentres en un sitio que quiera utilizar la informaci\u00f3n de tu ubicaci\u00f3n, Google Chrome mostrar\u00e1 un mensaje de advertencia en la parte superior de la p\u00e1gina. Tu ubicaci\u00f3n se env\u00eda al sitio solo si haces clic en la opci\u00f3n\u00a0<strong>Permitir<\/strong>\u00a0que aparece en el mensaje.<\/p>\n<p>Si aceptas compartir tu ubicaci\u00f3n con el sitio, aparecer\u00e1 el icono de ubicaci\u00f3n\u00a0<img loading=\"lazy\" decoding=\"async\" alt=\"\" src=\"https:\/\/storage.googleapis.com\/support-kms-prod\/SNP_2819184_en_v0\" width=\"19\" height=\"19\" \/>\u00a0en la barra de direcciones como recordatorio de que has concedido permiso a este sitio (o a alg\u00fan elemento insertado en el sitio como, por ejemplo, un mapa) para acceder a tu ubicaci\u00f3n. Haz clic en el icono para obtener m\u00e1s informaci\u00f3n o para eliminar los permisos de acceso a la informaci\u00f3n sobre ubicaci\u00f3n del sitio.<\/p>\n<p>\u00bfC\u00f3mo desactivar la geolocalizaci\u00f3n en Google Chrome?<\/p>\n<p>Se encuentra en:<br \/>\nHaz clic en el men\u00fa de Chrome\u00a0<img loading=\"lazy\" decoding=\"async\" title=\"Chrome menu\" alt=\"Chrome menu\" src=\"https:\/\/storage.googleapis.com\/support-kms-prod\/SNP_2696434_en_v1\" width=\"29\" height=\"29\" \/>\u00a0en la barra de herramientas del navegador.<\/p>\n<ol>\n<li>Selecciona\u00a0<strong>Configuraci\u00f3n<\/strong>.<\/li>\n<li>Haz clic en\u00a0<strong>Mostrar opciones avanzadas&#8230;<\/strong><\/li>\n<li>En la secci\u00f3n &#8220;Privacidad&#8221;, haz clic en\u00a0<strong>Configuraci\u00f3n de contenido<\/strong>.<\/li>\n<li>En el cuadro de di\u00e1logo que aparece, despl\u00e1zate hasta la secci\u00f3n &#8220;Ubicaci\u00f3n&#8221;. Selecciona el tipo de permiso predeterminado que quieras establecer para las solicitudes de informaci\u00f3n sobre la ubicaci\u00f3n.\n<ul>\n<li><strong>Permitir que los sitios realicen un seguimiento de mi ubicaci\u00f3n f\u00edsica<\/strong>: selecciona esta opci\u00f3n para permitir el acceso autom\u00e1tico de todos los sitios a tu ubicaci\u00f3n.<\/li>\n<li><strong>Preguntarme cuando un sitio intente realizar un seguimiento de mi ubicaci\u00f3n f\u00edsica<\/strong>: selecciona esta opci\u00f3n si deseas que Google muestre un mensaje de advertencia cuando un sitio solicite informaci\u00f3n de tu ubicaci\u00f3n.<\/li>\n<li><strong>No permitir que los sitios puedan realizar un seguimiento de mi ubicaci\u00f3n f\u00edsica:<\/strong>\u00a0selecciona esta opci\u00f3n para denegar de forma autom\u00e1tica las solicitudes de ubicaci\u00f3n de los sitios.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>En Firefox, la ubicaci\u00f3n del API puede ser alterada temporalmente como en Chrome.<\/p>\n<p>En este caso, tendremos \u00a0que confiar e instalar \u00a0el addon Geolocater.<br \/>\n<a href=\"https:\/\/addons.mozilla.org\/fr\/firefox\/addon\/geolocater\/\">sitio web oficial de Mozilla addon<\/a>\u00a0.<\/p>\n<p>Despu\u00e9s de la instalaci\u00f3n, vamos al men\u00fa &#8220;Herramientas&#8221;, &#8220;Geolocater&#8221;, &#8220;Administrar&#8221;.\u00a0A partir de aqu\u00ed, seremos capaces de a\u00f1adir directamente una &#8220;falsa&#8221; geolocalizaci\u00f3n.\u00a0Despu\u00e9s, seremos capaces de anular la geolocalizaci\u00f3n y cambiar entre geolocalizaciones predefinidas.\u00a0Podemos confirmar el comportamiento en\u00a0<a href=\"http:\/\/html5demos.com\/geo\">html5demos de Geolocalizaci\u00f3n<\/a><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Respecto a Internet Explorer 11<\/strong><br \/>\nIE11, disponible para windows 7 y 8.x, ofrece un nuevo conjunto de herramientas de desarrollo.<br \/>\nNuevas caracter\u00edsticas del Inspector del DOM, herramientas de rendimiento(UI Responsiveness Tool), caracter\u00edsticas de emulaci\u00f3n, Windows phone, Falsificaci\u00f3n de geolocalizacion, nuevas caracter\u00edsticas del debugger, etc<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Enlaces a la documentaci\u00f3n detallada sobre las herramientas de desarrollo<\/strong><\/p>\n<table>\n<thead>\n<tr>\n<th align=\"left\"><span style=\"font-size: small;\"><span style=\"font-weight: normal; line-height: 19px;\">Browser<\/span><\/span><\/th>\n<th align=\"left\"><span style=\"font-size: small;\"><span style=\"font-weight: normal; line-height: 19px;\">Development Toolset<\/span><\/span><\/th>\n<th align=\"left\"><span style=\"font-size: small;\"><span style=\"font-weight: normal; line-height: 19px;\">Tipo<\/span><\/span><\/th>\n<th align=\"left\"><span style=\"font-size: small;\"><span style=\"font-weight: normal; line-height: 19px;\">Documentaci\u00f3n<\/span><\/span><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td align=\"left\"><span style=\"color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: small;\"><span style=\"line-height: 19px;\">Chrome<\/span><\/span><\/td>\n<td align=\"left\"><span style=\"color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: small;\"><span style=\"line-height: 19px;\">Developer Tools<\/span><\/span><\/td>\n<td align=\"left\"><span style=\"color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: small;\"><span style=\"line-height: 19px;\">Integrada<\/span><\/span><\/td>\n<td align=\"left\"><a style=\"line-height: 19px;\" href=\"http:\/\/code.google.com\/chrome\/devtools\/docs\/overview.html\"><span style=\"color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: small;\">Documentaci\u00f3n<\/span><\/a><\/td>\n<\/tr>\n<tr>\n<td align=\"left\"><span style=\"color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: small;\"><span style=\"line-height: 19px;\">Firefox<\/span><\/span><\/td>\n<td align=\"left\"><span style=\"color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: small;\"><span style=\"line-height: 19px;\">Firebug<\/span><\/span><\/td>\n<td align=\"left\"><a style=\"line-height: 19px;\" href=\"http:\/\/www.getfirebug.com\/\"><span style=\"color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: small;\">Add-on<\/span><\/a><\/td>\n<td align=\"left\"><a style=\"line-height: 19px;\" href=\"http:\/\/getfirebug.com\/wiki\/index.php\/Main_Page\"><span style=\"color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: small;\">Documentaci\u00f3n<\/span><\/a><\/td>\n<\/tr>\n<tr>\n<td align=\"left\"><span style=\"color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: small;\"><span style=\"line-height: 19px;\">Firefox<\/span><\/span><\/td>\n<td align=\"left\"><span style=\"color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: small;\"><span style=\"line-height: 19px;\">Developer Tools<\/span><\/span><\/td>\n<td align=\"left\"><span style=\"color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: small;\"><span style=\"line-height: 19px;\">Integrada<\/span><\/span><\/td>\n<td align=\"left\"><a style=\"line-height: 19px;\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Tools\"><span style=\"color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: small;\">Documentaci\u00f3n<\/span><\/a><\/td>\n<\/tr>\n<tr>\n<td align=\"left\"><span style=\"color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: small;\"><span style=\"line-height: 19px;\">Internet Explorer<\/span><\/span><\/td>\n<td align=\"left\"><span style=\"color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: small;\"><span style=\"line-height: 19px;\">Developer Toolbar<\/span><\/span><\/td>\n<td align=\"left\"><span style=\"color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: small;\"><span style=\"line-height: 19px;\">Integrada<\/span><\/span><\/td>\n<td align=\"left\"><a style=\"line-height: 19px;\" href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/gg589507(v=VS.85).aspx\"><span style=\"color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: small;\">Documentaci\u00f3n<\/span><\/a><\/td>\n<\/tr>\n<tr>\n<td align=\"left\"><span style=\"color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: small;\"><span style=\"line-height: 19px;\">Opera<\/span><\/span><\/td>\n<td align=\"left\"><span style=\"color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: small;\"><span style=\"line-height: 19px;\">Dragonfly<\/span><\/span><\/td>\n<td align=\"left\"><span style=\"color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: small;\"><span style=\"line-height: 19px;\">Integrada<\/span><\/span><\/td>\n<td align=\"left\"><a style=\"line-height: 19px;\" href=\"http:\/\/www.opera.com\/dragonfly\/documentation\/\"><span style=\"color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: small;\">Documentaci\u00f3n<\/span><\/a><\/td>\n<\/tr>\n<tr>\n<td align=\"left\"><span style=\"color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: small;\"><span style=\"line-height: 19px;\">Safari<\/span><\/span><\/td>\n<td align=\"left\"><span style=\"color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: small;\"><span style=\"line-height: 19px;\">Developer Tools<\/span><\/span><\/td>\n<td align=\"left\"><span style=\"color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: small;\"><span style=\"line-height: 19px;\">Integrada (<a href=\"http:\/\/developer.apple.com\/library\/safari\/#documentation\/appleapplications\/Conceptual\/Safari_Developer_Guide\/2SafariDeveloperTools\/SafariDeveloperTools.html#\/\/apple_ref\/doc\/uid\/TP40007874-CH3-SW7\">Defecto off<\/a>)<\/span><\/span><\/td>\n<td align=\"left\"><a style=\"line-height: 19px;\" href=\"http:\/\/developer.apple.com\/library\/safari\/#documentation\/appleapplications\/Conceptual\/Safari_Developer_Guide\/2SafariDeveloperTools\/SafariDeveloperTools.html\"><span style=\"color: #333333; font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: small;\">Overview<\/span><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #800000;\"><strong>Otros enlaces interesantes de toolbars:<\/strong><\/span><\/p>\n<p><a href=\"https:\/\/addons.mozilla.org\/es\/firefox\/addon\/web-developer\/\" target=\"_blank\">Web developers tools<\/a> para mozilla.<\/p>\n<p><a href=\"https:\/\/chrome.google.com\/webstore\/detail\/web-developer\/bfbameneiokkgbdmiekhjnmfkcnldhhm\" target=\"_blank\">Web Developer<\/a> para Chrome (5 estrellas).<\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #800000;\"><strong>Plugins para Chrome<\/strong><\/span><\/p>\n<p>Pagespeed Insights<br \/>\n<a href=\"http:\/\/netm.ag\/insights-256\" target=\"_blank\">http:\/\/netm.ag\/insights-256<\/a><\/p>\n<p>Coffee Console<br \/>\n<a href=\"http:\/\/netm.ag\/coffee-246\" target=\"_blank\">http:\/\/netm.ag\/coffee-246<\/a><\/p>\n<p>Tincr (permite editar y grabar los cambios fuente)<br \/>\n<a href=\"http:\/\/netm.ag\/tincr-246\" target=\"_blank\">http:\/\/netm.ag\/tincr-246<\/a><\/p>\n<p>AngularJSm Batarang<br \/>\n<a href=\"http:\/\/netm.ag\/angularjsbatarang-246\" target=\"_blank\">http:\/\/netm.ag\/angularjsbatarang-246<\/a><\/p>\n<p>Knockoutjs context debugger:<br \/>\n<a href=\"http:\/\/netm.ag\/contextdebugger-246\" target=\"_blank\">http:\/\/netm.ag\/contextdebugger-246<\/a><\/p>\n<p>Grunt Devtools<br \/>\n<a href=\"http:\/\/netm.ag\/grunt-246\" target=\"_blank\">http:\/\/netm.ag\/grunt-246<\/a><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #800000;\"><strong>Complementos para Firebug<\/strong><\/span><\/p>\n<p>FireSass:<br \/>\n<a href=\"https:\/\/addons.mozilla.org\/es\/firefox\/addon\/firesass-for-firebug\/\" target=\"_blank\">https:\/\/addons.mozilla.org\/es\/firefox\/addon\/firesass-for-firebug\/<\/a><\/p>\n<p>Pixel Perfect:<\/p>\n<p><a href=\"https:\/\/addons.mozilla.org\/es\/firefox\/addon\/pixel-perfect\/\" target=\"_blank\">https:\/\/addons.mozilla.org\/es\/firefox\/addon\/pixel-perfect\/<\/a><\/p>\n<p>YSlow:<br \/>\n<a href=\"https:\/\/addons.mozilla.org\/es\/firefox\/addon\/yslow\/\" target=\"_blank\">https:\/\/addons.mozilla.org\/es\/firefox\/addon\/yslow\/<\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<div id=\"palen-3966362974\" class=\"palen-despues-del-contenido palen-entity-placement\"><div class=\"palen-adlabel\">Anuncios<\/div><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-2815317153396146\" crossorigin=\"anonymous\"><\/script><ins class=\"adsbygoogle\" style=\"display:block;\" data-ad-client=\"ca-pub-2815317153396146\" \ndata-ad-slot=\"\" \ndata-ad-format=\"auto\" data-full-width-responsive=\"true\"><\/ins>\n<script> \n(adsbygoogle = window.adsbygoogle || []).push({}); \n<\/script>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>En esta entrada os voy a mostrar una serie de secretos muy interesantes para los desarrolladores, que nos permitir\u00e1n agilizar los trabajos web, as\u00ed como sacar provecho al m\u00e1ximo de las herramientas \u00a0que poseen los diferentes navegadores para depurar y revisar los c\u00f3digos (HTML, Javascript, CSS) de las p\u00e1ginas que visitas o creas. Antiguamente, la depuraci\u00f3n de componentes de las p\u00e1ginas era una tarea tediosa, al menos para mi. Muchas depuraciones en javascript se hac\u00edan con el comando Alert, mediante diferentes ventanas popup pod\u00edamos ver los valores que determinaban ciertos comportamientos de nuestras aplicaciones. Hoy en d\u00eda, por fortuna eso ha cambiado, y disponemos de verdaderos entornos de depuraci\u00f3n que agilizan el desarrollo web. Pero que no exprimimos, ni sacamos partido. Comencemos categorizando estos secretos.<\/p>\n","protected":false},"author":1,"featured_media":5679,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[364,5,297,215,14,24],"tags":[683,470,472,669,471,469,125,200],"class_list":["post-5650","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-chrome","category-programacion","category-testing","category-truco","category-varios","category-web","tag-chrome","tag-explorer","tag-firebug","tag-google","tag-safari","tag-secretos","tag-trucos","tag-webmaster"],"views":11642,"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.palentino.es\/blog\/wp-content\/uploads\/2013\/09\/secretos-desarrollo-web.jpg","jetpack_shortlink":"https:\/\/wp.me\/p2ECph-1t8","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/5650","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/comments?post=5650"}],"version-history":[{"count":31,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/5650\/revisions"}],"predecessor-version":[{"id":5687,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/5650\/revisions\/5687"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/media\/5679"}],"wp:attachment":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/media?parent=5650"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/categories?post=5650"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/tags?post=5650"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}