web-dev-qa-db-fra.com

ChromeDev Tools: comment tracer le réseau d'un lien qui ouvre un nouvel onglet?

Je souhaite suivre l'activité du réseau lorsque je clique sur un lien. Le problème est que le lien ouvre un nouvel onglet, et apparemment, les outils de développement fonctionnent par onglet pour lequel il était ouvert. "Conserver la journalisation sur la navigation" n'aide pas.

Ma solution actuelle consiste à migrer vers FireFox et HttpFox qui ne présentent pas ce problème. Je me demande comment tous les développeurs de Chrome gèrent, cela semble assez basique (bien sûr, j'ai cherché la réponse, mais rien n'a été utile).

google-chromegoogle-chrome-devtools
198
davka

Consultez chrome://net-internals/#events (ou chrome://net-export dans la dernière version de Chrome) pour un aperçu détaillé de tous les événements réseau survenant dans votre navigateur.

Une autre solution possible, en fonction de votre problème spécifique, consiste peut-être à activer "Conserver le journal" dans l'onglet "Réseau":

DevTools > Network > Preserve log

et forcez tous les liens à s'ouvrir dans le même onglet en exécutant le code suivant dans la console:

[].forEach.call(document.querySelectorAll('a'),
    function(link){
        if(link.attributes.target) {
            link.attributes.target.value = '_self';
        }
    });

window.open = function(url) {
    location.href = url;
};
196
Konrad Dzwinel

La demande de fonctionnalité mentionnée dans le commentaire par phsource a été implémentée.

Dans les versions récentes (à partir de Chrome 50), vous pouvez accéder au menu Paramètres des outils de développement (ouvrez Outils de développement, puis utilisez le menu 3 points ou appuyez sur F1) et cochez la case "Ouvrir automatiquement DevTools pour les popups".

92
user2404501

Dans Chrome 61.0.3163.100, l'option suivante est disponible. Vous pouvez y accéder en accédant au Chrome Paramètres du Dev Tools. C'est en bas.

Web Inspector settings

18
Konrad Piascik
  • Ajouter/mettre à jour le lien vers target="_self"
  • Cochez "Conserver les journaux lors de la navigation" dans l'onglet Réseau.
  • Cliquez sur le lien pour que votre demande soit enregistrée.
11
Sebastien Lorber

Vous pouvez le faire de cette façon:

  1. set target = "any_window_name" sur le lien recherché.
  2. cliquez une fois sur ce lien pour l'ouvrir dans un nouvel onglet.
  3. Dans l'onglet ouvert, ouvrez les outils de développement.

  4. retournez à la page d'origine et cliquez à nouveau sur ce lien.

    Le résultat sera chargé dans la fenêtre déjà préparée avec les outils de développement ouverts.

    Vous pouvez activer l'option "Conserver le journal" dans les outils de développement (voir l'excellente réponse de Konrad Dzwinel) pour intercepter le trafic de redirection sur ce lien.

    Remarque : la plupart des personnes familiarisées avec la cible de lien {_self, _blank, _parent, _top}. Mais en réalité, n'importe quel nom peut être donné, cela ouvrira une nouvelle fenêtre portant ce nom et tous les clics ultérieurs sur des liens, des formulaires ou window.open avec la même valeur cible seront ouverts dans la même fenêtre. Lectures supplémentaires - mdn: window.open , mdn: <a> tag

8
Michael L.

Si le lien ouvert ne redirige pas, vous pouvez ouvrir l'onglet Réseau dans le nouvel onglet, puis actualiser l'onglet.

3
orgads

Rapidement frappé F12 quand nouvel onglet s'ouvre

https://stackoverflow.com/a/13747562/660408

Fonctionne pour moi lorsque je contrôle les réponses de téléchargement de Google Drive

2
gkiko

* Avertissement: Publié par le développeur de HttpWatch *

HttpWatch sous Windows peut enregistrer le trafic réseau généré lors de l'ouverture d'un nouvel onglet ou fenêtre Chrome en activant l'enregistrement automatique dans Outils-> Options-> Enregistrement. Dans la nouvelle fenêtre, cliquez sur l'icône HttpWatch pour afficher la trace du réseau.

Le version gratuite fournira des informations de base telles que l'URL, le code d'état et le temps écoulé pour chaque demande.

* Avertissement: Publié par le développeur de HttpWatch *

0
HttpWatchSupport