¿Cómo se inicia el depurador de JavaScript en Google Chrome?

Respuestas:

318

Windows: CTRL- SHIFT- JO F12

Mac: ⌥- ⌘-J

También disponible a través del menú de herramientas (Herramientas> Consola JavaScript):

Menú de la consola de JavaScript

John Sheehan
fuente
23
Creo que el acceso directo ha cambiado a CTRL-SHIFT-J.
Martijn Laarman
55
o Cmd-Shift-J para Mac. Dios, amo esta <kbd>etiqueta. Lástima que no puedo usarlo en los comentarios.
Anurag
11
El acceso directo de Mac parece estar Alt-Cmd-Jen la última versión de Chrome.
Mathew Byrne
64
F12es la forma más simple
Juan Mendes
mirar esta pregunta me hace comprender cuánto mejoraron mis habilidades de JavaScript desde niveles principiantes hasta estándares bastante decentes
Kamal Reddy
399

Intenta agregar esto a tu fuente:

debugger;

Funciona en la mayoría, si no en todos los navegadores. Simplemente colóquelo en algún lugar de su código, y actuará como un punto de interrupción.

Omer van Kloeten
fuente
¡Es difícil encontrar cómo se llama este comando si lo ha olvidado!
Ahmed Fasih
44
También es difícil buscar en Google por las razones por las cuales esto no siempre funciona. ¿Hay limitaciones en esto?
Seanonymous
2
Debe tener abiertas las Herramientas para desarrolladores de Chrome para que esto funcione (presione F12 en Windwos / Linux, no conozca la clave en una Mac o simplemente inspeccione un elemento). Si tiene abiertas las Herramientas para desarrolladores, un poco más de asombro es que puede hacer clic y mantener presionado el botón Actualizar para borrar el caché.
toon81
2
@CallumRogers Solo si sus usuarios usan su sitio con las Herramientas para desarrolladores abiertas, sin embargo.
Josh M.
3
@JoshM. Tenga en cuenta que dejar esto en el código de producción es muy malo, ya que causa problemas en ciertas versiones de IE, incluso para los usuarios que no tienen herramientas de desarrollo abiertas.
Omer van Kloeten
57

Windows y Linux:

CtrlTeclas + Shift+ Ipara abrir Herramientas para desarrolladores

Ctrl+ Shift+ Jpara abrir Herramientas para desarrolladores y enfocar la consola.

Ctrl+ Shift+ Cpara alternar el modo Inspeccionar elemento.

Mac:

⌥Teclas + ⌘+ Ipara abrir Herramientas para desarrolladores

⌥+ ⌘+ Jpara abrir Herramientas para desarrolladores y enfocar la consola.

⌥+ ⌘+ Cpara alternar el modo Inspeccionar elemento.

Fuente

Otros atajos

usuario629309
fuente
3
En mac, el shorcut para alternar el modo de inspección de elementos es shift ⌘ C (Shift - Command - C)
Roberto Barros
15

Presione la F12tecla de función en el navegador Chrome para iniciar el depurador de JavaScript y luego haga clic en "Scripts".

Elija el archivo JavaScript en la parte superior y coloque el punto de interrupción en el depurador para el código JavaScript.

Balachandar P
fuente
3
F12 no parece abrir el depurador en mi sistema Windows 7 con Chrome 23.0.1246.0 dev-m.
astletron
+1 para F12, también funciona para IE, FF, Edge. No es necesario aprender Emacs como combinaciones de teclas. Excepto para Mac.
Csaba Toth
11

Ctrl+ Shift+ Jabre Herramientas para desarrolladores.

Senyai
fuente
6

En Chrome 8.0.552 en una Mac, puede encontrarlo en el menú Ver / Desarrollador / Consola de JavaScript ... o puede usar Alt+ CMD+ J.

Primc
fuente
2

Shift+ Control+ Iabre la ventana de la herramienta de desarrollador. Desde la segunda imagen inferior izquierda (que se parece a la siguiente) se abrirá / ocultará la consola para usted:

Muestra la consola

Premanshu
fuente
2

Para abrir el panel dedicado 'Consola', ya sea:

  • Usa los atajos de teclado
    • En Windows y Linux: Ctrl+ Shift+J
    • En Mac: Cmd+ Option+J
  • Seleccione el ícono del menú de Chrome, menú -> Más herramientas -> Consola de JavaScript . O si las Herramientas para desarrolladores de Chrome ya están abiertas, pressla pestaña 'Consola'.

Por favor refiérase aquí

Venkat
fuente
1

Para usuarios de Mac, vaya a Google Chrome -> menú Ver -> Desarrollador -> Consola de JavaScript .

Captura de pantalla

Neo123
fuente
1

Ahora Google Chrome ha introducido una nueva función. Mediante el uso de esta función, puede editar su código en Chrome Chrome. (Cambio permanente en la ubicación del código)

Para eso, presione F12 -> Pestaña Fuente - (lado derecho) -> Sistema de archivos - en eso, seleccione su ubicación de código. y luego el navegador Chrome le pedirá permiso y luego ese código se hundirá con color verde. y puede modificar su código y también se reflejará en la ubicación de su código (significa que cambiará permanentemente)

Gracias

stackinfostack
fuente
0

La forma más eficiente que he encontrado para llegar al depurador de JavaScript es ejecutando esto:

chrome://inspect

Néstor Urquiza
fuente
0

F12 abre el panel de desarrollador

CTRL + MAYÚS + C Se abrirá la herramienta de desplazamiento para inspeccionar donde resalta los elementos a medida que se desplaza y puede hacer clic para mostrarlo en la pestaña de elementos.

CTRL + MAYÚS + I Abre el panel de desarrollador con pestaña de consola

CLIC DERECHO> Inspeccionar Haga clic derecho en cualquier elemento y haga clic en "inspeccionar" para seleccionarlo en la pestaña Elementos del panel Desarrollador.

ESC Si hace clic con el botón derecho e inspecciona un elemento o similar y termina en la pestaña "Elementos" mirando el DOM, puede presionar ESC para alternar la consola hacia arriba y hacia abajo, lo que puede ser una buena manera de usar ambos.

OG Sean
fuente
0

Estas son las herramientas que ves

presione el F12

herramientas de desarrollo

Johan Stiven Hernández Osorio
fuente
-5

Desde la consola en Chrome, puedes hacerlo console.log(data_to_be_displayed).

anand
fuente
3
Esto no abrirá la consola. Esto solo se registrará en la consola.
Shaz