Ferramentas integradas para deseñadores, desenvolvedores e probadores web
Ademais da maioría dos fabricantes de navegadores que se centran no usuario de todos os días que buscan navegar pola web, tamén atenden aos desenvolvedores web, diseñadores e profesionais de garantía de calidade que axudan a construír as aplicacións e sitios que os usuarios acceden integrando ferramentas poderosas nos buscadores. eles mesmos.
Lonxe están os días en que as únicas ferramentas de programación e proba atopadas dentro dun navegador permítenlle ver o código fonte dunha páxina e nada máis. Os navegadores de hoxe permítenlle unha inmersión moito máis profunda facendo cousas como executar e depurar fragmentos de JavaScript, inspeccionar e editar elementos DOM, controlar o tráfico en rede en tempo real mentres se carga a aplicación ou a páxina para identificar cuellos de botella, analizando o rendemento de CSS, asegurando que o seu código é non usando demasiada memoria ou demasiados ciclos de CPU e moito máis. Desde unha perspectiva de proba, podes reproducir a forma na que unha aplicación ou páxina web renderizará en diferentes navegadores e en diferentes dispositivos e plataformas a través da maxia do deseño sensible e dos simuladores incorporados. A mellor parte é que podes facer todo isto sen ter que deixar o navegador.
Os tutoriales a seguir che levan a través de como acceder a estas ferramentas de desarrolladores en varios navegadores web populares.
Google Chrome
As ferramentas de desenvolvemento de Chrome permítenlle editar e eliminar o código, auditar compoñentes individuais para expoñer problemas de rendemento, simular diferentes pantallas de dispositivos, incluídos os que executan Android ou iOS e realizar outras funcións útiles.
- Fai clic no botón de menú principal de Chrome, marcado con tres liñas horizontais e situado na esquina superior dereita do navegador.
- Cando apareza o menú despregable, mova o cursor do rato sobre a opción Máis ferramentas .
- Debería aparecer agora un submenú. Selecciona a opción etiquetada como ferramentas para desenvolvedores . Tamén pode usar o seguinte atallo de teclado no canto deste elemento do menú: Chrome OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPCIÓN) + COMMAND + I )
- A interface de Chrome Developer Tools agora debería mostrarse, como se mostra nesta captura de pantalla de exemplo. Dependendo da túa versión de Chrome, o deseño inicial que ves pode ser un pouco diferente ao presentado aquí. O centro principal das ferramentas de desenvolvedor, normalmente situado na parte inferior ou dereita da pantalla, contén as seguintes lapelas.
Elementos: fornece a capacidade de inspeccionar CSS e código HTML e tamén editar CSS en tempo real, vendo os efectos dos seus cambios en tempo real.
Consola: a consola de JavaScript de Chrome permite a entrada de comando directo así como a depuración de diagnóstico.
Fontes: Permite depurar o código JavaScript mediante unha poderosa interface gráfica.
Rede: categoriza e exhibe información detallada sobre cada operación relacionada na aplicación ou páxina activa, incluídos os encabezados completos de solicitude e resposta, así como as métricas de tempo avanzadas.
Cronoloxía: permite unha análise aprofundada de todas as actividades que se realizan dentro do navegador no momento en que se inicia unha solicitude de carga de páxina ou aplicación. - Ademais destas seccións, tamén podes acceder ás seguintes ferramentas a través do ícono >> , situado á dereita da pestana Timeline .
Perfil: dividido en perfís de CPU e perfís de perfiles de Heap , ofrece un uso amplo de memoria e tempo de execución global da aplicación ou páxina activa.
Seguridade: destaca os problemas de certificado e outros problemas relacionados coa seguridade coa páxina activa ou a aplicación.
Recursos: Aquí é onde pode inspeccionar cookies, almacenamento local, caché de aplicacións e outras fontes de datos locais empregadas pola páxina ou aplicación actual.
Auditorías: ofrece maneiras de optimizar a páxina ou o tempo de carga e o desempeño xeral da aplicación. - O modo de dispositivo permítelle ver a páxina activa nun simulador que o fai case exactamente como aparecería nunha máis dunha ducia de dispositivos, incluídos varios coñecidos modelos de Android e iOS como o iPad, iPhone e Samsung Galaxy. Tamén se lle dá a capacidade de emular as resolucións de pantalla personalizadas para atender ás súas necesidades particulares de desenvolvemento ou probas. Para activar e desactivar o modo de dispositivo , seleccione a icona do teléfono móbil situada directamente á esquerda da pestana Elementos .
- Tamén pode personalizar a aparencia das ferramentas de desenvolvedor premendo no botón de menú representado por tres puntos colocados verticalmente e situados no extremo dereito das páxinas mencionadas. Desde este menú despregable, pode reposicionar o dock, amosar ou ocultar diferentes ferramentas, así como lanzar elementos máis avanzados, como un inspector de dispositivos. Verá que a propia interface de ferramentas dev é altamente personalizable a través das opcións que se atopan nesta sección.
mozilla Firefox
A sección de desenvolvedores web de Firefox inclúe ferramentas para deseñadores, desenvolvedores e probadores, como un editor de estilos e un eyedropper de píxel.
Lectura recomendada: as 25 mellores scripts de usuario de Greasemonkey e Tampermonkey
- Fai clic no botón do menú principal de Firefox, representado por tres liñas horizontais e situado na esquina superior dereita da xanela do navegador.
- Cando apareza o menú despregable, seleccione o ícono chamado Desenvolvedor . O menú Web Developer agora debería mostrarse, que contén as seguintes opcións. Notarás que a maioría dos elementos do menú teñen atallos de teclado asociados a eles.
Toggle Tools: mostra ou agocha a interface de ferramentas para desenvolvedores, normalmente situada na parte inferior da xanela do navegador. Atallo de teclado: Mac OS X ( ALT (OPTION) + COMMAND + I ), Windows ( CTRL + SHIFT + I )
Inspector: permítelle inspeccionar ou axustar CSS e código HTML na páxina activa, así como tamén nun dispositivo portátil mediante depuración remota. Atallo de teclado: Mac OS X ( ALT (OPTION) + COMMAND + C ), Windows ( CTRL + SHIFT + C )
Consola web: permite executar expresións de JavaScript na páxina activa e tamén revisar un conxunto diverso de datos rexistrados, incluídos avisos de seguridade, solicitudes de rede, mensaxes CSS e moito máis. Atallo de teclado: Mac OS X ( ALT (OPTION) + COMMAND + K ), Windows ( CTRL + SHIFT + K )
Depurador: O Depurador de JavaScript permítelle identificar e corrixir defectos establecendo puntos de interrupción, inspeccionando os nodos DOM, fontes externas de boxeo negro e moito máis. Como é o caso do inspector , esta característica tamén admite a depuración remota. Atallo de teclado: Mac OS X ( ALT (OPTION) + COMMAND + S ), Windows ( CTRL + SHIFT + S)
Editor de estilos: permítelle crear novas follas de estilo e incorporalas coa páxina web activa, ou editar as follas existentes e probar como os seus modificacións se renderizan nun navegador cun só clic. Atallo de teclado: Mac OS X, Windows ( SHIFT + F7 )
Rendemento: fornece un desglose detallado do rendemento de rede da páxina activa, os datos da taxa de fotogramas, o tempo e estado de execución de JavaScript, o flasheo de pintura e moito máis. Atallo de teclado: Mac OS X, Windows ( SHIFT + F5 )
Rede: mostra cada solicitude de rede iniciada polo navegador xunto co método correspondente, o dominio de orixe, o tipo, o tamaño eo tempo transcorrido. Atallo de teclado: Mac OS X ( ALT (OPTION) + COMMAND + Q ), Windows ( CTRL + SHIFT + Q )
Barra de ferramentas do programador: abre un intérprete interactivo de liña de comandos. Introduza axuda no intérprete para obter unha lista de todos os comandos dispoñibles e a súa sintaxe correcta. Atallo de teclado: Mac OS X, Windows ( SHIFT + F2 )
WebIDE: brinda a capacidade de crear e executar aplicacións web a través dun dispositivo real que executa o sistema operativo Firefox ou a través do Firefox OS Simulator. Atallo de teclado: Mac OS X, Windows ( SHIFT + F8 )
Consola de navegación : ofrece a mesma funcionalidade que a consola web (ver arriba). Non obstante, todos os datos que se devuelven son para toda a aplicación de Firefox (incluídas as extensións e as funcións a nivel do navegador) en vez de só a páxina web activa. Atallo de teclado: Mac OS X ( SHIFT + COMMAND + J ), Windows ( CTRL + SHIFT + J )
Vista de deseño sensible: permítelle visualizar instantáneamente unha páxina web en distintas resolucións, esquemas e tamaños de pantalla para imitar varios dispositivos, incluíndo tabletas e teléfonos intelixentes. Atallo de teclado: Mac OS X ( ALT (OPTION) + COMMAND + M ), Windows ( CTRL + SHIFT + M )
Eyedropper: mostra o código de cores hexadecimal para os píxeles seleccionados individualmente.
Scratchpad : permítelle escribir, editar, integrar e executar fragmentos do código JavaScript desde unha fiestra pop-out de Firefox. Atallo de teclado: Mac OS X, Windows ( SHIFT + F4 )
Fonte de páxina: a ferramenta de desenvolvemento orixinal baseada en navegador, esta opción simplemente mostra o código fonte dispoñible para a páxina activa. Atallo de teclado: Mac OS X ( COMMAND + U ), Windows ( CTRL + U )
Obter máis ferramentas: abre a colección de caixas de ferramentas de Desenvolvedor web no sitio web oficial de complementos de Mozilla, que contén unha ducia de extensións populares, como Firebug e Greasemonkey.
Microsoft Edge / Internet Explorer
Comunmente referido como F12 Developer Tools , unha homenaxe ao atallo de teclado que lanzou a interface desde versións anteriores de Internet Explorer, o dev toolet en IE11 e Microsoft Edge percorreu un longo camiño desde o seu inicio ao ofrecer un grupo moi útil monitores, depuradores, emuladores e compiladores on-the-fly.
- Fai clic no menú Máis accións , representado por tres puntos e situado na esquina superior dereita da xanela do navegador. Cando apareza o menú despregable, seleccione a opción marcada como F12 Developer Tools . Como xa mencionei, tamén podes acceder ás ferramentas a través do atallo de teclado F12 .
- A interface de desenvolvemento agora debería mostrarse, normalmente na parte inferior da xanela do navegador. Están dispoñibles as seguintes ferramentas, cada accesible premendo no seu respectivo encabezado de páxinas ou usando o atallo de teclado que o acompaña.
DOM Explorer: permítelle editar follas de estilo e HTML na páxina activa, representando os resultados modificados a medida que vaia. Utiliza a funcionalidade de IntelliSense para completar o código automático cando corresponda. Atallo de teclado: (CTRL + 1)
Consola: fornece a capacidade de enviar información de depuración, incluíndo contadores, temporizadores, trazos e mensaxes personalizadas a través dunha API integrada. Ademais, permite inxectar o código nunha páxina web activa e modificar os valores asignados a variables individuais en tempo real. Atallo de teclado: (CTRL + 2)
Depurador: permítelle definir puntos de interrupción e depurar o seu código mentres se executa, liña por liña se fose necesario. Atallo de teclado: (CTRL + 3)
Rede: mostra cada solicitude de rede iniciada polo navegador durante a carga e execución da páxina, incluíndo detalles do protocolo, tipo de contido, uso de ancho de banda e moito máis. Atallo de teclado: (CTRL + 4)
Rendemento: taxas de cadros de detalles, utilización da CPU e outras métricas relacionadas co rendemento para axudarche a acelerar os tempos de carga da páxina e outras actividades. Atallo de teclado: (CTRL + 5)
Memoria: axuda a illar e corrixir as fugas de memoria potenciais na páxina web actual mostrando unha liña de tempo de uso da memoria xunto con instantáneas de diferentes intervalos de tempo. Atallo de teclado: (CTRL + 6)
Emulación: mostra como se rendería a páxina activa en varias resolucións e tamaños de pantalla, emulando teléfonos intelixentes, tabletas e outros dispositivos. Tamén ofrece a posibilidade de modificar o axente de usuario e a orientación da páxina, así como simular distintas xeolocalizacións introducindo unha latitude e lonxitude. Atallo de teclado: (CTRL + 7) - Para mostrar a consola mentres dentro das outras ferramentas faga clic no botón cadrado cun soporte dereito dentro dela, situado na esquina superior dereita da interface de ferramentas de desenvolvemento.
- Para desacoplar, a interface de ferramentas do programador convértese nunha xanela separada, fai clic no botón representado por dous rectángulos en cascada ou usa o seguinte atallo de teclado: CTRL + P. Pode colocar as ferramentas de volta no seu lugar orixinal premendo CTRL + P por segunda vez.
Apple Safari (só VOS X)
O conxunto de ferramentas de dev diverso de Safari reflicte a gran comunidade de desarrolladores que utiliza unha Mac para o seu deseño e necesidades de programación. Ademais dunha potente consola e funcións tradicionais de rexistro e depuración, tamén se proporcionan un modo de deseño sensible e fácil de usar e unha ferramenta para crear as túas propias extensións do navegador.
- Faga clic en Safari no menú do navegador, situado na parte superior da pantalla. Cando apareza o menú despregable, seleccione Preferencias . Tamén pode usar o seguinte atallo de teclado no canto deste elemento do menú: COMMAND + COMMA (,)
- A interfaz de Preferencias de Safari agora debería mostrarse, superpondo a xanela do seu navegador. Fai clic no ícono Avanzado situado no extremo dereito do encabezado.
- As preferencias avanzadas agora deberían estar visibles. Na parte inferior desta pantalla hai unha opción chamada Mostrar Desenvolver menú na barra de menú , acompañada dunha caixa de verificación. Se non hai ningunha marca de verificación que se amose na caixa, faga clic nela para colocar unha alí.
- Pecha a interface de Preferencias premendo no "x" vermello que se atopa na esquina superior esquerda.
- Agora debería observar unha nova opción no menú do navegador denominado Desenvolver , situado entre Marcadores e Fiestra . Fai clic neste elemento do menú. Agora debería mostrarse un menú despregable que contén as seguintes opcións.
Abrir páxina con: Permítelle abrir a páxina web activa nun dos outros navegadores instalados actualmente no seu Mac.
Axente do usuario: permite seleccionar entre máis dunha ducia de valores de axentes de usuario predefinidos, incluídas varias versións de Chrome, Firefox e Internet Explorer, ademais de definir a súa propia cadea personalizada.
Introduza o Modo de Deseño Responsivo : Render a páxina actual como aparecería en varios dispositivos e en diferentes resolucións de pantalla.
Mostrar o inspector web: inicia a interface principal para as ferramentas dev de Safari, normalmente colocadas na parte inferior da pantalla do navegador e que contén as seguintes seccións: elementos , rede , recursos , cronogramas , depurador , almacenamento e consola .
Mostrar consola de erro: tamén inicia a interface de ferramentas de dev, directamente na páxina de consola onde se amosan erros, avisos e outros datos de rexistro de busca.
Mostrar fonte de páxina: abre a páxina Recursos , que mostra o código fonte da páxina activa categorizada por documento.
Mostrar recursos da páxina: Realiza a mesma función que a opción Mostrar a fonte de páxina .
Mostrar editor de fragmentos: abre unha nova ventá onde pode introducir código CSS e HTML, previsualizando a súa saída en marcha.
Mostrar Extension Builder: fornece a capacidade de crear ou editar extensións de Safari con CSS, HTML e JavaScript.
Amosar Timeline Recording: abre a páxina Timelines e comeza a mostrar solicitudes de rede, deseño e información de representación, así como a ejecución de JavaScript en tempo real.
Cachas baleiras: elimina toda a memoria caché actualmente almacenada no disco ríxido.
Desactivar Caches: deixa de Safari de caché para que todo o contido sexa recuperado do servidor despois de cada carga de páxina.
Deshabilitar imaxes: impide que as imaxes se mostren en todas as páxinas web.
Deshabilitar os estilos: ignora as propiedades CSS cando se carga unha páxina.
Deshabilitar JavaScript: restrinxe a ejecución de JavaScript en todas as páxinas.
Deshabilitar extensións: prohibe que se executen todas as extensións instaladas no navegador.
Deshabilitar os hacks específicos do sitio: se o Safari foi modificado para xestionar explícitamente as cuestións específicas da páxina web activa, esta opción bloqueará os cambios para que a páxina se carga como tería antes de que se introduzan estas modificacións.
Desactivar restricións de arquivos locais: permite que o navegador teña acceso aos ficheiros nos teus discos locais, unha acción que está restrinxida de forma predeterminada por motivos de seguridade.
Desactivar restricións de orixe cruzada: estas restricións póñense en funcionamento de forma predeterminada para evitar XSS e outros perigos potenciais. Non obstante, moitas veces necesitan estar temporalmente incapacitados para fins de desenvolvemento.
Permitir JavaScript desde o campo de busca intelixente: cando está activado, fornece a posibilidade de ingresar URL con javascript: incorporado directamente na barra de enderezos.
Trata os certificados SHA-1 como inseguros: os certificados SSL que utilizan o algoritmo SHA-1 son ampliamente considerados como desactualizados e vulnerables.