Com obrir la consola del navegador a Chrome, Safari, Firefox i Edge

La raó més comuna per la qual els usuaris volen obrir la consola del navegador és identificar problemes d’edició de pàgines, elements de la interfície trencats, mal comportament de blocs i altres tipus d’errors i conflictes de JavaScript. No obstant això, cada navegador té les seves pròpies dreceres i passos que, en última instància, us permetran obrir la consola i veure el fons de la pàgina web que visiteu.

Com obrir la consola al navegador predeterminat

Com que només hi ha quatre navegadors diferents amb més del 5% de quota de mercat (Chrome, Safari, Edge i Firefox), us mostrarem diverses maneres d'obrir la consola a cadascun d'ells. Però tingueu en compte que amb cada navegador, els elements i els errors generalment es codifiquen per colors i s’etiqueten de manera diferent.

Com obrir la consola a Google Chrome

A Chrome, en realitat hi ha tres maneres diferents que us permetran obrir la consola integrada.

Independentment de la versió de Chrome que utilitzeu, podeu utilitzar una d'aquestes dreceres per obrir i tancar la consola integrada:

• F12
• Ctrl + Maj + J (Cmd + Opció + J al Mac)

Tingueu en compte que també es poden utilitzar les mateixes dreceres per amagar la consola. Per defecte, la consola de Google Chrome ocupa exactament la meitat de la pantalla, però podeu ajustar la relació fàcilment mitjançant el control lliscant del centre i el navegador recordarà la modificació la propera vegada que obriu la consola.

Si voleu centrar-vos en un element específic, podeu ressaltar-lo amb el ratolí i fer clic amb el botó dret sobre ell> Inspeccioneu. Això obrirà el fitxer Elements fitxa i Estils de la consola, que us permetrà centrar-vos en l’element que teniu a l’abast.

Inspeccionar un element amb la consola de Google Chrome

Tot i això, també podeu accedir a la consola a través del menú GUI de Google Chrome. Per fer-ho, només cal que feu clic al botó d'acció de l'extrem superior dret i aneu a Més eines> Eines per a desenvolupadors .

Eines per a desenvolupadors

Si voleu treballar de la manera més eficaç possible, aquí teniu una llista de Dreceres de la consola de Chrome que podeu utilitzar.

Com obrir la consola a Google Microsoft Edge

Com qualsevol altre navegador, Microsoft Edge també té una eina de consola destinada als desenvolupadors que fan depuracions interactives o proves ad hoc.

Aquesta eina registra la informació associada a la pàgina web que es visita. Trobareu informació relacionada amb Javascript, sol·licituds de xarxa i errors de seguretat .

La manera més senzilla d'obrir l'eina de consola a Microsoft Edge és mitjançant la drecera predefinida ( Tecla F12 ).

Però també podeu fer-ho a través del menú GUI fent clic a botó d'acció (cantonada superior esquerra)> Més eines> Eines per a desenvolupadors .

Obertura de les eines per a desenvolupadors a Edge mitjançant el menú GUI

I, de manera similar a la funcionalitat dels altres navegadors, Microsoft Edge també us permet inspeccionar elements específics mitjançant la consola integrada. Per fer-ho, simplement seleccioneu i feu clic amb el botó dret sobre un element i trieu Inspeccionar element.

Inspecció d'un element a Microsoft Edge

A continuació, es mostra una llista amb algunes dreceres útils que podeu utilitzar a la consola integrada de Microsoft Edge:

Com obrir la consola a Mozilla Firefox

La consola integrada a Mozilla Firefox funciona una mica diferent a la resta d’equivalents que hem analitzat fins ara. El que vull dir amb això és que s'obrirà automàticament en una finestra independent, en lloc de dividir la pantalla del navegador per la meitat.

Això permet un enfocament més productiu per a les persones amb segones pantalles, però pot obstaculitzar els usuaris que necessiten treballar amb una pantalla petita. (Si esteu en aquest escenari, podeu fer servir la tecla de drecera Alt + Tab per desplaçar-vos entre Firefox i la consola de navegador associada.

Per obrir la consola del navegador integrada a Mozilla Firefox, teniu tres opcions:

• Podeu utilitzar la drecera universal: Ctrl + Maj + J (o Cmd + Maj + J en un Mac)
• Podeu obrir-lo des del menú d'accions: fent clic al menú d'accions> Desenvolupador web> Consola del navegador .

Accedint a la consola del navegador

• O bé, podeu forçar la Consola del navegador a obrir-se directament iniciant el Firefox des de la línia d’ordres i passant l’argument ‘-jsconsole’:

  /Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole

Nota: Firefox també inclou un fitxer Consola web , que és molt similar a la consola del navegador, però que s’aplica a una sola pestanya de contingut en lloc de fer-ho a tot el navegador.

Com obrir la consola a Google Safari

A diferència de tots els altres navegadors que hem vist fins ara, la Consola d’errors de Safari està desactivada per defecte. Per això, haureu de fer un pas addicional per habilitar-lo al navegador.

Per fer-ho, obriu Safari i feu clic a Preferències fitxa. Un cop estigueu dins del Preferències , feu clic a la pestanya Avançat i marqueu la casella associada a Mostra Desenvolupament menú a la barra de menú.

Activació de la consola a Safari

Ara que heu visibilitzat la consola, podeu obrir-la accedint a Desenvolupar a la part superior i fent clic a Mostra la consola d’errors .

Mostra la consola d’errors a Safari

Tingueu-ho en compte Safari té una forma dinàmica de mostrar la consola d'errors. Si la finestra és petita quan obriu la consola, la veureu en una finestra completament diferent.

En cas que vulgueu obrir la consola a la mateixa finestra que la pàgina, haureu de garantir que la finestra del navegador sigui de mida completa abans d’obrir la consola d’errors.

Obertura de la consola d'errors a Safari