Com utilitzar les eines per a desenvolupadors del navegador web

2024 Autora: Abigail Brown | [email protected]. Última modificació: 2024-01-07 19:01

A més de la majoria de fabricants de navegadors que es centren en l'usuari quotidià que busca navegar per la web, també s'adrecen als desenvolupadors web, dissenyadors i professionals de garantia de qualitat que ajuden a crear les aplicacions i els llocs als quals accedeixen aquests usuaris mitjançant la integració de potents eines directament als propis navegadors.

Enrere queden els dies en què les úniques eines de programació i prova que es trobaven en un navegador us permetien veure el codi font d'una pàgina i res més. Els navegadors actuals us permeten aprofundir molt fent coses com ara executar i depurar fragments de JavaScript, inspeccionar i editar elements DOM, supervisar el trànsit de xarxa en temps real a mesura que la vostra aplicació o pàgina es carrega per identificar colls d'ampolla, analitzar el rendiment CSS i assegurar-vos que el vostre codi sigui no utilitzar massa memòria ni massa cicles de CPU, i molt més.

Des del punt de vista de les proves, podeu reproduir com es mostrarà una aplicació o una pàgina web en diferents navegadors, així com en diferents dispositius i plataformes mitjançant la màgia del disseny responsiu i els simuladors integrats. La millor part és que pots fer tot això sense haver de sortir del teu navegador!

Els tutorials següents us expliquen com accedir a aquestes eines per a desenvolupadors en diversos navegadors web populars.

Google Chrome

Les eines per a desenvolupadors de Chrome us permeten editar i depurar codi, auditar components individuals per exposar problemes de rendiment, simular diferents pantalles de dispositius, incloses les que tenen Android o iOS, i realitzar diverses altres funcions útils.

1. Seleccioneu el menú principal de Chrome, marcat amb tres línies horitzontals i situat a l'extrem superior dret del navegador.

2. Quan aparegui el menú desplegable, passeu el cursor del ratolí per sobre de l'opció Més eines.

   

3. Ara hauria d'aparèixer un submenú. Seleccioneu l'opció amb l'etiqueta Eines per a desenvolupadors. També podeu utilitzar la drecera de teclat següent en lloc d'aquest element de menú: Chrome OS/Windows (CTRL+MAJ+I), Mac OS X (ALT(OPCIÓ) +COMANDA+I)

   

4. Ara s'hauria de mostrar la interfície de les Eines per a desenvolupadors de Chrome, tal com es mostra en aquesta captura de pantalla d'exemple. Depenent de la vostra versió de Chrome, el disseny inicial que veieu pot ser lleugerament diferent del que es presenta aquí. El centre principal de les eines de desenvolupament, que normalment es troba a la part inferior o dreta de la pantalla, conté les pestanyes següents.

5. A més d'aquestes seccions, també podeu accedir a les eines següents mitjançant la icona >>, situada a la dreta del Rendiment pestanya.

   • Memòria: supervisa i registra l'ús de la memòria en una pàgina web. Podeu veure el pesat que té JavaScript al vostre lloc.
   • Seguretat: destaca els problemes de certificat i altres problemes relacionats amb la seguretat amb la pàgina o aplicació activa.
   • Aplicació: inspeccioneu els recursos que utilitza una aplicació web. Obteniu un desglossament complet del que s'utilitza.
   • Auditoria: ofereix maneres d'optimitzar el temps de càrrega i el rendiment general d'una pàgina o aplicació.

   

6. Mode de dispositiu us permet veure la pàgina activa en un simulador que la representa gairebé exactament com apareixeria en un dels més d'una dotzena de dispositius, inclosos diversos Android coneguts. i models d'iOS com l'iPad, l'iPhone i el Samsung Galaxy. També teniu la possibilitat d'emular resolucions de pantalla personalitzades per adaptar-vos a les vostres necessitats particulars de desenvolupament o prova.

   Per activar i desactivar el Mode del dispositiu, seleccioneu la icona del telèfon mòbil situada directament a l'esquerra del Elements pestanya.

   

7. També pots personalitzar l'aspecte de les teves eines de desenvolupament seleccionant primer el botó de menú representat per tres punts verticalmenti es troba a l'extrem dret 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 pròpia interfície d'eines de desenvolupament és altament personalitzable mitjançant 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'estil i un comptagotes d'orientació per píxels.

