google-chrome - RIP Tutorial · Chapitre 2: Chrome DevTools Remarques Documentation du produit...

12
google-chrome #google- chrome

Transcript of google-chrome - RIP Tutorial · Chapitre 2: Chrome DevTools Remarques Documentation du produit...

google-chrome

#google-

chrome

Table des matières

À propos 1

Chapitre 1: Démarrer avec Google Chrome 2

Remarques 2

Examples 2

Installation ou configuration 2

Les extensions 3

Chapitre 2: Chrome DevTools 4

Remarques 4

Examples 4

Inspection de la structure HTML 4

Index du noeud DOM ($ 0, $ 1, etc.) 5

Chapitre 3: Extensions Chrome 7

Remarques 7

Examples 7

Action du navigateur exécutant executeScript sur une page. 7

Chapitre 4: Navigation sans tête 8

Introduction 8

Syntaxe 8

Remarques 8

Examples 8

Prendre des captures d'écran 8

Interagir avec des documents 8

Crédits 10

À propos

You can share this PDF with anyone you feel could benefit from it, downloaded the latest version from: google-chrome

It is an unofficial and free google-chrome ebook created for educational purposes. All the content is extracted from Stack Overflow Documentation, which is written by many hardworking individuals at Stack Overflow. It is neither affiliated with Stack Overflow nor official google-chrome.

The content is released under Creative Commons BY-SA, and the list of contributors to each chapter are provided in the credits section at the end of this book. Images may be copyright of their respective owners unless otherwise specified. All trademarks and registered trademarks are the property of their respective company owners.

Use the content presented in this book at your own risk; it is not guaranteed to be correct nor accurate, please send your feedback and corrections to [email protected]

https://riptutorial.com/fr/home 1

Chapitre 1: Démarrer avec Google Chrome

Remarques

Google Chrome est un navigateur Web disponible sur les plates-formes de bureau (Windows, ChromeOS, MacOS, Linux) et mobiles (Android, iOS).

Les développeurs Web doivent comprendre le cycle de publication fréquent de Chrome, les canaux de plusieurs versions, les outils de développement et les extensions de version.

Examples

Installation ou configuration

Installez Chrome en considérant d'abord la version à utiliser, pertinente si vous envisagez de faire du développement Web:

Google Chrome publie des versions majeures toutes les six semaines et donne accès à plusieurs versions du produit au fur et à mesure de leur stabilisation. Ce processus est effectué dans une série de canaux .

Stable Channel est la version publiée pour tous les utilisateurs, il s'agit de l'expérience d'installation par défaut. Il reçoit les mises à jour de sécurité nécessaires.

Beta Channel est l'endroit où la prochaine version majeure est stabilisée pendant environ 1 mois avant de passer à Stable. Il est mis à jour approximativement chaque semaine.

Dev Channel est très proche du dernier code, avec un minimum de tests. Il est mis à jour 1 ou 2 fois par semaine.

Une installation de bureau de chrome peut être déplacée des préférences Stable vers Beta ou Dev dans Chrome.

La version Canary subit un minimum de tests et est publiée quotidiennement. Il permet d'accéder au code le plus récent et peut être installé en même temps qu'une version stable, bêta et dev de Chrome.

Installez en suivant les liens vers votre choix de Stable (puis en le modifiant vers Beta ou Dev) ou Canary . Sur Android et iOS, utilisez le Play / App Store correspondant.

Étapes pour installer:

Téléchargement de Chrome Pour PC / Mac / Linux1.

Cliquez sur "Télécharger Chrome". Cela ouvrira la fenêtre Conditions d'utilisation.2.

Déterminez si vous souhaitez que Chrome soit votre navigateur par défaut.3.

https://riptutorial.com/fr/home 2

Si vous le définissez comme navigateur par défaut, il s’ouvrira chaque fois qu’un clic sur une page Web sera cliqué dans un autre programme, tel que le courrier électronique.

Vous pouvez choisir de renvoyer les données d'utilisation à Google en cochant la case intitulée «Aidez Google à mieux gérer Google Chrome». Cela renverra les rapports d'erreur, les préférences et les clics de bouton. Il n'envoie pas d'informations personnelles ni de sites Web de suivi.

Cliquez sur «Accepter et installer» après avoir lu les conditions d'utilisation. L'installateur démarrera et Google Chrome sera installé une fois terminé.

4.

Les extensions

Google Chrome prend en charge les extensions qui améliorent le fonctionnement du navigateur. Ils peuvent ajouter des fonctionnalités aux pages Web ou à l'interface utilisateur du navigateur. Tout développeur peut créer une extension et la répertorier dans le Chrome Web Store.

