Automatiquement ouvrir les outils de développement Chrome lorsque nouvel onglet/nouvelle fenêtre est ouvert

Question

J'ai une application HTML5 qui s'ouvre dans une nouvelle fenêtre à chaque fois que je clique sur un lien. Je suis un peu fatigué d'appuyer sur la commande Shift + I à chaque fois que je veux enregistrer la communication réseau pour lancer les Outils de développement car j'en ai toujours besoin. Je n'ai pas trouvé d'option pour activer automatiquement les Outils de développement au démarrage.

Y a-t-il un moyen d'ouvrir automatiquement les Outils de développement lorsque une nouvelle fenêtre s'ouvre dans Chrome?

Answer 1

Avec la fenêtre des outils de développement visible, cliquez sur l'icône du menu (les trois points verticaux dans le coin supérieur droit) et cliquez sur Paramètres.

Sous Outils de développement, cochez l'option Ouvrir automatiquement les outils de développement pour les pop-ups

Answer 2

Comme indiqué dans cet autre post : Outils de développement Chrome : Comment suivre le réseau pour un lien qui ouvre un nouvel onglet ?

chrome://net-internals/#events

est une solution alternative

Answer 3

F12 est plus facile que Ctrl+Shift+I

Voici tous les raccourcis pour ouvrir DevTools :

OS

Éléments

Console

Votre dernier panneau

Windows ou Linux

Ctrl + Shift + C

Ctrl + Shift + J

F12
Ctrl + Shift + I

Mac

Cmd + Option + C

Cmd + Option + J

Fn + F12
Cmd + Option + I

Answer 4

Si vous utilisez Visual Studio Code (vscode), en utilisant l'extension vscode chrome debug très populaire (https://github.com/Microsoft/vscode-chrome-debug), vous pouvez configurer un fichier de configuration de lancement launch.json et spécifier l'ouverture de l'outil de développement pendant une session de débogage.

Voici le launch.json que j'utilise pour mes projets React :

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Lancer Chrome contre localhost",
      "url": "http://localhost:3000",
      "runtimeArgs": ["--auto-open-devtools-for-tabs"],
      "webRoot": "${workspaceRoot}/src"
    }
  ]
}

La ligne importante est "runtimeArgs": ["--auto-open-devtools-for-tabs"],

À partir de vscode, vous pouvez maintenant taper F5, Chrome ouvre votre application et l'onglet console également.

Answer 5

Je suis venu ici chercher une solution similaire. Je voulais vraiment voir la sortie de chrome pour le chargement de la page à partir d'un nouvel onglet (une soumission de formulaire dans mon cas).

La solution que j'ai effectivement utilisée était de modifier l'attribut target du formulaire pour que la soumission du formulaire se fasse dans l'onglet actuel. Ensuite, j'ai pu capturer la requête réseau. Problème résolu!