Google Chrome DevTools

1. Ouvrir DevTools

Google Chrome DevTools, c’est un ensemble d’outils de développement intégré dans le navigateur Chrome, qui permet d’explorer et d’analyser les pages web. Pour un scrapeur web, DevTools devient un outil indispensable, car il permet de comprendre la structure des pages, d’identifier les sélecteurs, d’analyser le contenu dynamique et les requêtes réseau. Dans cet article, on va voir comment DevTools peut aider un scrapeur web à collecter des données et à améliorer l’efficacité du scraping.

Pour ouvrir Chrome DevTools, tu peux :

• Appuyer sur F12 ou Ctrl+Shift+I (Windows) ou Cmd+Opt+I (Mac).
• Faire un clic droit sur la page et choisir Afficher le code ou Inspecter.

Les outils s’ouvriront dans un nouveau panneau, généralement en bas ou à droite de la fenêtre du navigateur. Le panneau DevTools contient plusieurs onglets, chacun conçu pour effectuer des tâches spécifiques, essentielles pour un scrapeur web.

Les onglets DevTools les plus utiles pour un scrapeur web sont : Elements, Console, Network, Sources et Application.

2. Onglet Elements

Onglet Elements : explorer le HTML et le CSS

L’onglet Elements, c’est l'outil principal pour analyser la structure d'une page et sélectionner des éléments. Tu peux y voir, modifier et copier la structure HTML et CSS d'une page.

Fonctionnalités principales de l’onglet Elements :

• Identifier les sélecteurs. Clique sur l’icône en forme de flèche dans le coin supérieur gauche du panneau et sélectionne n’importe quel élément sur la page. Le code HTML correspondant s’affichera dans DevTools. Pratique pour trouver les attributs id, class, etc., qui peuvent être utilisés pour des sélecteurs CSS ou XPath en scraping.
• Modifier le HTML et le CSS en temps réel. Tu peux changer le HTML ou le CSS des éléments pour des tests visuels, ce qui aide à comprendre comment les changements affectent la page. Par exemple, cacher certains éléments ou changer la couleur pour mieux identifier les parties intéressantes de la page.
• Copier des sélecteurs. En cliquant droit sur un élément, tu peux choisir « Copy » et copier son sélécteur CSS ou XPath, très pratique pour automatiser le scraping.

Exemple : Si tu veux sélectionner le texte du titre <h1>, clique dessus et copie son sélecteur, pour l’utiliser ensuite dans ton code pour l’extraction.

3. Onglet Console

Onglet Console : exécuter du JavaScript pour le contenu dynamique

Console te permet de saisir et exécuter du code JavaScript directement sur la page. Super utile pour interagir avec le contenu dynamique et analyser le JavaScript qui contrôle certains éléments.

Utilisation de Console pour le scraping :

• Extraire des données avec du JavaScript. Tu peux tester simplement des commandes comme document.querySelector pour voir si ton sélecteur est bon.
• Exécuter du code pour interagir avec les éléments. Par exemple, si tu dois « cliquer » sur un bouton ou « charger » une partie du contenu, Console te permet de simuler ça pour tester les réactions des éléments.
• Détecter les erreurs. Si tu fais du scraping avec de l’automatisation, l’onglet Console montre les erreurs JavaScript ou réseau pour t’aider à comprendre pourquoi certaines choses ne se chargent pas.

Exemple : Pour tester la sélection d’un bouton avec la classe load-more, dans Console tu peux écrire document.querySelector('.load-more').click() et voir comment il réagit.

4. Onglet Network

Onglet Network : analyser les requêtes réseau

Network est un onglet clé pour suivre les requêtes réseau effectuées par une page. Beaucoup de sites chargent du contenu avec des requêtes asynchrones (comme AJAX), ce qui peut rendre le scraping plus compliqué. Network te permet de surveiller toutes les requêtes réseau, d’en faire des copies et d’analyser les réponses du serveur.

Fonctionnalités principales de l’onglet Network :

