Comment lancer le débogueur JavaScript dans Google Chrome?

418

Lorsque j'utilise Google Chrome, je veux déboguer du code JavaScript. Comment puis je faire ça?

javascript google-chrome debugging google-chrome-devtools Kevin Driedger
la source
Voir Comment ouvrir la console JavaScript dans différents navigateurs? à Webmasters.SE
Bergi
developers.google.com/chrome-developer-tools/docs/…
Davut Gürbüz
Vous pourriez également trouver cela utile: Comment terminer l'exécution d'un script lors du débogage dans Google Chrome
cssyphus

Réponses:

318

Windows: CTRL- SHIFT- JOU F12

Mac: ⌥- ⌘-J

Également disponible via le menu clé (Outils> Console JavaScript):

Menu de la console JavaScript

John Sheehan
la source
23
Je pense que le raccourci a depuis changé en CTRL-SHIFT-J.
Martijn Laarman
5
ou Cmd-Shift-J pour Mac. Dieu j'aime cette <kbd>balise. Dommage que je ne puisse pas l'utiliser dans les commentaires.
Anurag
11
Le raccourci Mac semble être en fait Alt-Cmd-Jsur la dernière version de Chrome.
Mathew Byrne
64
F12est le moyen le plus simple
Juan Mendes
regarder cette question me fait comprendre à quel point mes compétences en javascript sont passées de niveaux débutants à des normes assez décentes
Kamal Reddy
399

Essayez d'ajouter ceci à votre source:

debugger;

Cela fonctionne dans la plupart, sinon tous les navigateurs. Il suffit de le placer quelque part dans votre code et il agira comme un point d'arrêt.

Omer van Kloeten
la source
Il est difficile de trouver le nom de cette commande si vous l'avez oubliée!
Ahmed Fasih
4
Il est également difficile de google pour des raisons pour lesquelles cela ne fonctionne pas toujours. Y a-t-il des limites à cela?
Seanonymous
2
Vous devez avoir les outils de développement Chrome ouverts pour que cela fonctionne (appuyez sur F12 sur Windwos / Linux, ne connaissez pas la clé sur un Mac ou inspectez simplement un élément). Si les outils de développement sont ouverts, un élément supplémentaire impressionnant est que vous pouvez cliquer et maintenir le bouton Actualiser pour vider le cache.
toon81
2
@CallumRogers Seulement si vos utilisateurs utilisent votre site avec les outils de développement ouverts.
Josh M.
3
@JoshM. Veuillez noter que laisser cela dans le code de production est très mauvais car cela provoque des problèmes dans certaines versions d'IE même pour les utilisateurs qui n'ont pas d'outils de développement ouverts.
Omer van Kloeten
57

Windows et Linux:

Ctrl+ Shift+ Itouches pour ouvrir les outils de développement

Ctrl+ Shift+ Jpour ouvrir les outils de développement et mettre l'accent sur la console.

Ctrl+ Shift+ Cpour basculer en mode Inspecter élément.

Mac:

⌥+ ⌘+ Itouches pour ouvrir les outils de développement

⌥+ ⌘+ Jpour ouvrir les outils de développement et mettre l'accent sur la console.

⌥+ ⌘+ Cpour basculer en mode Inspecter élément.

La source

Autres raccourcis

user629309
la source
3
Sur mac, le raccourci pour basculer en mode inspection élément est shift ⌘ C (Shift - Command - C)
Roberto Barros
15

Appuyez sur la F12touche de fonction dans le navigateur Chrome pour lancer le débogueur JavaScript, puis cliquez sur "Scripts".

Choisissez le fichier JavaScript en haut et placez le point d'arrêt sur le débogueur pour le code JavaScript.

Balachandar P
la source
3
F12 ne semble pas ouvrir le débogueur sur mon système Windows 7 avec Chrome 23.0.1246.0 dev-m.
astletron
+1 pour F12, il fonctionne également pour IE, FF, Edge. Pas besoin d'apprendre Emacs comme des combinaisons de touches. Sauf pour Mac.
Csaba Toth
11

Ctrl+ Shift+ Jouvre les outils de développement.

Senyai
la source
6

Dans Chrome 8.0.552 sur un Mac, vous pouvez le trouver dans le menu Affichage / Développeur / Console JavaScript ... ou vous pouvez utiliser Alt+ CMD+ J.

Primc
la source
2

Shift+ Control+ Iouvre la fenêtre de l'outil Developer. De la deuxième image en bas à gauche (qui ressemble à ce qui suit) ouvrira / masquera la console pour vous:

Afficher la console

Premanshu
la source
2

Pour ouvrir le panneau «Console» dédié, soit:

  • Utilisez les raccourcis clavier
    • Sous Windows et Linux: Ctrl+ Shift+J
    • Sur Mac: Cmd+ Option+J
  • Sélectionnez l'icône du menu Chrome, menu -> Plus d'outils -> Console JavaScript . Ou si les outils de développement Chrome sont déjà ouverts, pressl'onglet "Console".

Veuillez vous référer ici

Venkat
la source
1

Pour les utilisateurs Mac, accédez à Google Chrome -> menu Affichage -> Développeur -> Console JavaScript .

Capture d'écran

Neo123
la source
1

Google Chrome a maintenant introduit une nouvelle fonctionnalité. En utilisant cette fonctionnalité, vous pouvez modifier votre code dans la navigation Chrome. (Changement permanent sur l'emplacement du code)

Pour cela, appuyez sur F12 -> onglet Source - (côté droit) -> Système de fichiers - dans lequel veuillez sélectionner votre emplacement de code. puis le navigateur Chrome vous demandera la permission et après ce code sera coulé de couleur verte. et vous pouvez modifier votre code et cela réfléchira également sur l'emplacement de votre code (cela signifie qu'il changera de façon permanente)

Merci

stackinfostack
la source
0

Le moyen le plus efficace que j'ai trouvé pour accéder au débogueur javascript est d'exécuter ceci:

chrome://inspect

Nestor Urquiza
la source
0

F12 ouvre le panneau développeur

CTRL + MAJ + C Ouvre l'outil de survol pour inspecter où il met en surbrillance les éléments lorsque vous survolez et vous pouvez cliquer pour l'afficher dans l'onglet des éléments.

CTRL + MAJ + I Ouvre le panneau du développeur avec l'onglet console

CLIC DROIT> Inspecter Faites un clic droit sur n'importe quel élément, puis cliquez sur "inspecter" pour le sélectionner dans l'onglet Éléments du panneau Développeur.

ESC Si vous cliquez avec le bouton droit et inspectez l'élément ou similaire et que vous vous retrouvez dans l'onglet "Éléments" en regardant le DOM, vous pouvez appuyer sur ESC pour faire basculer la console de haut en bas, ce qui peut être une bonne façon d'utiliser les deux.

OG Sean
la source
0

Ce sont les outils que vous voyez

appuyez sur la F12

outils de développement

Johan Stiven Hernandez Osorio
la source
-5

À partir de la console dans Chrome, vous pouvez le faire console.log(data_to_be_displayed).

anand
la source
3
Cela n'ouvrira pas la console. Cela se connectera uniquement à la console.
Shaz