1. Seleccioneu el menú principal de Firefox, representat per tres línies horitzontals i situat a l'extrem superior dret de la finestra del navegador.

2. Quan aparegui el menú desplegable, seleccioneu Desenvolupador web.

   

3. Ara s'hauria de mostrar el menú de desenvolupadors web , que conté les opcions següents. Notaràs que la majoria dels elements del menú tenen tecles de drecera associades.

   • Toggle Tools: mostra o amaga la interfície d'eines per a desenvolupadors, que normalment es col·loca a la part inferior de la finestra del navegador. Drecera de teclat: Mac OS X (ALT(OPCIÓ)+COMMAND+I), Windows (CTRL+MAJ+I)
   • Inspector: us permet inspeccionar i/o modificar el codi CSS i HTML a la pàgina activa així com en un dispositiu portàtil mitjançant la depuració remota. Drecera de teclat: Mac OS X (ALT(OPCIÓ)+COMMAND+C), Windows (CTRL+MAJ+C)
   • Consola web: us permet executar expressions JavaScript dins de la pàgina activa, així com revisar un conjunt divers de dades registrades, com ara advertències de seguretat, sol·licituds de xarxa, missatges CSS i molt més.. Drecera de teclat: Mac OS X (ALT(OPCIÓ)+COMMAND+K), Windows (CTRL+MAJ+K)
   • Depurador: el depurador de JavaScript us permet identificar i corregir defectes establint punts d'interrupció, inspeccionant nodes DOM, fonts externes de caixa negra i molt més. Com és el cas de l'Inspector, aquesta funció també admet la depuració remota. Drecera de teclat: Mac OS X (ALT(OPCIÓ)+COMMAND+S), Windows (CTRL+MAJ+S)
   • Editor d'estils: us permet crear fulls d'estil nous i incorporar-los a la pàgina web activa, o editar els fulls existents i provar com es mostren els vostres canvis en un navegador amb només un clic. Drecera de teclat: Mac OS X, Windows (MAJ+F7)
   • Rendiment: ofereix un desglossament detallat del rendiment de la xarxa de la pàgina activa, dades de velocitat de fotogrames, temps i estat d'execució de JavaScript, parpelleig de pintura i molt més. Drecera de teclat: Mac OS X, Windows (MAJ+F5)
   • Xarxa: enumera cada sol·licitud de xarxa iniciada pel navegador juntament amb el mètode corresponent, el domini d'origen, el tipus, la mida i el temps transcorregut. Drecera de teclat: Mac OS X (ALT(OPCIÓ)+COMMAND+Q), Windows (CTRL+MAJ+Q)
   • Storage Inspector: mireu la memòria cau i les galetes que emmagatzema un lloc web. Drecera de teclat: (MAJ+F9)
   • Barra d'eines per a desenvolupadors: obre un intèrpret de línia d'ordres interactiu. Introduïu help a l'intèrpret per obtenir una llista de totes les ordres disponibles i la seva sintaxi adequada. Drecera de teclat: Mac OS X, Windows (MAJ+F2)
   • WebIDE: ofereix la possibilitat de crear i executar aplicacions web mitjançant un dispositiu real amb Firefox OS o mitjançant el simulador de Firefox OS. Drecera de teclat: Mac OS X, Windows (MAJ+F8)
   • Consola del navegador: ofereix la mateixa funcionalitat que la consola web (vegeu més amunt). Tanmateix, totes les dades retornades són per a tota l'aplicació Firefox (incloses les extensions i les funcions a nivell de navegador) en lloc de només la pàgina web activa. Drecera de teclat: Mac OS X (MAJ+COMMAND+J), Windows (CTRL+MAJ+J)
   • Vista de disseny responsiu: us permet visualitzar instantàniament una pàgina web amb diferents resolucions, dissenys i mides de pantalla per imitar diversos dispositius, com ara tauletes i telèfons intel·ligents. Drecera de teclat: Mac OS X (ALT(OPCIÓ)+COMMAND+M), Windows (CTRL+MAJ+M)
   • Eyedropper: mostra el codi de color hexadecimal dels píxels seleccionats individualment.
   • Scratchpad: Scratchpad us permet escriure, editar, integrar i executar fragments de codi JavaScript des d'una finestra emergent de Firefox. Obriu un document JavaScript interactiu que us permeti escriure codi i provar-lo amb un lloc web. Drecera de teclat: (MAJ+F4)
   • Treballadors del servei: depureu els treballadors del servei de la vostra aplicació web. Obteniu informació detallada sobre el seu rendiment i errors.
   • Font de la pàgina: l'eina original per a desenvolupadors basada en navegador, aquesta opció simplement mostra el codi font disponible per a la pàgina activa. Drecera de teclat: Mac OS X (COMMAND+U), Windows (CTRL+U)
   • Obtén més eines: obre la col·lecció Caja d'eines per a desenvolupadors webal lloc oficial de complements de Mozilla, que inclou una dotzena d'extensions populars com ara com Firebug i Greasemonkey.

   

