Eines d'eines integrades per a dissenyadors, desenvolupadors i testers web
A més de la majoria dels fabricants de navegadors que se centren en l'usuari quotidià que busquen navegar per la Web, també atenen els desenvolupadors web, els dissenyadors i els professionals de la garantia de qualitat que ajuden a construir les aplicacions i llocs que accedeixen aquests usuaris integrant poderoses eines directament als navegadors. ells mateixos.
Enrere han quedat els dies en què les úniques eines de programació i de prova que es troben en un navegador li permeten veure el codi font d'una pàgina i res més. Els navegadors d'avui us permeten fer una immersió molt més profunda fent coses com executar i esborrar fragments de JavaScript, inspeccionar i editar elements DOM, controlar el trànsit de la xarxa en temps real mentre s'aplica la vostra aplicació o pàgina per identificar colls d'ampolla, analitzar el rendiment de CSS, assegurar-vos que el vostre codi és no utilitzant massa memòria o massa cicles de CPU , i molt més. Des d'una perspectiva de prova, podeu reproduir la manera en què una aplicació o pàgina web es mostrarà en diferents navegadors, així com en diferents dispositius i plataformes a través de la màgia del disseny de resposta i simuladors incorporats. La millor part és que podeu fer tot això sense haver de deixar el navegador.
Els tutorials següents us expliquen com accedir a aquestes eines de desenvolupador en diversos navegadors web populars.
Google Chrome
Les eines de desenvolupador de Chrome us permeten editar i eliminar el codi, auditar components individuals per exposar els problemes de rendiment, simular diferents pantalles de dispositius, inclosos els que tenen Android o iOS i realitzar altres funcions útils.
- Feu clic al botó del menú principal de Chrome, marcada amb tres línies horitzontals i situada a l'extrem superior dret del navegador.
- Quan aparegui el menú desplegable, moveu el cursor del ratolí sobre l'opció Més eines .
- Hauria d'aparèixer un submenú. Seleccioneu l'opció anomenada Eines per a desenvolupadors . També podeu utilitzar la següent drecera de teclat en lloc d'aquest element del menú: Chrome OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPCIÓ) + COMMAND + I )
- Ara s'hauria de mostrar la interfície d'Eines per a desenvolupadors de Chrome, tal com es mostra a la captura de pantalla d'aquest exemple. Segons la vostra versió de Chrome, el disseny inicial que veieu pot ser lleugerament diferent del que es mostra aquí. El centre principal de les eines del desenvolupador, que normalment es troba a la part inferior o a la dreta de la pantalla, conté les pestanyes següents.
Elements: proporciona la possibilitat d'inspeccionar CSS i codi HTML, així com editar CSS on-the-fly, veure els efectes dels canvis en temps real.
Consola: la consola de JavaScript de Chrome permet l'entrada directa de comandes, així com la depuració de diagnòstic.
Fonts: us permet de depurar el codi JavaScript mitjançant una potent interfície gràfica.
Xarxa: classifica i mostra informació detallada sobre cada operació relacionada a l'aplicació o a la pàgina activa, incloent capçaleres completes de sol·licitud i resposta, així com mètriques de temps avançades.
Cronologia: permet una anàlisi en profunditat de totes les activitats que es produeixen dins del navegador quan s'inicia una sol·licitud de càrrega de pàgina o aplicació. - A més d'aquestes seccions, també podeu accedir a les següents eines a través de la icona >> , situat a la dreta de la pestanya Timeline .
Perfil: desglossat en les seccions de profilador de CPU i profilador de Heap , proporciona un ús complet de la memòria i un temps d'execució global de l'aplicació o la pàgina activa.
Seguretat: destaca els problemes de certificats i altres problemes relacionats amb la seguretat amb la pàgina o aplicació activa.
Recursos: Aquí podeu inspeccionar les galetes, l'emmagatzematge local, la memòria cau de l'aplicació i altres fonts locals de dades utilitzades per la pàgina web o l'aplicació actual.
Auditories: ofereix formes d'optimitzar el temps de càrrega o rendiment general d'una pàgina o d'una aplicació. - El mode del dispositiu us permet veure la pàgina activa en un simulador que la fa pràcticament exactament igual que apareixeria en una de més d'una dotzena de dispositius, inclosos diversos coneguts models d'Android i iOS, com ara l'iPad, l'iPhone i el Samsung Galaxy. També se li dóna la possibilitat d'emular les resolucions de pantalla personalitzades per adaptar-se a les seves necessitats de desenvolupament o proves. Per activar o desactivar el mode del dispositiu , seleccioneu la icona del telèfon mòbil que es troba directament a l'esquerra de la pestanya Elements .
- També podeu personalitzar l'aparença de les eines del desenvolupador fent clic al botó del menú representat per tres punts situats verticalment i situats al costat més amunt de les pestanyes esmentades. Des d'aquest menú desplegable, podeu reposicionar el moll, mostrar o amagar diferents eines, així com llançar elements més avançats, com ara un inspector de dispositius. Trobareu que la interfície d'eines dev és molt personalitzable a través de la configuració que es troba en aquesta secció.
Mozilla Firefox
La secció de desenvolupadors web de Firefox inclou eines per a dissenyadors, desenvolupadors i provadors, com ara un editor d'estils i un comptador d'etiquetes amb píxels.
Lectures recomanades: les scripts d'usuari de Top 25 Greasemonkey i Tampermonkey
- Feu clic al botó del menú principal de Firefox, representat per tres línies horitzontals i situat a l'extrem superior dret de la finestra del navegador.
- Quan aparegui el menú desplegable, seleccioneu la icona anomenada Desenvolupador . Ara es visualitzarà el menú del desenvolupador web , que contindrà les opcions següents. Notaràs que la majoria dels elements del menú tenen dreceres de teclat associades.
Canviar eines: mostra o oculta la interfície d'eines del desenvolupador, que normalment es troba a la part inferior de la finestra del navegador. Tecla de drecera: Mac OS X ( ALT (OPTION) + COMMAND + I ), Windows ( CTRL + SHIFT + I )
Inspector: us permet inspeccionar o modificar el codi CSS i HTML a la pàgina activa, així com a un dispositiu portàtil mitjançant depuració remota. Tecla de drecera: Mac OS X ( ALT (OPCIÓ) + COMMAND + C ), Windows ( CTRL + SHIFT + C )
Consola web: us permet executar expressions de JavaScript a la pàgina activa, així com revisar un conjunt divers de dades registrades, incloses advertències de seguretat, sol·licituds de xarxa, missatges CSS i molt més. Tecla de drecera: Mac US X ( ALT (OPTION) + COMMAND + K ), Windows ( CTRL + SHIFT + K )
Depurador: el Depurador de JavaScript us permet identificar i reparar els defectes establint els punts d'interrupció, la inspecció dels nodes DOM, les fonts externes de la guia negra i molt més. Com és el cas de l' inspector , aquesta característica també és compatible amb la depuració remota. Tecla de drecera: Mac OS X ( ALT (OPCIÓ) + COMMAND + S ), Windows ( CTRL + SHIFT + S)
Editor d'estils: us permet crear nous fulls d'estil i incorporar-los a la pàgina web activa, o editar els fulls existents i comprovar com els canvis es fan en un navegador amb només un clic. Tecla de drecera: Mac OS X, Windows ( SHIFT + F7 )
Rendiment: proporciona un desglossament detallat del rendiment de la xarxa de la pàgina activa, les dades de la velocitat de marcatge, el temps d'execució de JavaScript i l'estat, el flascó de pintura i molt més. Tecla de drecera: Mac OS X, Windows ( SHIFT + F5 )
Xarxa: enumera cada petició de xarxa iniciada pel navegador juntament amb el mètode corresponent, el domini d'origen, el tipus, la mida i el temps transcorregut. Tecla de drecera: Mac OS X ( ALT (OPTION) + COMMAND + Q ), Windows ( CTRL + SHIFT + Q )
Barra d'eines del desenvolupador: obre un intèrpret interactiu de línia d'ordres. Introduïu ajuda en l'intèrpret per obtenir una llista de totes les ordres disponibles i la seva pròpia sintaxi. Tecla de drecera: Mac OS X, Windows ( SHIFT + F2 )
WebIDE: proporciona la possibilitat de crear i executar aplicacions web a través d'un dispositiu real amb el sistema operatiu Firefox o a través del Firefox OS Simulator. Tecla de drecera: Mac OS X, Windows ( SHIFT + F8 )
Consola del navegador: proporciona la mateixa funcionalitat que la consola web (vegeu més amunt). Tanmateix, totes les dades retornades corresponen a tota la aplicació de Firefox (incloses les extensions i les funcions del navegador) a diferència de la pàgina web activa. Tecla de drecera: Mac OS X ( SHIFT + COMMAND + J ), Windows ( CTRL + SHIFT + J )
Vista de disseny sensible: us permet veure una pàgina web de manera instantània en diferents resolucions, dissenys i mides de pantalla per imitar diversos dispositius, inclosos els tauletes i els telèfons intel·ligents. Tecla de drecera: Mac OS X ( ALT (OPCIÓ) + COMMAND + M ), Windows ( CTRL + SHIFT + M )
Eyedropper: mostra el codi de color hexadecimal per a píxels seleccionats individualment.
Scratchpad : permet escriure, editar, integrar i executar fragments de codi JavaScript des d'una finestra emergent de Firefox. Tecla de drecera: Mac OS X, Windows ( SHIFT + F4 )
Origen de la pàgina: l' eina original del desenvolupador basada en navegador, aquesta opció simplement mostra el codi font disponible per a la pàgina activa. Tecla de drecera: Mac OS X ( COMMAND + U ), Windows ( CTRL + U )
Obteniu més eines: obre la col · lecció Toolbox del desenvolupador web al lloc web oficial de Mozilla, amb una dotzena d'extensions populars com Firebug i Greasemonkey.
Microsoft Edge / Internet Explorer
Commonly referred to as the F12 Developer Tools , un homenatge a la drecera del teclat que ha llançat la interfície des de versions anteriors d'Internet Explorer, el dev toolset en IE11 i Microsoft Edge ha recorregut un llarg camí des de la seva creació oferint un grup molt pràctic monitors, depuradores, emuladors i compiladors en la marxa.
- Feu clic al menú Més accions , representat per tres punts i situat a l'extrem superior dret de la finestra del navegador. Quan aparegui el menú desplegable, seleccioneu l'opció anomenada F12 Developer Tools . Com ja he esmentat, també podeu accedir a les eines mitjançant l'accés directe del teclat F12 .
- Ara s'ha de mostrar la interfície de desenvolupament, normalment a la part inferior de la finestra del navegador. Les següents eines estan disponibles, cadascuna d'elles accessible fent clic al seu encapçalament de la pestanya corresponent o utilitzant la drecera de teclat que l'acompanyi.
Explorador de DOM: us permet editar fulls d'estil i HTML a la pàgina activa, fent els resultats modificats a mesura que vagis. Utilitza la funcionalitat d'IntelliSense per completar el codi automàtic, si s'escau. Tecla de drecera: (CTRL + 1)
Consola: proporciona la capacitat d'enviar informació de depuració, inclosos comptadors, temporitzadors, traces i missatges personalitzats a través d'una API integrada. A més, permet introduir el codi en una pàgina web activa i modificar els valors assignats a variables individuals en temps real. Tecla de drecera: (CTRL + 2)
Depurador: permet establir punts d'interrupció i depurar el codi mentre s'executa, línia per línia si és necessari. Tecla de drecera: (CTRL + 3)
Xarxa: enumera cada petició de xarxa iniciada pel navegador durant la càrrega i l'execució de la pàgina, inclosos els detalls del protocol, el tipus de contingut, l'ús d'ample de banda i molt més. Tecla de drecera: (CTRL + 4)
Rendiment: les tarifes de quadre de detalls, la utilització de la CPU i altres mètriques relacionades amb el rendiment que us ajudaran a accelerar els temps de càrrega de la pàgina i altres activitats. Tecla de drecera: (CTRL + 5)
Memòria: us ajuda a aïllar i corregir possibles fuites de memòria a la pàgina web actual mostrant una línia de temps d'ús de la memòria juntament amb instantànies de diferents intervals de temps. Tecla de drecera: (CTRL + 6)
Emulació: mostra com es representaria la pàgina activa en diverses resolucions i mides de pantalla, emulant telèfons intel·ligents, tauletes i altres dispositius. També proporciona la possibilitat de modificar l'agent d'usuari i l'orientació de la pàgina, així com simular diferents geolocalitzacions introduint una latitud i longitud. Tecla de drecera: (CTRL + 7) - Per visualitzar la consola mentre es troba dins d'alguna de les altres eines, feu clic al botó quadrat amb un suport dret dins d'ell, situat a l'extrem superior dret de la interfície d'eines de desenvolupament.
- Per desacoblar, les interfícies d'eines del desenvolupador es converteixen en una finestra independent, feu clic al botó representat per dos rectangles en cascada o utilitzeu la següent drecera de teclat: CTRL + P. Podeu tornar a col·locar les eines a la ubicació original prement CTRL + P per segona vegada.
Apple Safari (OS X només)
El conjunt de eines de dev divers de Safari reflecteix la gran comunitat de desenvolupadors que utilitza una Mac per a les seves necessitats de disseny i programació. A més d'una potent consola i característiques tradicionals de registre i depuració, també es proporciona un mode de disseny sensible i fàcil d'usar i una eina per crear les vostres pròpies extensions de navegador.
- Feu clic a Safari al menú del navegador, situat a la part superior de la pantalla. Quan aparegui el menú desplegable, seleccioneu Preferències . També podeu utilitzar la següent drecera de teclat en lloc d'aquest element del menú: COMMAND + COMMA (,)
- La interfície de Preferències de Safari ara s'hauria de mostrar, superposant la finestra del vostre navegador. Feu clic a la icona Avançada , situada a l'extrem dret de l'encapçalament.
- Les preferències avançades ara han de ser visibles. A la part inferior d'aquesta pantalla hi ha una opció anomenada Mostra el menú Desenvolupar a la barra de menú , acompanyada d'una casella de verificació. Si no hi ha cap marca de verificació que es mostri al quadre, feu-hi clic una vegada per col·locar-ne una.
- Tanqueu la interfície Preferències fent clic a la "x" vermella que hi ha a l'extrem superior esquerre.
- Ara hauríeu d'observar una nova opció al menú del navegador anomenat Desenvolupament , situat entre Marcadors i Finestra . Feu clic en aquest element del menú. Ara s'ha de mostrar un menú desplegable que contingui les opcions següents.
Obre la pàgina amb: us permet obrir la pàgina web activa en un dels altres navegadors instal·lats actualment a la vostra Mac.
Agent d'usuari: us permet seleccionar entre més d'una dotzena de valors d'agent d'usuari predefinits, incloses diverses versions de Chrome, Firefox i Internet Explorer, així com definir la vostra pròpia cadena personalitzada.
Introduïu el mode de disseny de resposta : representa la pàgina actual tal com apareixeria en diversos dispositius i en diferents resolucions de pantalla.
Mostra l'inspector web: llança la interfície principal de les eines de Safari, normalment ubicades a la part inferior de la pantalla del navegador i que conté les seccions següents: elements , xarxa , recursos , línies de temps , depurador , emmagatzematge i consola .
Mostra consola d'errors: també llança la interfície d'eines dev, directament a la pestanya de la consola, que mostra errors, advertències i altres dades registrades de cerca.
Mostra la font de la pàgina: obre la pestanya Recursos , que mostra el codi font de la pàgina activa categoritzada per un document.
Mostra recursos de pàgina: realitza la mateixa funció que l'opció Mostra la font de la pàgina .
Mostra Editor de fragments: obre una finestra nova on podeu introduir codi CSS i HTML, previsualitzant la sortida a la marxa.
Mostra el desenvolupador d'extensió: proporciona la capacitat de crear o editar extensions de Safari amb CSS, HTML i JavaScript.
Mostra la gravació de la línia de temps: obre la pestanya Línies de temps i comença a mostrar les sol·licituds de xarxa, la distribució i la informació de representació, així com l'execució de JavaScript en temps real.
Cistelles buides: elimina tota la memòria cau que s'està emmagatzemant al vostre disc dur.
Deshabilitar les memòries cau : atura el Safari de la memòria cau de manera que tot el contingut es recuperi del servidor a cada càrrega de la pàgina.
Deshabilitar imatges: impedeix que les imatges es mostrin a totes les pàgines web.
Desactiva els estils: ignora les propietats CSS quan es carrega una pàgina.
Desactivar JavaScript: restringeix l'execució de JavaScript a totes les pàgines.
Desactiva les extensions: prohibeix que totes les extensions instal·lades s'executin dins del navegador.
Desactiva els hacks específics del lloc: si Safari ha estat modificat per gestionar explícitament els problemes específics de la pàgina web activa, aquesta opció bloquejarà els canvis perquè la pàgina es carregui com abans d'introduir-se aquestes modificacions.
Deshabilita les restriccions de fitxers locals: permet al navegador tenir accés als fitxers dels vostres discs locals, una acció que està restringida per defecte per motius de seguretat.
Deshabiliteu les restriccions d'origen creuat: aquestes restriccions s'implementen de manera predeterminada per evitar XSS i altres perills potencials. Tanmateix, sovint necessiten estar temporalment inhabilitats per al desenvolupament.
Permet JavaScript des del camp de cerca intel·ligent: quan està habilitat, proporciona la possibilitat d'introduir URL amb javascript: incorporat directament a la barra d'adreces.
Tracteu els certificats SHA-1 com a insegurs: els certificats SSL que utilitzen l' algorisme SHA-1 són àmpliament considerats obsolets i vulnerables.