Comment lancer le débogueur JavaScript dans Google Chrome?

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

Windows: CTRL- SHIFT- JOU F12

Mac: ⌥- ⌘-J

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

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.

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

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.

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

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.

Ici, vous pouvez trouver les raccourcis pour accéder aux outils de développement.

https://developer.chrome.com/devtools/docs/shortcuts

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:

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

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

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

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

chrome://inspect

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.

Ce sont les outils que vous voyez

appuyez sur la F12

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