Microsoft Edge/Internet Explorer

Coneguda habitualment com a F12 Developer Tools, un homenatge a la drecera de teclat que ha llançat la interfície des de les versions anteriors d'Internet Explorer, el conjunt d'eines de desenvolupament d'IE11 i Microsoft Edge ha recorregut un llarg camí des dels seus inicis oferint un grup molt pràctic de monitors, depuradors, emuladors i compiladors instantanis.

Microsoft ja no és compatible amb Internet Explorer i us recomana que l'actualitzeu al navegador Edge més recent. Dirigiu-vos al seu lloc per baixar la versió més recent.

1. Seleccioneu Més accions, representat per tres punts i situat a l'extrem superior dret de la finestra del navegador.

   

2. Quan aparegui el menú desplegable, seleccioneu l'opció amb l'etiqueta Eines per a desenvolupadors.

   

3. La interfície de desenvolupament ara s'hauria de mostrar, normalment a la part inferior de la finestra del navegador. Les eines següents estan disponibles, a les quals s'hi pot accedir fent clic a l'encapçalament de la pestanya corresponent o utilitzant la drecera de teclat que l'acompanya.

   

   • DOM Explorer: us permet editar fulls d'estil i HTML a la pàgina activa, mostrant els resultats modificats a mesura que avanceu. Utilitza la funcionalitat IntelliSense per emplenar automàticament el codi si escau. Drecera de teclat: (CTRL+1)
   • Consola: ofereix la possibilitat d'enviar informació de depuració, inclosos comptadors, temporitzadors, rastres i missatges personalitzats mitjançant una API integrada. A més, us permet injectar codi en una pàgina web activa i modificar els valors assignats a variables individuals en temps real. Drecera de teclat: (CTRL+2)
   • Depurador: us permet establir punts d'interrupció i depurar el vostre codi mentre s'executa, línia per línia si cal. Drecera de teclat: (CTRL+3)
   • Xarxa: enumera cada sol·licitud 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'amplada de banda i molt més. Drecera de teclat: (CTRL+4)
   • Rendiment: detalla les velocitats de fotogrames, l'ús de la CPU i altres mètriques relacionades amb el rendiment per ajudar-vos a accelerar els temps de càrrega de la pàgina i altres activitats. Drecera de teclat: (CTRL+5)
   • Memòria: us ajuda a aïllar i corregir possibles fuites de memòria a la pàgina web actual mostrant una cronologia d'ús de la memòria juntament amb instantànies de diferents intervals de temps. Drecera de teclat: (CTRL+6)
   • Emulation: us 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é ofereix la possibilitat de modificar l'agent d'usuari i l'orientació de la pàgina, així com simular diferents geolocalitzacions introduint una latitud i una longitud. Drecera de teclat: (CTRL+7)

4. Per mostrar la Consola mentre es troba a qualsevol de les altres eines, premeu el botó quadrat amb un claudàtor dret dins, situat a l'extrem superior dret de la interfície d'eines de desenvolupament.

   

5. Per desacoblar la interfície d'eines per a desenvolupadors perquè es converteixi en una finestra independent, seleccioneu dos rectangles en cascada o utilitzeu la drecera de teclat següent: CTRL+P. Podeu tornar a col·locar les eines a la seva ubicació original prement CTRL+P una segona vegada.

   

Apple Safari (només per a Mac)