Voir plus sur la page des extensions .

Lire Démarrer avec Google Chrome en ligne: https://riptutorial.com/fr/google-chrome/topic/4203/demarrer-avec-google-chrome

https://riptutorial.com/fr/home 3

Chapitre 2: Chrome DevTools

Remarques

Documentation du produit Chrome DevTools .

Examples

Inspection de la structure HTML

Sur une version de bureau de Chrome, le contenu de la page peut être inspecté. Cela montre le modèle d'objet de document (DOM) du HTML, les styles de feuilles de style en cascade (CSS) et bien plus encore.

Entrez l'inspection par l'une des nombreuses options suivantes:

Faites un clic droit sur une page Web et sélectionnez Inspecter•Dans le menu Chrome, sélectionnez Autres outils , Outils de développement.•Utilisez un raccourci clavier, par exemple Ctrl + Shift + I sous Windows.•

https://riptutorial.com/fr/home 4

Index du noeud DOM ($ 0, $ 1, etc.)

Dans les outils de développement de Google Chrome "Elements", vous pouvez voir que la ligne sélectionnée affiche ==$0 qui est l'index du noeud DOM (comme indiqué ci-dessous):

https://riptutorial.com/fr/home 5

$ 0 renvoie le dernier élément ou objet JavaScript sélectionné, $ 1 renvoie le deuxième élément le plus récemment sélectionné, etc.

Ceci est utile dans le débogage. Les commandes $ 0, $ 1, $ 2, $ 3 et $ 4 servent de référence historique aux cinq derniers éléments DOM inspectés dans le panneau Eléments ou aux cinq derniers objets de segment de code JavaScript sélectionnés dans le panneau Profils.

Lire Chrome DevTools en ligne: https://riptutorial.com/fr/google-chrome/topic/6762/chrome-devtools

https://riptutorial.com/fr/home 6

Chapitre 3: Extensions Chrome

Remarques

Google Chrome prend en charge les extensions qui améliorent le fonctionnement du navigateur. Ils peuvent ajouter des fonctionnalités aux pages Web ou à l'interface utilisateur du navigateur.

Examples

Action du navigateur exécutant executeScript sur une page.

manifest.json

{ "name": "Hello Page", "description": "Add 'Hello' to the current page.", "version": "1.0", "permissions": [ "activeTab" ], "background": { "scripts": ["background.js"], "persistent": false }, "browser_action": { "default_title": "Say Hello on this page" }, "manifest_version": 2 }

background.js

chrome.browserAction.onClicked.addListener(function(tab) { chrome.tabs.executeScript({ code: 'document.body.insertAdjacentText("beforeBegin", "Hello!")' }); });

Lire Extensions Chrome en ligne: https://riptutorial.com/fr/google-chrome/topic/4441/extensions-chrome

https://riptutorial.com/fr/home 7

Chapitre 4: Navigation sans tête

Introduction

Chrome prend en charge la navigation sans tête qui est exposée via un commutateur pouvant être utilisé lors du démarrage du processus. Cela permet d'ouvrir des pages sans créer de fenêtre de navigateur. Un environnement graphique n'est donc pas nécessaire.

Utilisé en conjonction avec une appliance qui se connecte au port de débogage distant, il permet d'interagir avec le document, ce qui est particulièrement utile pour les tests et l'automatisation CI, où un environnement graphique n'est pas nécessaire pour obtenir des résultats ou n'est pas disponible.

Syntaxe

chrome --headless $ SWITCHES https://stackoverflow.com•

Remarques

Historiquement, d'autres utilisateurs ont réussi à utiliser Chrome en tant que navigateur sans tête en exécutant le processus dans un affichage masqué .

Invoquer Chrome directement n'est pas la seule option disponible pour l'utiliser comme navigateur sans tête. L' API Embedder permet également d'utiliser Chrome directement depuis le processus de l'application.

Examples

Prendre des captures d'écran

Ce qui suit produira une image PNG dans le répertoire actuel de la page chargée.

chrome --headless --screenshot https://stackoverflow.com

Interagir avec des documents

L'utilisation du port --remote-debugging-port pour exposer un débogueur accessible via HTTP est un moyen pour les appliances de se connecter et d'interagir avec le document à l'aide du protocole de débogage Chrome.

chrome --headless --remote-debugging-port=9222 https://stackoverflow.com

Vous pouvez ensuite accéder à http: // localhost: 9222 et utiliser Chrome DevTools de manière interactive.

Lire Navigation sans tête en ligne: https://riptutorial.com/fr/google-chrome/topic/8619/navigation-

https://riptutorial.com/fr/home 8

sans-tete

https://riptutorial.com/fr/home 9