{"id":319,"date":"2021-11-29T14:08:21","date_gmt":"2021-11-29T13:08:21","guid":{"rendered":"https:\/\/birdcom.es\/blog\/?p=319"},"modified":"2023-01-23T17:30:21","modified_gmt":"2023-01-23T16:30:21","slug":"como-usar-web-developer-tutorial-en-espanol","status":"publish","type":"post","link":"https:\/\/birdcom.es\/blog\/como-usar-web-developer-tutorial-en-espanol\/","title":{"rendered":"\u00bfC\u00f3mo usar Web Developer? \u00a1Tutorial en Espa\u00f1ol!"},"content":{"rendered":"\n<p>Esta herramienta es usada por miles de profesionales, <strong>permite realizar reconocimientos r\u00e1pidos sobre una web<\/strong> y es ideal para dise\u00f1adores web y SEOs, de ah\u00ed su importancia por saber c\u00f3mo usar Web Developer, una extensi\u00f3n que es de las m\u00e1s completas y \u00fatiles.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_83 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Tabla de Contenidos<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a09057202fb8\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #00B9FB;color:#00B9FB\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #00B9FB;color:#00B9FB\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a09057202fb8\"  aria-label=\"Alternar\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/birdcom.es\/blog\/como-usar-web-developer-tutorial-en-espanol\/#%C2%BFQue_es_Web_Developer\" >\u00bfQu\u00e9 es Web Developer?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/birdcom.es\/blog\/como-usar-web-developer-tutorial-en-espanol\/#Como_usar_Web_Developer_tutorial_en_Espanol\" >C\u00f3mo usar Web Developer, tutorial en Espa\u00f1ol<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/birdcom.es\/blog\/como-usar-web-developer-tutorial-en-espanol\/#Deshabilitar\" >Deshabilitar<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/birdcom.es\/blog\/como-usar-web-developer-tutorial-en-espanol\/#Cookies\" >Cookies<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/birdcom.es\/blog\/como-usar-web-developer-tutorial-en-espanol\/#CSS\" >CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/birdcom.es\/blog\/como-usar-web-developer-tutorial-en-espanol\/#Formularios\" >Formularios<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/birdcom.es\/blog\/como-usar-web-developer-tutorial-en-espanol\/#Imagenes\" >Im\u00e1genes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/birdcom.es\/blog\/como-usar-web-developer-tutorial-en-espanol\/#Informacion_General\" >Informaci\u00f3n General<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/birdcom.es\/blog\/como-usar-web-developer-tutorial-en-espanol\/#Diverso\" >Diverso<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/birdcom.es\/blog\/como-usar-web-developer-tutorial-en-espanol\/#Contorno\" >Contorno<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/birdcom.es\/blog\/como-usar-web-developer-tutorial-en-espanol\/#Redimension\" >Redimensi\u00f3n<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/birdcom.es\/blog\/como-usar-web-developer-tutorial-en-espanol\/#Herramientas\" >Herramientas<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/birdcom.es\/blog\/como-usar-web-developer-tutorial-en-espanol\/#Opciones\" >Opciones<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/birdcom.es\/blog\/como-usar-web-developer-tutorial-en-espanol\/#Mejores_utilidades_para_saber_usar_Web_Developer\" >Mejores utilidades para saber usar Web Developer<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/birdcom.es\/blog\/como-usar-web-developer-tutorial-en-espanol\/#Como_ver_CSS_con_Web_Developer\" >C\u00f3mo ver CSS con Web Developer<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/birdcom.es\/blog\/como-usar-web-developer-tutorial-en-espanol\/#Como_ver_anchor_text_con_Web_Developer\" >C\u00f3mo ver anchor text con Web Developer<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/birdcom.es\/blog\/como-usar-web-developer-tutorial-en-espanol\/#Como_ver_los_encabezados_de_una_pagina_web\" >Como ver los encabezados de una pagina web<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/birdcom.es\/blog\/como-usar-web-developer-tutorial-en-espanol\/#Descargar_Web_Developer\" >Descargar Web Developer<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/birdcom.es\/blog\/como-usar-web-developer-tutorial-en-espanol\/#Web_Developer_para_Google_Chrome\" >Web Developer para Google Chrome<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/birdcom.es\/blog\/como-usar-web-developer-tutorial-en-espanol\/#Web_Developer_para_Firefox\" >Web Developer para Firefox<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%C2%BFQue_es_Web_Developer\"><\/span>\u00bfQu\u00e9 es Web Developer?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Web Developer es una extensi\u00f3n realizada por Chris Pederik que <strong>ayuda en gran medida a realizar y revisar tareas de dise\u00f1o web y SEO<\/strong> principalmente. Est\u00e1 distribuida como GNU \u201cGeneral Public License\u201d que la convierte en una herramienta totalmente gratuita y de Open Source.<\/p>\n\n\n\n<p>Para entender qu\u00e9 es Web Developer y su funcionamiento, esta captura realizada de la propia extensi\u00f3n de Google Chrome nos resume en gran medida su funci\u00f3n.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"744\" height=\"229\" src=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/web-developer-que-es.jpg\" alt=\"como usar web developer tutorial\" class=\"wp-image-321\" srcset=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/web-developer-que-es.jpg 744w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/web-developer-que-es-300x92.jpg 300w\" sizes=\"auto, (max-width: 744px) 100vw, 744px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Como_usar_Web_Developer_tutorial_en_Espanol\"><\/span>C\u00f3mo usar Web Developer, tutorial en Espa\u00f1ol<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Esta herramienta <strong>dispone de 10 pesta\u00f1as<\/strong> que nos hacen la vida mucho m\u00e1s f\u00e1cil. Las pesta\u00f1as que existen actualmente y que ser\u00e1n explicadas a lo largo de este art\u00edculo est\u00e1n divididos en los siguientes grupos.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Deshabilitar\"><\/span>Deshabilitar<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Cuando buscamos fallos o mejoras en una web, la pesta\u00f1a deshabilitar de Web Development puede servirnos de gran ayuda. Una de esas opciones m\u00e1s funcionales las podemos encontrar con el \u00abDisable JavaScript\u00bb que nos har\u00e1 saber todo lo que necesitamos sobre el JavaScript que est\u00e1 implantado en un sitio web.<\/p>\n\n\n\n<p>La <strong>opci\u00f3n de <em>Disable <\/em>JavaScript<\/strong> est\u00e1 formada por:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Disable JavaScript &#8211; Desactivar JavaScript<\/p><p>Disable Notifications &#8211; Desactivar Notificaciones<\/p><p>Disable Plugins &#8211; Desactivar Plugins<\/p><p>Disable Popups &#8211; Desactivar Popups<\/p><p>Reset Disable Features &#8211; Resetear<\/p><\/blockquote>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"777\" height=\"95\" src=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/como-usar-web-developer-en-deshabilitar.jpg\" alt=\"como-usar-web-developer-en-deshabilitar\" class=\"wp-image-322\" srcset=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/como-usar-web-developer-en-deshabilitar.jpg 777w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/como-usar-web-developer-en-deshabilitar-300x37.jpg 300w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/como-usar-web-developer-en-deshabilitar-768x94.jpg 768w\" sizes=\"auto, (max-width: 777px) 100vw, 777px\" \/><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\">Vista de la ubicaci\u00f3n de Disable JavaScript<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cookies\"><\/span>Cookies<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Aunque pocas personas le dan importancia a esta pesta\u00f1a, puede servir de gran utilidad para saber si nuestra competencia o nuestra propia web est\u00e1 correctamente en funcionamiento y coordinada con otras herramientas de recopilaci\u00f3n de datos como Analytics, eliminando las cookies que tienes existentes o a\u00f1adiendo una Cookie t\u00fa mismo.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Disable Cookies &#8211; Desactivar Cookies<\/p><p>Delete Domain Cookies &#8211; Desactivar Cookies de Dominio<\/p><p>Delete Patch Cookies &#8211; Desactivar Cookies Patch<\/p><p>Delete Sessions Cookies &#8211; Desactivar Cookies de Sesi\u00f3n<\/p><p>View Cookie Information &#8211; Ver Informaci\u00f3n de las Cookies<\/p><\/blockquote>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"782\" height=\"103\" src=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/como-usar-web-developer-en-cookies.jpg\" alt=\"como usar web developer\" class=\"wp-image-324\" srcset=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/como-usar-web-developer-en-cookies.jpg 782w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/como-usar-web-developer-en-cookies-300x40.jpg 300w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/como-usar-web-developer-en-cookies-768x101.jpg 768w\" sizes=\"auto, (max-width: 782px) 100vw, 782px\" \/><\/figure><\/div>\n\n\n\n<p>Pero espera, eso no termina aqu\u00ed, como dije, puedes ver todas las cookies que obtienen de ti como os muestro a continuaci\u00f3n. Un ejemplo de ello es la captura de<strong> c\u00f3mo recogen mis datos en el sitio web<\/strong>. Aparece un listado completo de todas las cookies que est\u00e1n recogiendo una detr\u00e1s de otra con esta estructura.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"94\" src=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/cookies-en-web-developer.jpg\" alt=\"\" class=\"wp-image-327\" srcset=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/cookies-en-web-developer.jpg 768w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/cookies-en-web-developer-300x37.jpg 300w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Ajustes en Web Developer  sobre Cookies<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"633\" height=\"309\" src=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/usar-web-developer-cookies.jpg\" alt=\"cookies al usar web developer\" class=\"wp-image-325\" srcset=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/usar-web-developer-cookies.jpg 633w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/usar-web-developer-cookies-300x146.jpg 300w\" sizes=\"auto, (max-width: 633px) 100vw, 633px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Vista de Cookies que recoge el sitio web<\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"CSS\"><\/span>CSS<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Saber c\u00f3mo usar Web Developer puede quitarle el poder al estilo de la p\u00e1gina web y adentrarse en un aspecto inimaginable, <strong>\u00bfQu\u00e9 har\u00edamos sin el CSS?<\/strong> Un ejemplo de ello es lo que vais a ver a continuaci\u00f3n con nuestra propia y maravillosa home donde promocionamos nuestros servicios como <a href=\"https:\/\/birdcom.es\/\" target=\"_blank\" rel=\"noreferrer noopener\">agencia de marketing digital en Zaragoza<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"477\" src=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/como-usar-web-developer-css-1024x477.jpg\" alt=\"\" class=\"wp-image-330\" srcset=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/como-usar-web-developer-css-1024x477.jpg 1024w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/como-usar-web-developer-css-300x140.jpg 300w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/como-usar-web-developer-css-768x358.jpg 768w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/como-usar-web-developer-css.jpg 1313w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">CSS Antes de usar Web Developer<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"779\" height=\"140\" src=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/deshabilitar-css-con-web-developer.jpg\" alt=\"deshabilitar css con web developer\" class=\"wp-image-332\" srcset=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/deshabilitar-css-con-web-developer.jpg 779w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/deshabilitar-css-con-web-developer-300x54.jpg 300w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/deshabilitar-css-con-web-developer-768x138.jpg 768w\" sizes=\"auto, (max-width: 779px) 100vw, 779px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\"> Ajustes en Web Developer sobre CSS <\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/web-developer-como-usar-deshabilitar-css-1024x451.jpg\" alt=\"web developer como usar deshabilitar css\" class=\"wp-image-334\" width=\"363\" height=\"159\" srcset=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/web-developer-como-usar-deshabilitar-css-1024x451.jpg 1024w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/web-developer-como-usar-deshabilitar-css-300x132.jpg 300w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/web-developer-como-usar-deshabilitar-css-768x338.jpg 768w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/web-developer-como-usar-deshabilitar-css.jpg 1323w\" sizes=\"auto, (max-width: 363px) 100vw, 363px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">CSS despu\u00e9s de usar Web Developer<\/p>\n<\/div>\n<\/div>\n\n\n\n<p>Bueno, aun as\u00ed tiene un estilo Vintage como los comienzos de Google, usar Web Developer puede ser divertido, lo acabamos de ver. Por otro lado todas las utilidades de esta pesta\u00f1a CSS de Web Developer son:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Disable All Styles &#8211; Deshabilitar todos los estilos<\/p><p>Disable Browser Default Styles &#8211; Deshabilitar los estilos predeterminados del navegador<\/p><p>Disable Embedded Styles &#8211; Deshabilitar estilos incrustados<\/p><p>Disable Inline Styles &#8211; Deshabilitar estilos en l\u00ednea<\/p><p>Disable Linked Style Sheets &#8211; Deshabilitar hojas de estilo vinculadas<\/p><p>Disable Print Styles &#8211; Desactivar estilos de impresi\u00f3n<\/p><\/blockquote>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Display Handheld Styles &#8211; Mostrar estilos de dispositivos port\u00e1tiles<\/p><p>Display Print Styles &#8211; Mostrar estilos de impresi\u00f3n<\/p><p>Edit CSS &#8211; Editar CSS<\/p><p>Reload Linked Style Sheets &#8211; Recargar hojas de estilo vinculadas<\/p><p>Use Border Box Model &#8211; Usar modelo de cuadro de borde<\/p><p>View CSS &#8211; Ver CSS<\/p><\/blockquote>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"772\" height=\"136\" src=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/ajustes-css-web-developer-como-usar.jpg\" alt=\"ajustes css web developer como usar\" class=\"wp-image-337\" srcset=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/ajustes-css-web-developer-como-usar.jpg 772w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/ajustes-css-web-developer-como-usar-300x53.jpg 300w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/ajustes-css-web-developer-como-usar-768x135.jpg 768w\" sizes=\"auto, (max-width: 772px) 100vw, 772px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Formularios\"><\/span>Formularios<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Si no sabes c\u00f3mo est\u00e1 estructurado un formulario puedes adentrarte con esta extensi\u00f3n<strong> aplicando ajustes que te desvelar\u00e1n el secreto<\/strong> de todo lo que pueda esconder una p\u00e1gina de contacto.<\/p>\n\n\n\n<p>No es la funci\u00f3n m\u00e1s interesante de todas pero es una funci\u00f3n a tener en cuenta, adem\u00e1s de poder ver toda la informaci\u00f3n se puede realizar un vistazo r\u00e1pido a cualquier formulario con la opci\u00f3n \u00abDisplay Form Details\u00bb<\/p>\n\n\n\n<div class=\"wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"778\" height=\"206\" src=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/formulario-web-developer-ajustes.jpg\" alt=\"\" class=\"wp-image-374\" srcset=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/formulario-web-developer-ajustes.jpg 778w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/formulario-web-developer-ajustes-300x79.jpg 300w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/formulario-web-developer-ajustes-768x203.jpg 768w\" sizes=\"auto, (max-width: 778px) 100vw, 778px\" \/><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\">Ajustes en Web Developer sobre formulario<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"493\" height=\"459\" src=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/formulario-de-contacto-web-developer.jpg\" alt=\"\" class=\"wp-image-375\" srcset=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/formulario-de-contacto-web-developer.jpg 493w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/formulario-de-contacto-web-developer-300x279.jpg 300w\" sizes=\"auto, (max-width: 493px) 100vw, 493px\" \/><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\">Vista del formulario<\/p>\n<\/div>\n<\/div>\n\n\n\n<p>Como hemos visto podemos<strong> ver toda la estructura de un formulario con bastante facilidad<\/strong>. Aunque esas no sean todas las opciones que tiene esta herramienta es verdaderamente \u00fatil en algunos casos.<\/p>\n\n\n\n<p>Las opciones que tiene esta pesta\u00f1a de la extensi\u00f3n de Google Chrome Web Developer son las siguientes.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Check All Checkboxes &#8211; Marque todas las casillas de verificaci\u00f3n<\/p><p>Uncheck All Checkboxes &#8211; Desmarque todas las casillas de verificaci\u00f3n<\/p><p>Clear Form Fields &#8211; Campos de formulario claros<\/p><p>Clear Radio Buttons &#8211; Botones de radio claros<\/p><p>Convert Form GETs To POSTs &#8211; Convertir formularios GET en POST<\/p><p>Convert Form POSTs To GETs &#8211; Convertir formularios POST en GET<\/p><p>Convert Select Elements To Text Inputs &#8211; Convertir elementos seleccionados en entradas de texto<\/p><p>Convert Text Inputs To Textareas &#8211; Convertir entradas de texto en \u00e1reas de texto<\/p><p>Display Form Details &#8211; Mostrar detalles del formulario<\/p><p>Display Passwords &#8211; Mostrar contrase\u00f1as<\/p><\/blockquote>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Enable Auto Completion &#8211; Habilitar la finalizaci\u00f3n autom\u00e1tica<\/p><p>Enable Form Fields &#8211; Habilitar campos de formulario<\/p><p>Expand Select Elements &#8211; Expandir Seleccionar elementos<\/p><p>Make Form Fields Writable &#8211; Hacer que los campos de formulario se puedan escribir<\/p><p>Outline Form Fields Without Label &#8211; Campos de formulario de esquema sin etiqueta<\/p><p>Populate Form Fields &#8211; Rellenar campos de formulario<\/p><p>Remove Form Validation &#8211; Eliminar validaci\u00f3n de formulario<\/p><p>Remove Maximum Lengths &#8211; Eliminar longitudes m\u00e1ximas<\/p><p>View Form Information &#8211; Ver informaci\u00f3n del formulario<\/p><\/blockquote>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Imagenes\"><\/span>Im\u00e1genes<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Aqu\u00ed hay opciones muy muy interesantes, dejando de lado otras extensiones donde tambi\u00e9n te muestran datos de im\u00e1genes en sitios web, saber c\u00f3mo usar Web Developer te permite realizar lo mismo en un tiempo r\u00e9cord para tareas de SEO y dise\u00f1o web.<\/p>\n\n\n\n<p>Para ello vamos a realizar este ejemplo muy simple <strong>mostrando la URL de la imagen y su dimensi\u00f3n<\/strong> respecto al tama\u00f1o, si quieres saber como <a href=\"https:\/\/birdcom.es\/blog\/reducir-el-peso-de-una-imagen-nivel-leyenda\/\" target=\"_blank\" rel=\"noreferrer noopener\">reducir el peso de una imagen <\/a>no dudes en averiguarlo \u00a1impresionante!<\/p>\n\n\n\n<div class=\"wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"776\" height=\"202\" src=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/imagenes-web-developer.jpg\" alt=\"\" class=\"wp-image-381\" srcset=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/imagenes-web-developer.jpg 776w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/imagenes-web-developer-300x78.jpg 300w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/imagenes-web-developer-768x200.jpg 768w\" sizes=\"auto, (max-width: 776px) 100vw, 776px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Ajustes de im\u00e1genes en Web Developer<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"730\" height=\"526\" src=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/imagenes-web-developer-ajustes.jpg\" alt=\"imagenes web developer ajustes\" class=\"wp-image-382\" srcset=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/imagenes-web-developer-ajustes.jpg 730w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/imagenes-web-developer-ajustes-300x216.jpg 300w\" sizes=\"auto, (max-width: 730px) 100vw, 730px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Vista con ajustes en im\u00e1genes por Web Developer<\/p>\n<\/div>\n<\/div>\n\n\n\n<p>Es de gran utilidad, estas opciones permiten una <strong>revisi\u00f3n r\u00e1pida y completa sobre las im\u00e1genes<\/strong> que est\u00e1s viendo en la p\u00e1gina web e incluso se podr\u00eda a\u00f1adir que nos mostrar\u00e1 el \u00abalt\u00bb de las im\u00e1genes entre otras muchas opciones como las que muestro a continuaci\u00f3n.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Disable Images &#8211; Desactivar im\u00e1genes<\/p><p>Display Alt Attributes &#8211; Mostrar atributos alternativos<\/p><p>Display Image Dimensions &#8211; Dimensiones de la imagen de visualizaci\u00f3n<\/p><p>Display Image Paths &#8211; Mostrar rutas de imagen<\/p><p>Find Broken Images &#8211; Encontrar im\u00e1genes rotas<\/p><p>Hide Background Images &#8211; Ocultar im\u00e1genes de fondo<\/p><p>Hide Images &#8211; Ocultar im\u00e1genes<\/p><p>Make Images Full Size &#8211; Hacer im\u00e1genes a tama\u00f1o completo<\/p><p>Make Images Invisible &#8211; Hacer que las im\u00e1genes sean invisibles<\/p><p>Outline All Images &#8211; Esquema de todas las im\u00e1genes<\/p><\/blockquote>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Outline Background Images &#8211; Esquema de im\u00e1genes de fondo<\/p><p>Outline Images With Adjusted Dimensions &#8211; Im\u00e1genes de contorno con dimensiones ajustadas<\/p><p>Outline Images With Empty Alt Attribute &#8211; Im\u00e1genes de contorno con atributo Alt vac\u00edo<\/p><p>Outline Images With Oversized Dimensions &#8211; Im\u00e1genes de contorno con dimensiones de gran tama\u00f1o<\/p><p>Outline Images Without Alt Attributes &#8211; Im\u00e1genes de contorno sin atributos Alt<\/p><p>Outline Images Without Dimensions &#8211; Im\u00e1genes de contorno sin dimensiones<\/p><p>Reload Images &#8211; Recargar im\u00e1genes<\/p><p>Replace Images With Alt Attributes &#8211; Reemplazar im\u00e1genes con atributos Alt<\/p><p>View Image Information &#8211; Ver informaci\u00f3n de la imagen<\/p><\/blockquote>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Informacion_General\"><\/span>Informaci\u00f3n General<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Saber c\u00f3mo usar Web Developer en esta secci\u00f3n puede ayudarte en muchas tareas SEO. Se trata de una de mis preferidas y que uso diariamente para<strong> analizar a la competencia<\/strong> y romper as\u00ed los esquemas de posicionamiento SEO logrando superarles con una correcta estructura de encabezados &lt;H&gt;.<\/p>\n\n\n\n<div class=\"wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"773\" height=\"221\" src=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/Informacion-en-Web-Developer.jpg\" alt=\"\" class=\"wp-image-388\" srcset=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/Informacion-en-Web-Developer.jpg 773w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/Informacion-en-Web-Developer-300x86.jpg 300w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/Informacion-en-Web-Developer-768x220.jpg 768w\" sizes=\"auto, (max-width: 773px) 100vw, 773px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Ajustes en Web Developer para mostrar &lt;H&gt;<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"844\" height=\"481\" src=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/estructura-web-con-web-developer.jpg\" alt=\"\" class=\"wp-image-389\" srcset=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/estructura-web-con-web-developer.jpg 844w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/estructura-web-con-web-developer-300x171.jpg 300w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/estructura-web-con-web-developer-768x438.jpg 768w\" sizes=\"auto, (max-width: 844px) 100vw, 844px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Vista de la estructura web<\/p>\n<\/div>\n<\/div>\n\n\n\n<p>Simplemente r\u00e1pido y eficaz para analizar esas web en las que quieres saber c\u00f3mo han estructurado su contenido en una p\u00e1gina o art\u00edculo que rankea una KW en Google, simplemente maravilloso y ahorra mucho tiempo.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Display Abbreviations &#8211; Mostrar abreviaturas<\/p><p>Display Access Keys &#8211; Teclas de acceso a la pantalla<\/p><p>Display Anchors &#8211; Anclas de visualizaci\u00f3n<\/p><p>Display ARIA Roles &#8211; Mostrar roles ARIA<\/p><p>Display Div Dimensions &#8211; Mostrar dimensiones div<\/p><p>Display Div Order &#8211; Mostrar orden div<\/p><p>Display Element Information &#8211; Mostrar informaci\u00f3n del elemento<\/p><p>Display Id &amp; Class Details &#8211; ID de pantalla y detalles de la clase<\/p><p>Display Link Details &#8211; Mostrar detalles del enlace<\/p><p>Display Objet Information &#8211; Mostrar informaci\u00f3n de objeto<\/p><p>Display Stack Levels &#8211; Mostrar niveles de pila<\/p><p>Display Tab Index &#8211; \u00cdndice de la pesta\u00f1a de visualizaci\u00f3n<\/p><\/blockquote>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Display Table Depth &#8211; Profundidad de la mesa de visualizaci\u00f3n<\/p><p>Display Table Information &#8211; Mostrar informaci\u00f3n de la tabla<\/p><p>Display Title Atributes &#8211; Mostrar atributos de t\u00edtulo<\/p><p>Display Topographic Information &#8211; Mostrar informaci\u00f3n topogr\u00e1fica<\/p><p>Find Duplicate Ids &#8211; Encontrar ID duplicadas<\/p><p>View Anchor Information &#8211; Ver informaci\u00f3n del ancla<\/p><p>View Color Information &#8211; Ver informaci\u00f3n de color<\/p><p>View Document Outline &#8211; Ver esquema del documento<\/p><p>View JavaScript &#8211; Ver JavaScript<\/p><p>View Link Information &#8211; Ver informaci\u00f3n del enlace<\/p><p>Vire Meta Tag Information &#8211; Informaci\u00f3n de la metaetiqueta de Vire<\/p><p>View Response Headers &#8211; Ver encabezados de respuesta<\/p><\/blockquote>\n<\/div>\n<\/div>\n\n\n\n<p>Existen miles de extensiones para Google Chrome, algunas de ellas te muestran el color por el que pasa el rat\u00f3n o sirven como regla para ver las dimensiones y poder ajustar perfectamente una imagen. Para lo primero Web Developer est\u00e1 un poco incompleto pero que decirte, medir mide de maravilla y os lo vamos a ense\u00f1ar.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Diverso\"><\/span>Diverso<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Como bien dice el nombre de esta pesta\u00f1a, saber c\u00f3mo usar Web Developer nos<strong> permite ahorrar m\u00e1s extensiones de las que tendr\u00edamos de forma habitual<\/strong>, un ejemplo de ello es el uso de la regla de esta extensi\u00f3n de Chrome como en el ejemplo que os pongo con las capturas de Web Developer.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/ajustes-web-developer-medidas.jpg\" alt=\"ajustes web developer medidas\" class=\"wp-image-391\" width=\"594\" height=\"104\" srcset=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/ajustes-web-developer-medidas.jpg 774w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/ajustes-web-developer-medidas-300x52.jpg 300w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/ajustes-web-developer-medidas-768x134.jpg 768w\" sizes=\"auto, (max-width: 594px) 100vw, 594px\" \/><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\">Ajustes en contorno de Web Developer<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"264\" height=\"475\" src=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/ejemplo-medida-de-imagen-con-web-developer.jpg\" alt=\"\" class=\"wp-image-393\" srcset=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/ejemplo-medida-de-imagen-con-web-developer.jpg 264w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/ejemplo-medida-de-imagen-con-web-developer-167x300.jpg 167w\" sizes=\"auto, (max-width: 264px) 100vw, 264px\" \/><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\">Midi\u00e9ndome en la web con Web Developer<\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Contorno\"><\/span>Contorno<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>No es de extra\u00f1ar que algunas extensiones tengan limitaciones, en esta por ejemplo algunos fallos son el de lograr obtener un color y otro de ellos no mostrar los enlaces que son dofollow o unfollow o al menos no lo tengo sabido, pero aun con todo eso, si nos ayuda a detectarlos. <\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"776\" height=\"154\" src=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/contorno-ajustes-web-developer.jpg\" alt=\"\" class=\"wp-image-474\" srcset=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/contorno-ajustes-web-developer.jpg 776w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/contorno-ajustes-web-developer-300x60.jpg 300w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/contorno-ajustes-web-developer-768x152.jpg 768w\" sizes=\"auto, (max-width: 776px) 100vw, 776px\" \/><\/figure><\/div>\n\n\n\n<p>Ajustes de contorno en web developer<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"507\" height=\"350\" src=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/senalar-enlaces-en-web-developer.jpg\" alt=\"\" class=\"wp-image-475\" srcset=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/senalar-enlaces-en-web-developer.jpg 507w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/senalar-enlaces-en-web-developer-300x207.jpg 300w\" sizes=\"auto, (max-width: 507px) 100vw, 507px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Enlaces salientes de nuestra web<\/p>\n<\/div>\n<\/div>\n\n\n\n<p>Las opciones dentro de contorno en Web Developer en Espa\u00f1ol son:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Outline Absolute Positioned Elements &#8211; Esquema de elementos posicionados absolutos<\/p><p>Outline Block Level Elements &#8211; Elementos de nivel de bloque de l\u00ednea<\/p><p>Outline Deprecated Elements &#8211; Esquema de elementos obsoletos<\/p><p>Outline External Links &#8211; Enlaces externos de fuera<\/p><p>Outline Fixed Positioned Elements &#8211; Esquema de elementos de posici\u00f3n fija<\/p><p>Outline Floated Elements  &#8211; Esquema de elementos flotantes<\/p><p>Outline Frames &#8211; Marcos de contorno<\/p><\/blockquote>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Outline Headings &#8211; Encabezados de esquema<\/p><p>Outline Non-Secure Elements &#8211; Esquema de elementos no seguros<\/p><p>Outline Relative Positioned Elements &#8211; Esquema de elementos de posici\u00f3n relativa<\/p><p>Outline Table Captions &#8211; Leyendas de la tabla de esquema<\/p><p>Outline Table Cells &#8211; Esquema de celdas de la tabla<\/p><p>Outline Table &#8211; Tabla de esquema<\/p><p>Show Element Tag Names &#8211; Mostrar nombres de etiquetas de elementos<\/p><\/blockquote>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Redimension\"><\/span>Redimensi\u00f3n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>El famoso \u00abresponsive\u00bb es una tarea obligatoria que debe estar operativa en el sitio web. Web Developer nos permite <strong>saber en qu\u00e9 dimensiones estamos trabajando<\/strong> y nos puede mostrar c\u00f3mo se ver\u00e1 en los diferentes dispositivos con sus medidas.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"803\" height=\"95\" src=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/redimension-en-web-developer.jpg\" alt=\"\" class=\"wp-image-496\" srcset=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/redimension-en-web-developer.jpg 803w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/redimension-en-web-developer-300x35.jpg 300w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/redimension-en-web-developer-768x91.jpg 768w\" sizes=\"auto, (max-width: 803px) 100vw, 803px\" \/><\/figure><\/div>\n\n\n\n<p class=\"has-text-align-center\">Ajustes responsive en Web Developer<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"695\" height=\"756\" src=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/responsive-web-developer.jpg\" alt=\"\" class=\"wp-image-497\" srcset=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/responsive-web-developer.jpg 695w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/responsive-web-developer-276x300.jpg 276w\" sizes=\"auto, (max-width: 695px) 100vw, 695px\" \/><figcaption>Comprueba si es tu web responsive<\/figcaption><\/figure><\/div>\n<\/div>\n<\/div>\n\n\n\n<p>En Birdcom lo hemos comprobado y tenemos a la perfecci\u00f3n cada una de las medidas, te invitamos a que lo compruebes con nuestra web y veas c\u00f3mo se ven.<\/p>\n\n\n\n<p>No olvides que puedes usarlo con tu sitio web y mejorar tu apariencia web. \u00bfTienes una llamada a la acci\u00f3n? Aseg\u00farate que se ve en cualquier dispositivo, el usuario que lo visite lo agradecer\u00e1.<\/p>\n\n\n\n<p>Opciones en redimensi\u00f3n de Web Developer traducido al Espa\u00f1ol<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Display Window Size &#8211; Tama\u00f1o de la ventana de visualizaci\u00f3n<\/p><p>Resize Window &#8211; Cambiar el tama\u00f1o de la ventana<\/p><p>1024&#215;768<\/p><\/blockquote>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Edit Resize Dimensions &#8211; Editar dimensiones de cambio de tama\u00f1o<\/p><p>View Responsive Layouts &#8211; Ver dise\u00f1os adaptables<\/p><\/blockquote>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Herramientas\"><\/span>Herramientas<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Aunque lo que voy a recomendar a continuaci\u00f3n sale totalmente de Web Developer si es verdad que es de gran utilidad para los datos estructurados. Desde Web Developer puedes acceder directamente a la herramienta de Google sobre datos estructurados, un puntazo por parte de esta extensi\u00f3n.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"776\" height=\"200\" src=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/herrameintas-web-developer.jpg\" alt=\"herramientas en web developer\" class=\"wp-image-503\" srcset=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/herrameintas-web-developer.jpg 776w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/herrameintas-web-developer-300x77.jpg 300w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/herrameintas-web-developer-768x198.jpg 768w\" sizes=\"auto, (max-width: 776px) 100vw, 776px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"551\" height=\"239\" src=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/datos-estructurados-google.jpg\" alt=\"\" class=\"wp-image-500\" srcset=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/datos-estructurados-google.jpg 551w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/datos-estructurados-google-300x130.jpg 300w\" sizes=\"auto, (max-width: 551px) 100vw, 551px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Opciones\"><\/span>Opciones<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Llegamos al tramo final de c\u00f3mo usar Web Developer con todas sus funciones en espa\u00f1ol y aunque te guste, esto termina aqu\u00ed, en esta \u00faltima pesta\u00f1a podr\u00e1s resetear todos los ajustes anteriormente realizados para volver a la normalidad.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"773\" height=\"89\" src=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/Opciones-Web-Developer.jpg\" alt=\"\" class=\"wp-image-504\" srcset=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/Opciones-Web-Developer.jpg 773w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/Opciones-Web-Developer-300x35.jpg 300w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/Opciones-Web-Developer-768x88.jpg 768w\" sizes=\"auto, (max-width: 773px) 100vw, 773px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Mejores_utilidades_para_saber_usar_Web_Developer\"><\/span>Mejores utilidades para saber usar Web Developer<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Como_ver_CSS_con_Web_Developer\"><\/span>C\u00f3mo ver CSS con Web Developer <span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Accede a la pesta\u00f1a de <strong>CSS &gt; View CSS<\/strong> para encontrar todo el existente en esa p\u00e1gina web, poder mejorar, depurar y lograr mejores puntuaciones de rendimiento en el momento de aumentar la velocidad web o WPO de tu sitio web.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"774\" height=\"130\" src=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/css-web-developer.jpg\" alt=\"\" class=\"wp-image-505\" srcset=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/css-web-developer.jpg 774w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/css-web-developer-300x50.jpg 300w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/css-web-developer-768x129.jpg 768w\" sizes=\"auto, (max-width: 774px) 100vw, 774px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Como_ver_anchor_text_con_Web_Developer\"><\/span>C\u00f3mo ver anchor text con Web Developer  <span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Sabemos que todo suma para el SEO y los anchor text de las im\u00e1genes no se escapan, controla y revisalo r\u00e1pidamente dirigi\u00e9ndote a<strong> Information &gt; Display Anchors<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"769\" height=\"219\" src=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/display-anchor-web-developer.jpg\" alt=\"\" class=\"wp-image-506\" srcset=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/display-anchor-web-developer.jpg 769w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/display-anchor-web-developer-300x85.jpg 300w\" sizes=\"auto, (max-width: 769px) 100vw, 769px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Como_ver_los_encabezados_de_una_pagina_web\"><\/span>Como ver los encabezados de una pagina web<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>A\u00fan con la cantidad de profesionales que existen en el mundo SEO y el dise\u00f1o web sigo viendo errores que no deber\u00edan ocurrir en el momento de asignar encabezados dentro del contenido de forma l\u00f3gica y controlada, \u00a1revisa tu web y mej\u00f3rala! Puedes hacerlo en <strong>Information &gt; View Document Outline<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"774\" height=\"221\" src=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/encabezados-web-developer.jpg\" alt=\"\" class=\"wp-image-507\" srcset=\"https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/encabezados-web-developer.jpg 774w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/encabezados-web-developer-300x86.jpg 300w, https:\/\/birdcom.es\/blog\/wp-content\/uploads\/2021\/11\/encabezados-web-developer-768x219.jpg 768w\" sizes=\"auto, (max-width: 774px) 100vw, 774px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Descargar_Web_Developer\"><\/span>Descargar Web Developer<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Actualmente est\u00e1 <strong>disponible para descargar Web Developer Toolbar en Chrome, Firefox y \u00d3pera<\/strong>, un gran abanico de compatibilidades que nos permite usar esta herramienta sin ning\u00fan problema. Os dejamos los enlaces directos de Chrome y Firefox:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Web_Developer_para_Google_Chrome\"><\/span>Web Developer para Google Chrome<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><a href=\"https:\/\/chrispederick.com\/work\/web-developer\/download\/chrome\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Descarga la versi\u00f3n de Chrome<\/a> para comenzar a utilizar esta estupenda extesi\u00f3n.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Web_Developer_para_Firefox\"><\/span>Web Developer para Firefox<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><a href=\"https:\/\/chrispederick.com\/work\/web-developer\/download\/firefox\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Descarga la versi\u00f3n de Firefox<\/a>, la interfaz puede aparecer diferente a esta gu\u00eda de Web Developer en espa\u00f1ol pero seguro que te sirve igual.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Esta herramienta es usada por miles de profesionales, permite realizar reconocimientos r\u00e1pidos sobre una web y es ideal para dise\u00f1adores web y SEOs, de ah\u00ed su importancia por saber c\u00f3mo usar Web Developer, una extensi\u00f3n que es de las m\u00e1s completas y \u00fatiles. \u00bfQu\u00e9 es Web Developer? Web Developer es una extensi\u00f3n realizada por Chris &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"\u00bfC\u00f3mo usar Web Developer? \u00a1Tutorial en Espa\u00f1ol!\" class=\"read-more button\" href=\"https:\/\/birdcom.es\/blog\/como-usar-web-developer-tutorial-en-espanol\/#more-319\" aria-label=\"M\u00e1s en \u00bfC\u00f3mo usar Web Developer? \u00a1Tutorial en Espa\u00f1ol!\">Leer m\u00e1s<\/a><\/p>\n","protected":false},"author":8,"featured_media":515,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-319","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-consejos-posicionamiento-seo","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-50","no-featured-image-padding"],"_links":{"self":[{"href":"https:\/\/birdcom.es\/blog\/wp-json\/wp\/v2\/posts\/319","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/birdcom.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/birdcom.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/birdcom.es\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/birdcom.es\/blog\/wp-json\/wp\/v2\/comments?post=319"}],"version-history":[{"count":0,"href":"https:\/\/birdcom.es\/blog\/wp-json\/wp\/v2\/posts\/319\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/birdcom.es\/blog\/wp-json\/wp\/v2\/media\/515"}],"wp:attachment":[{"href":"https:\/\/birdcom.es\/blog\/wp-json\/wp\/v2\/media?parent=319"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/birdcom.es\/blog\/wp-json\/wp\/v2\/categories?post=319"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/birdcom.es\/blog\/wp-json\/wp\/v2\/tags?post=319"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}