El conjunt d'eines de desenvolupament divers de Safari reflecteix la gran comunitat de desenvolupadors que utilitzen un Mac per a les seves necessitats de disseny i programació. A més d'una consola potent i les funcions tradicionals de registre i depuració, també s'ofereix un mode de disseny responsiu fàcil d'utilitzar i una eina per crear les vostres pròpies extensions del navegador.

1. Seleccioneu 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 drecera de teclat següent en lloc d'aquest element de menú: COMMAND+COMMA(,)

   

2. Ara s'hauria de mostrar la interfície

   Preferences de Safari, superposada a la finestra del navegador. Seleccioneu la icona Avançada , situada a l'extrem dret de la capçalera.

   

3. Les preferències Avançades ara haurien de ser visibles. A la part inferior d'aquesta pantalla hi ha una opció amb l'etiqueta Mostra el menú Desenvolupament a la barra de menús, acompanyada d'una casella de selecció. Si no es mostra cap marca de verificació al quadre, feu-hi clic una vegada per col·locar-ne una.

   

4. Tanqueu la interfície Preferències.

5. Ara hauríeu de notar una nova opció al menú del navegador anomenada Desenvolupament, situada entre Adreces d'interès i la finestra. Feu clic a aquest element del menú. Ara s'hauria 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 al vostre Mac.
   • User Agent: 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 el vostre propi personalitzat cadena.
   • Introdueix el mode de disseny responsiu: representa la pàgina actual tal com apareixeria en diversos dispositius i amb diferents resolucions de pantalla.
   • Show Web Inspector: inicia la interfície principal per a les eines de desenvolupament de Safari, que normalment es col·loca a la part inferior de la pantalla del navegador i que conté les seccions següents: Elements, Xarxa, Recursos, Cronologies, Depurador, Emmagatzematge, Consola.
   • Mostra la consola d'errors: també llança la interfície d'eines de desenvolupament, directament a la pestanya de la consola, que mostra errors, advertències i altres opcions de cerca. dades de registre.
   • Mostra la font de la pàgina: obre la pestanya Recursos , que mostra el codi font de la pàgina activa categoritzada pel document.
   • Mostra els recursos de la pàgina: fa la mateixa funció que l'opció Mostra la font de la pàgina.
   • Mostra l'editor de fragments: obre una finestra nova on podeu introduir codi CSS i HTML, previsualitzant-ne la sortida al vol.
   • Mostra el creador d'extensions: ofereix la possibilitat de crear o editar extensions de Safari amb CSS, HTML i JavaScript.
   • Mostra l'enregistrament de la línia de temps: obre la pestanya Línies de temps i comença a mostrar les sol·licituds de xarxa, la disposició i la informació de representació, així com l'execució de JavaScript en temps real.
   • Buida la memòria cau: suprimeix tota la memòria cau que s'emmagatzema actualment al vostre disc dur.
   • Desactiva les memòries cau: impedeix que Safari s'emmagatzemi en memòria cau de manera que tot el contingut es recuperi del servidor en cada càrrega de pàgina.
   • Desactiva les imatges: evita que les imatges es mostrin a totes les pàgines web.
   • Desactivar estils: ignora les propietats CSS quan es carrega una pàgina.
   • Desactiva JavaScript: restringeix l'execució de JavaScript a totes les pàgines.
   • Desactiva les extensions: prohibeix que totes les extensions instal·lades s'executin al navegador.
   • Desactiva Hacks específics del lloc: si Safari s'ha modificat per gestionar explícitament problemes específics de la pàgina web activa, aquesta opció bloquejarà aquests canvis perquè la pàgina càrregues com ho tindria abans d'introduir aquestes modificacions.
   • Desactiva les restriccions de fitxers locals: permet que el navegador tingui accés als fitxers dels vostres discs locals, una acció que està restringida de manera predeterminada per motius de seguretat.
   • Desactiva les restriccions entre orígens: aquestes restriccions s'estableixen de manera predeterminada per evitar XSS i altres perills potencials. Tanmateix, sovint s'han de desactivar temporalment per a finalitats de desenvolupament.
   • Permet JavaScript des del camp de cerca intel·ligent: quan està activat, ofereix la possibilitat d'introduir URL amb javascript: incorporat directament a la barra d'adreces.
   • Traiteu els certificats SHA-1 com a insegurs: els certificats SSL que utilitzen l'algoritme SHA-1 es consideren desactualitzats i vulnerables.