• Suivre les requêtes AJAX. En chargeant une page, tu peux voir toutes les requêtes et les réponses correspondantes. C’est super utile si les données se chargent dynamiquement. On peut suivre les requêtes retournant les données nécessaires, et ensuite les reproduire dans son code.
• Copier des requêtes. Clique droit sur une requête pour la copier en tant que cURL ou fetch. Ça te permet de rejouer ces requêtes pour récupérer directement des données du serveur.
• Analyser les paramètres de requête. Network affiche les headers, les paramètres et les cookies envoyés avec les requêtes. Tu peux comprendre ce que le serveur attend pour exécuter une requête. Par exemple, beaucoup de sites utilisent des tokens d’authentification : analyser les headers t’aide à contourner ces limites.

Exemple : Si les données se chargent de façon dynamique via une requête AJAX, tu peux trouver la requête dans Network, regarder son URL et sa réponse, pour ensuite l’utiliser directement dans ton script.

5. Onglet Sources

Onglet Sources : explorer le JavaScript et le contenu dynamique

Sources est l’onglet où tu peux explorer les fichiers JavaScript, CSS, images et autres ressources de la page. Pour le scrapeur web, cet onglet est utile pour étudier la logique du site et le chargement du contenu dynamique.

Fonctionnalités principales de l’onglet Sources :

• Chercher les fichiers JavaScript. Sur beaucoup de pages, des données ou des fonctionnalités se chargent via du JavaScript. Tu peux trouver et ouvrir le fichier JavaScript dans Sources pour voir sa logique.
• Placer des breakpoints. Cela te permet de stopper le code à une ligne précise pour voir comment les données se chargent ou comment les éléments interagissent. Utile pour les pages avec un JavaScript complexe.
• Suivre les valeurs des variables. Tu peux suivre les changements de variables et mieux comprendre la logique du site, surtout si le contenu se charge dans des fonctions JavaScript compliquées.

6. Onglet Application

Onglet Application : travailler avec les cookies et le Local Storage

Application est l’onglet pour explorer les cookies, le Local Storage et d’autres données stockées côté client. Ces données sont utiles pour comprendre les sites qui requièrent une authentification ou qui suivent l’activité des utilisateurs.

Fonctionnalités principales de l’onglet Application pour le scrapeur web :

• Analyser les cookies. Beaucoup de sites utilisent les cookies pour l’authentification ou le suivi des utilisateurs. Si tu analyses des requêtes nécessitant une authentification, l’onglet Application te montre les cookies nécessaires pour accéder au contenu.
• Explorer le Local Storage et le Session Storage. Ces stockages servent aussi à sauvegarder des infos côté client. Si un site charge des données ou des configurations depuis le Local Storage, tu peux extraire ces infos pour ton scraping.
• Travailler avec les tokens d’authentification. Certains sites gardent leurs tokens dans le Local Storage ou les cookies. En connaissant ces tokens et comment ils se renouvellent, tu peux accéder aux données via une API ou des requêtes AJAX.

Exemple : Si un site demande une authentification, l’onglet Application te permet d’extraire les cookies ou tokens nécessaires pour effectuer les requêtes.

7. Conseils pratiques

Conseils pratiques pour utiliser DevTools en scraping

• Cherche les données dans Network. Si le contenu se charge de manière asynchrone, trouve la bonne requête dans Network et analyse son URL, ses paramètres et ses headers.
• Teste les sélecteurs dans Console. Avant d’écrire du code pour le scraping, tu peux tester les sélecteurs dans Console avec des commandes comme document.querySelector ou document.querySelectorAll.
• Copie les requêtes fetch pour les API. Si un site utilise une API, Network te permet de copier la requête pour la tester dans ton script, afin de récupérer directement les données sans passer par le HTML.
• Explore les scripts qui gèrent le contenu. Dans Sources, trouve les fichiers JavaScript qui contrôlent le contenu dynamique et adapte leur logique pour ton scraping.
• Analyse les cookies et les tokens d’authentification. Certains sites protègent les données avec des cookies ou tokens, que tu peux sauvegarder et transmettre dans tes requêtes.