From e26d24940b2234a1a5e63b19d19d298bf36354e2 Mon Sep 17 00:00:00 2001 From: julieng Date: Sun, 14 Nov 2021 14:30:32 +0100 Subject: move *.html to *.md --- .../what_are_browser_developer_tools/index.html | 170 --------------------- .../what_are_browser_developer_tools/index.md | 170 +++++++++++++++++++++ 2 files changed, 170 insertions(+), 170 deletions(-) delete mode 100644 files/fr/learn/common_questions/what_are_browser_developer_tools/index.html create mode 100644 files/fr/learn/common_questions/what_are_browser_developer_tools/index.md (limited to 'files/fr/learn/common_questions/what_are_browser_developer_tools') diff --git a/files/fr/learn/common_questions/what_are_browser_developer_tools/index.html b/files/fr/learn/common_questions/what_are_browser_developer_tools/index.html deleted file mode 100644 index b8b05fb694..0000000000 --- a/files/fr/learn/common_questions/what_are_browser_developer_tools/index.html +++ /dev/null @@ -1,170 +0,0 @@ ---- -title: Découvrir les outils de développement des navigateurs -slug: Learn/Common_questions/What_are_browser_developer_tools -tags: - - Beginner - - Browser - - CSS - - CodingScripting - - DevTools - - HTML - - JavaScript - - Learn -translation_of: Learn/Common_questions/What_are_browser_developer_tools -original_slug: Apprendre/Découvrir_outils_développement_navigateurs ---- -
{{IncludeSubnav("/fr/Apprendre")}}
- -
{{Previous("Apprendre/Commencer_avec_le_web")}}
- -

