Home-theater-designers
Chrome DevTools és un recurs essencial per als desenvolupadors. Tot i que altres navegadors ofereixen eines de resolució de problemes força útils, Chrome DevTools mereix la vostra atenció a causa de la seva interfície multifuncional i popularitat.
Chrome és el navegador més popular per als desenvolupadors a causa de la seva potent suite d’eines de depuració. L’ús de Chrome DevTools és fàcil, però heu d’entendre com funciona per treure’n el màxim partit.
Com funcionen les eines per a desenvolupadors de Chrome
Chrome DevTools us permet resoldre problemes d’un lloc web mitjançant la consola d’errors i altres eines de depuració i supervisió. L’ús de DevTools exposa les llacunes del frontend i us permet controlar com apareix el vostre lloc web en dispositius mòbils i tauletes.
Amb DevTools, podeu fer modificacions en temps real del codi d’un lloc web, com ara JavaScript, HTML i CSS, i obtenir resultats instantanis dels vostres canvis.
Els canvis que feu a través de DevTools no afecten permanentment el lloc web. Només mostren temporalment el resultat esperat com si els haguéssiu aplicat al codi font real. D’aquesta manera, podreu trobar maneres d’aconseguir que el vostre lloc web es carregui molt més ràpidament i facilitarà la planificació d’errors.
Com accedir a Chrome DevTools
Podeu accedir a Chrome DevTools de diverses maneres. Per obrir les eines de desenvolupament amb el mètode de drecera a Mac OS, premeu Cmd + Opt + I . Si utilitzeu el sistema operatiu Windows, premeu el botó Ctrl + Maj + I tecles del teclat.
Com a alternativa, podeu accedir a les eines per a desenvolupadors de Chrome fent clic als tres punts que hi ha a l'extrem superior dret de la pantalla. Cap a Més eines i seleccioneu Eines per a desenvolupadors . Una altra opció és fer clic amb el botó dret a la pàgina web i fer clic a Inspeccioneu opció.
Utilitzar les eines per a desenvolupadors de Chrome per al diagnòstic de llocs web
Chrome DevTools ofereix diverses maneres de modificar i solucionar problemes d'una pàgina web. Vegem algunes de les maneres en què DevTools us pot ajudar.
Vegeu com queda el vostre lloc web en un telèfon intel·ligent
Un cop canvieu el navegador Chrome al mode de desenvolupador, es mostrarà una versió de mida mitjana de la vostra pàgina web. Tanmateix, això no us proporcionarà una visió real de com quedaria en un telèfon intel·ligent o en una tauleta.
Afortunadament, a més d’establir la mida de pantalla d’una pàgina web, Chrome DevTools també us permet canviar entre diferents tipus de versions de mòbils i versions.
Per accedir a aquesta opció, activeu el botó Inspeccioneu mode. A continuació, feu clic a Responsiu desplegable a l'extrem superior esquerre de DevTools i seleccioneu el vostre dispositiu mòbil preferit. A continuació, la pàgina web es renderitza i s'ajusta per adaptar-se a la mida del dispositiu mòbil que heu seleccionat.
com executar-se sempre com a administrador
Accediu als fitxers font d’una pàgina web
Podeu accedir als fitxers que formen una pàgina web mitjançant Chrome DevTools. Per accedir a aquests fitxers, feu clic a Fonts a la part superior del menú DevTools. Això exposa el sistema de fitxers del lloc web i també us proporciona edició.
També podeu cercar fitxers font, que poden ser útils quan es tracta d’una pàgina web amb molts recursos. Per cercar un fitxer font mitjançant DevTools, feu clic a Cerca opció just a sobre de la consola.
Tanmateix, si no podeu trobar el fitxer Cerca opció, una millor alternativa és utilitzar dreceres de teclat. A Mac OS, premeu el botó Cmd + Opt + F tecles per cercar un fitxer font. Si feu servir el sistema operatiu Windows, premeu el botó Ctrl + Maj + F per accedir a la barra de cerca de fitxers font.
Feu edicions en directe a una pàgina web
Un dels propòsits principals de l’ús de DevTools és dur a terme un edició falsa instantània dels elements d’una pàgina web . Un cop canvieu a les eines per a desenvolupadors, podeu editar el contingut HTML d'un lloc web fent clic a Elements opció. A continuació, feu clic amb el botó dret sobre qualsevol punt al qual vulgueu aplicar canvis a l'editor de codi i seleccioneu Edita com a HTML .
Per editar propietats CSS que no estan en línia, seleccioneu Fonts . A continuació, seleccioneu el fitxer CSS que vulgueu editar. Col·loqueu el cursor a la línia que vulgueu a la consola de codis per fer una edició en directe. En fer-ho, obtindreu comentaris instantanis sobre els canvis d’estil que apliqueu a la pàgina web.
Tingueu en compte que quan editeu una pàgina mitjançant DevTools, tornar a carregar la pàgina al navegador la torna a la forma original i només podeu veure l’edició. L’edició mitjançant DevTools no afecta el bon funcionament ni l’ús d’aquest lloc web per a altres usuaris.
Depurar el codi JavaScript amb la consola DevTools
Una de les millors maneres de depurar JavaScript és utilitzar les eines per a desenvolupadors de Chrome. Us proporciona un informe directe d’escriptures no vàlides, així com la ubicació exacta de l’error.
És una bona pràctica mantenir sempre oberts els DevTools mentre es dissenya un lloc web amb JavaScript. Per exemple, executant el fitxer console.log () l'ordre de JavaScript en un conjunt d'instruccions mostra el resultat d'aquest registre a la consola DevTools si el programa s'executa correctament.
Per defecte, la consola informa de qualsevol problema de JavaScript al vostre lloc web. Podeu trobar la consola a la part inferior de DevTools o accedir-hi fent clic a Consola a la part superior de la finestra de Chrome DevTools.
Superviseu la càrrega de recursos des d’una base de dades
A més de depurar JavaScript, la consola també us pot proporcionar un detall dels recursos que no es carreguen correctament de la base de dades del lloc web.
Tot i que aquesta no sempre és la millor manera de depurar problemes de backend, encara us indica quins recursos estan retornant 404 error després d'executar una consulta de base de dades d'aquests elements.
Relacionat: Errors comuns del lloc web i què signifiquen
Canvieu l'orientació de les eines per a desenvolupadors de Chrome
Per canviar la posició de les eines per a desenvolupadors de Chrome, feu clic als tres punts del menú de DevTools (no el principal del navegador). A continuació, seleccioneu la vostra posició preferida a la llista Costat del moll opció.
Instal·leu les extensions de Chrome DevTools
També podeu instal·lar extensions específiques d’idioma o de marc que funcionin amb Chrome DevTools. La instal·lació d’aquestes extensions us permet depurar la vostra pàgina web de manera més eficient.
Podeu accedir a una llista d’extensions disponibles per a Chrome DevTools a Chrome Extensions DevTools destacades galeria.
Comproveu si hi ha problemes de seguretat en un lloc web
Chrome DevTools us permet avaluar la seguretat del vostre lloc web, en funció de paràmetres com la disponibilitat de certificats de seguretat web i la seguretat de la connexió, entre d’altres. Per comprovar si el vostre lloc web és segur, feu clic a Seguretat opció a la part superior de DevTools.
El Seguretat La pestanya us proporciona una visió general dels detalls de seguretat del vostre lloc web i us indica les possibles amenaces.
Auditeu el vostre lloc web
Chrome DevTools té una funció que us permet comprovar el rendiment general del vostre lloc web en funció de paràmetres específics.
Per accedir a aquesta funció, seleccioneu el fitxer Far a la part superior de la finestra DevTools. A continuació, seleccioneu els paràmetres que vulgueu comprovar i, a continuació, marqueu el botó Mòbil o bé Escriptori opcions per veure el rendiment de la vostra pàgina web en diferents plataformes.
A continuació, feu clic a Genera informe per fer una anàlisi de la vostra pàgina web en funció dels paràmetres que hàgiu seleccionat anteriorment.
També podeu avaluar el temps d’execució o el rendiment de càrrega d’un lloc web fent clic a Rendiment opció. Per executar una prova, feu clic a la icona situada al costat del fitxer Feu clic al botó de gravació opció per realitzar una anàlisi en temps d'execució. També podeu fer clic al botó de recàrrega que hi ha a sota per avaluar el rendiment del temps de càrrega. Fer clic a Atura per aturar l’analitzador i mostrar els resultats.
Aprofiteu Chrome DevTools
Depenent de per a què ho necessiteu, Chrome DevTools us permet fer més que una simple depuració de llocs web. Afortunadament, els DevTools són fàcils d’utilitzar per a programadors de tots els nivells d’habilitat. Fins i tot podeu aprendre alguns conceptes bàsics sobre el desenvolupament de frontend de llocs web si cerqueu el codi font dels llocs web que visiteu.
com gravar una conversa telefònica a l'iPhone
També podeu descobrir algunes altres opcions que no hem comentat en aquest article. Per tant, no dubteu a jugar amb les funcions disponibles. A més, modificar aquestes funcions no perjudica una mica un lloc web.
Compartir Compartir Tweet Correu electrònic Com s'utilitza Chrome OS en un Raspberry PiNo us podeu permetre un Chromebook? Busqueu una alternativa a Raspbian? A continuació s’explica com instal·lar una versió de Chrome OS al vostre Raspberry Pi.
Llegiu a continuació Temes relacionats- Internet
- Programació
- HTML
- Desenvolupament web
- JavaScript
- Google Chrome
Idowu és un apassionat de qualsevol tecnologia intel·ligent i productivitat. Durant el temps lliure, juga amb la codificació i canvia al tauler d’escacs quan s’avorreix, però també li agrada deixar de banda la rutina de tant en tant. La seva passió per mostrar a la gent el camí cap a la tecnologia moderna el motiva a escriure més.
Més de Idowu OmisolaSubscriu-te al nostre butlletí
Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.
Feu clic aquí per subscriure-us