Tous les navigateurs modernes possèdent un ensemble d'outils destinés aux développeurs. Ces outils permettent de réaliser différentes actions : inspecter le code HTML, CSS ou JavaScript chargé à la volée dans la page, montrer les fichiers téléchargés et le temps de chargement, etc. Dans cet article, nous verrons comment utiliser les fonctionnalités basiques des outils de développements d'un navigateur (parfois appelés avec l'anglicisme « devtools »).

- -
-

Note : Avant de poursuivre avec les exemples présentés ci-après, nous vous conseillons d'utiliser l'exemple construit dans la série d'articles Commencer avec le Web et d'ouvrir le site dans votre navigateur pour poursuivre avec les étapes suivantes.

-
- -

Comment ouvrir les outils de développement d'un navigateur

- -

Les devtools s'affichent généralement dans une sous-fenêtre du navigateur, de la façon suivante (cela peut varier légèrement) :

- -

Affichage de la fenêtre principale avec les devtools ouverts

- -

Comment faire pour que cette sous-fenêtre apparaisse ? Trois méthodes :

- - - -

Menu contextuel suite au clic-droit

- -

L'inspecteur : explorateur du DOM et éditeur CSS

- -

Lorsqu'ils s'ouvrent, les outils de développement s'affichent comme illustré dans la capture d'écran ci-après. Cet outil permet de voir le HTML présent sur la page au moment où celle-ci est affiché, de façon dynamique. Il permet aussi de voir quelles règles CSS sont appliquées pour chaque élément de la page. Grâce à cet outil, on peut modifier le HTML et le CSS de façon instantanée et voir les changements appliqués immédiatement à la page affichée dans le navigateur.

- -

Affichage de la fenêtre principale avec les devtools ouverts

- -

Si vous n'arrivez pas sur l'inspecteur :

- - - -

Manipuler l'inspecteur du DOM

- -

Pour commencer, cliquez-droit sur un élément HTML dans l'inspecteur du DOM et regardez le menu contextuel qui s'affiche. Les options du menu qui apparaît peuvent varier d'un navigateur à un autre mais les options les plus importantes s'y trouvent toujours :

- -

Menu contextuel ouvert suite à un clic-droit sur un élément HTML dans l'explorateur du DOM

- - - -

Essayez d'éditer le DOM de votre page. Double-cliquez sur un élément ou cliquez-droit puis choisissez « Modifier comme HTML » depuis le menu contextuel. Vous pouvez modifier tout ce que vous voulez mais vous ne pouvez pas sauvegarder vos modifications.

- -

Manipuler l'éditeur CSS

- -

Par défaut, l'éditeur CSS affiche les règles CSS qui s'appliquent à l'élément qui est sélectionné :

- -

- -

Ces fonctionnalités sont plutôt pratiques :

- - - -

Vous aurez remarqué plusieurs onglets en haut du panneau pour le CSS :

- - - -

En savoir plus

- -

Pour en apprendre plus sur l'inspecteur présent dans les différents navigateurs, les ressources suivantes pourront vous être particulièrement utiles :

- - - -

La console JavaScript

- -

La console JavaScript est un outil formidable pour déboguer du code JavaScript qui ne fonctionne pas comme on le souhaite. Elle permet d'exécuter des lignes de JavaScript sur la page qui est actuellement chargée dans le navigateur et de rapporter les erreurs rencontrées lorsque le navigateur souhaite exécuter le code. Pour accéder à la console dans n'importe quel navigateur, il suffit de cliquer/appuyer sur l'onglet Console (sous Internet Explorer, appuyez sur Ctrl + 2.) Cela affichera une fenêtre qui ressemblera à :

- -

Console JavaScript

- -

Pour voir comment la console se comporte, essayez de saisir les fragments de code suivants dans la console (un par un), en appuyant sur Entrée après chaque :

- -
    -
  1. - 
    alert('Coucou !');
    -
    2. -
  2. - 
    document.querySelector('html').style.backgroundColor = 'purple';
    -
    3. -
  3. - 
    var monImage = document.createElement('img');
-monImage.setAttribute('src','https://c1.staticflickr.com/1/572/20463320350_58483f6bed.jpg');
-document.querySelector('h1').appendChild(monImage);
    -
    4. -
- -

Maintenant, essayez de saisir les fragments de code suivants, qui sont incorrects, pour voir ce qui se passe :

- -
    -
  1. - 
    alert('coucou !);
    -
    2. -
  2. - 
    document.cheeseSelector('html').style.backgroundColor = 'purple';
    -
    3. -
  3. - 
    var monImage = document.createElement('img');
-maBanane.setAttribute('src','https://c1.staticflickr.com/1/572/20463320350_58483f6bed.jpg');
-document.querySelector('h1').appendChild(monImage);
    -
    4. -
- -

Vous devriez voir différentes erreurs fournies par le navigateur. À première vue, ces erreurs semblent un peu étranges et complexes mais elles devraient être simples à résoudre !

- -

En savoir plus

- -

Pour en apprendre plus sur la console JavaScript présente dans les différents navigateurs, les ressources listées ici devraient vous être utiles :

- - diff --git a/files/fr/learn/common_questions/what_are_browser_developer_tools/index.md b/files/fr/learn/common_questions/what_are_browser_developer_tools/index.md new file mode 100644 index 0000000000..b8b05fb694 --- /dev/null +++ b/files/fr/learn/common_questions/what_are_browser_developer_tools/index.md @@ -0,0 +1,170 @@ +--- +title: Découvrir les outils de développement des navigateurs +slug: Learn/Common_questions/What_are_browser_developer_tools +tags: + - Beginner + - Browser + - CSS + - CodingScripting + - DevTools + - HTML + - JavaScript + - Learn +translation_of: Learn/Common_questions/What_are_browser_developer_tools +original_slug: Apprendre/Découvrir_outils_développement_navigateurs +--- +
{{IncludeSubnav("/fr/Apprendre")}}
+ +
{{Previous("Apprendre/Commencer_avec_le_web")}}
+ +

Tous les navigateurs modernes possèdent un ensemble d'outils destinés aux développeurs. Ces outils permettent de réaliser différentes actions : inspecter le code HTML, CSS ou JavaScript chargé à la volée dans la page, montrer les fichiers téléchargés et le temps de chargement, etc. Dans cet article, nous verrons comment utiliser les fonctionnalités basiques des outils de développements d'un navigateur (parfois appelés avec l'anglicisme « devtools »).

+ +
+

Note : Avant de poursuivre avec les exemples présentés ci-après, nous vous conseillons d'utiliser l'exemple construit dans la série d'articles Commencer avec le Web et d'ouvrir le site dans votre navigateur pour poursuivre avec les étapes suivantes.

+
+ +

Comment ouvrir les outils de développement d'un navigateur

+ +

Les devtools s'affichent généralement dans une sous-fenêtre du navigateur, de la façon suivante (cela peut varier légèrement) :

+ +

Affichage de la fenêtre principale avec les devtools ouverts

+ +

Comment faire pour que cette sous-fenêtre apparaisse ? Trois méthodes :

+ + + +

Menu contextuel suite au clic-droit

+ +

L'inspecteur : explorateur du DOM et éditeur CSS

+ +

Lorsqu'ils s'ouvrent, les outils de développement s'affichent comme illustré dans la capture d'écran ci-après. Cet outil permet de voir le HTML présent sur la page au moment où celle-ci est affiché, de façon dynamique. Il permet aussi de voir quelles règles CSS sont appliquées pour chaque élément de la page. Grâce à cet outil, on peut modifier le HTML et le CSS de façon instantanée et voir les changements appliqués immédiatement à la page affichée dans le navigateur.

+ +

Affichage de la fenêtre principale avec les devtools ouverts

+ +

Si vous n'arrivez pas sur l'inspecteur :

+ + + +

Manipuler l'inspecteur du DOM

+ +

Pour commencer, cliquez-droit sur un élément HTML dans l'inspecteur du DOM et regardez le menu contextuel qui s'affiche. Les options du menu qui apparaît peuvent varier d'un navigateur à un autre mais les options les plus importantes s'y trouvent toujours :

+ +

Menu contextuel ouvert suite à un clic-droit sur un élément HTML dans l'explorateur du DOM

+ + + +

Essayez d'éditer le DOM de votre page. Double-cliquez sur un élément ou cliquez-droit puis choisissez « Modifier comme HTML » depuis le menu contextuel. Vous pouvez modifier tout ce que vous voulez mais vous ne pouvez pas sauvegarder vos modifications.

+ +

Manipuler l'éditeur CSS

+ +

Par défaut, l'éditeur CSS affiche les règles CSS qui s'appliquent à l'élément qui est sélectionné :

+ +

+ +

Ces fonctionnalités sont plutôt pratiques :

+ + + +

Vous aurez remarqué plusieurs onglets en haut du panneau pour le CSS :

+ + + +

En savoir plus

+ +

Pour en apprendre plus sur l'inspecteur présent dans les différents navigateurs, les ressources suivantes pourront vous être particulièrement utiles :

+ + + +

La console JavaScript

+ +

La console JavaScript est un outil formidable pour déboguer du code JavaScript qui ne fonctionne pas comme on le souhaite. Elle permet d'exécuter des lignes de JavaScript sur la page qui est actuellement chargée dans le navigateur et de rapporter les erreurs rencontrées lorsque le navigateur souhaite exécuter le code. Pour accéder à la console dans n'importe quel navigateur, il suffit de cliquer/appuyer sur l'onglet Console (sous Internet Explorer, appuyez sur Ctrl + 2.) Cela affichera une fenêtre qui ressemblera à :

+ +

Console JavaScript

+ +

Pour voir comment la console se comporte, essayez de saisir les fragments de code suivants dans la console (un par un), en appuyant sur Entrée après chaque :

+ +
    +
  1. + 
    alert('Coucou !');
    +
    2. +
  2. + 
    document.querySelector('html').style.backgroundColor = 'purple';
    +
    3. +
  3. + 
    var monImage = document.createElement('img');
+monImage.setAttribute('src','https://c1.staticflickr.com/1/572/20463320350_58483f6bed.jpg');
+document.querySelector('h1').appendChild(monImage);
    +
    4. +
+ +

Maintenant, essayez de saisir les fragments de code suivants, qui sont incorrects, pour voir ce qui se passe :

+ +
    +
  1. + 
    alert('coucou !);
    +
    2. +
  2. + 
    document.cheeseSelector('html').style.backgroundColor = 'purple';
    +
    3. +
  3. + 
    var monImage = document.createElement('img');
+maBanane.setAttribute('src','https://c1.staticflickr.com/1/572/20463320350_58483f6bed.jpg');
+document.querySelector('h1').appendChild(monImage);
    +
    4. +
+ +

Vous devriez voir différentes erreurs fournies par le navigateur. À première vue, ces erreurs semblent un peu étranges et complexes mais elles devraient être simples à résoudre !

+ +

En savoir plus

+ +

Pour en apprendre plus sur la console JavaScript présente dans les différents navigateurs, les ressources listées ici devraient vous être utiles :

+ + -- cgit v1.2.3-54-g00ecf