diff options
Diffstat (limited to 'files/fr/outils/tips')
| -rw-r--r-- | files/fr/outils/tips/index.html | 129 |
1 files changed, 129 insertions, 0 deletions
diff --git a/files/fr/outils/tips/index.html b/files/fr/outils/tips/index.html new file mode 100644 index 0000000000..45a45cf7c1 --- /dev/null +++ b/files/fr/outils/tips/index.html @@ -0,0 +1,129 @@ +--- +title: Astuces +slug: Outils/Tips +tags: + - Dev Tools + - Développement Web + - Outils + - outils de développement +translation_of: Tools/Tips +--- +<div>{{ToolsSidebar}}</div> + +<h2 id="Géneral">Géneral</h2> + +<p>Capture d'écran:</p> + +<ul> + <li>Page entière: cliquez sur le bouton de capture d'écran (<img alt="Bouton pour prendre une capture de la page" src="https://mdn.mozillademos.org/files/14191/Screenshot%20button.png" style="height: 18px; width: 18px;">; <a href="/fr/docs/Tools/Tools_Toolbox#Extra_tools">doit d'abord être activé</a>).</li> + <li>Partie visible de l'écran: cliquez sur le bouton de capture d'écran (<img alt="Button to take screenshots of the entire page" src="https://mdn.mozillademos.org/files/14191/Screenshot%20button.png" style="height: 18px; width: 18px;">) du <a href="fr/docs/Outils/Vue_adaptative">mode Vue Adaptative</a>.</li> + <li>noeud: clic droit sur le noeud dans l'inspecteur et cliquez sur <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Screenshot Node">"Prendre une capture du noeud"</a>.</li> + <li>Via la <a href="/fr/docs/Tools/Web_Console/Helpers">commande Console</a>: <code>screenshot [nom-du-fichier] --fullpage</code>.</li> +</ul> + +<p>Paramètres:</p> + +<ul> + <li>Choisir entre un <a href="/fr/docs/Outils/Settings">thème lumineux et un thème sombre</a> pour les outils de développement.</li> + <li><a href="/fr/docs/Outils/Settings#Pr%C3%A9f%C3%A9rences_de_l%27%C3%A9diteur">Modifiez la correspondance du clavier</a> pour Vim, Emacs ou Sublime Text s<span class="short_text" id="result_box" lang="fr"><span>i vous êtes habitué à des raccourcis </span></span><span class="short_text" lang="fr"><span>différents</span></span>.</li> + <li><span id="result_box" lang="fr"><span>Cochez ou décochez les différents outils pour les activer ou les désactiver.</span></span> (Il y en a plus que les outils par défaut !)</li> +</ul> + +<h2 id="Inspecteur_de_page">Inspecteur de page</h2> + +<p>Dans l'onglet <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">Inspecteur</a>:</p> + +<ul> + <li>Pressez <kbd>H</kbd> quand un noeud est sélectionné pour le cacher/l'afficher.</li> + <li>Pressez <kbd>Retour</kbd> ou <kbd>Suppr</kbd> quand un noeud est sélectionné pour le supprimer.</li> + <li><kbd>Alt</kbd> + clic sur un noeud pour le développer/réduire lui-même ainsi que l'ensemble de ses noeuds enfants.</li> + <li>Cliquez sur le dernier élément du <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_breadcrumbs">fil d’Ariane</a> pour faire défiler la sélection dans l'inspecteur de page.</li> + <li>Cliquez sur l’icône "ev" à côté du noeud pour <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_event_listeners">voir tous les évènements qui écoutent sur ce noeud</a>.</li> + <li>Pressez <kbd>S</kbd> avec un noeud sélectionné pour le voir dans la page (idem qu'un clic-droit sur un noeud puis <a href="fr/docs/Outils/Inspecteur/Comment/Examiner_et_éditer_le_code_HTML#Scroll Into View">"Faire défiler la vue jusqu'au noeud"</a>).</li> + <li>Cliquez-droit sur un noeud et cliquez sur <a href="/fr/docs/Outils/Inspecteur/Comment/Examiner_et_éditer_le_code_HTML#Menu_contextuel">"Utiliser dans la console"</a> pour utiliser <a href="/fr/docs/Outils/Console_Web/The_command_line_interpreter">la ligne de commande</a> avec ce noeud en tant que variable <code>temp<var>N</var></code>.</li> +</ul> + +<p>Lors de la <a href="/fr/docs/Outils/Inspecteur/UI_Tour#Le_bouton_de_s%C3%A9lection_d%27%C3%A9l%C3%A9ment">sélection des éléments:</a></p> + +<ul> + <li><kbd>Maj</kbd> + clic pour sélectionner un élément en conservant la sélection (Le mode sélection ne se désengage pas).</li> + <li>Utilisez <kbd>←</kbd>/<kbd>→</kbd> pour naviguer sur l’élément parent/enfant (si ils sont trop durs à sélectionner).</li> +</ul> + +<p>Dans la <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">vue des règles CSS</a>:</p> + +<ul> + <li>Cliquez sur l’Icône d'inspection (<img alt="" src="https://mdn.mozillademos.org/files/14185/picker.png" style="height: 18px; width: 18px;">) à côté de n'importe quel sélecteur pour surligner tous les éléments qui correspondent.</li> + <li>Cliquez sur l'icône d'inspection (<img alt="" src="https://mdn.mozillademos.org/files/14185/picker.png" style="height: 18px; width: 18px;">) à côté de la règle de l'<code>element{}</code> pour bloquer le surlignage sur l'élément courant.</li> + <li>Cliquez droit sur n'importe quelle propriété et sélectionnez "Afficher la documentation MDN" pour <a href="/fr/docs/Outils/Inspecteur/Comment/Examiner_et_modifier_le_CSS#Obtenir_de_l'aide_sur_les_propriétées_CSS">voir la documentation MDN pour cette propriété</a>.</li> + <li>Cliquez sur l'icône de filtre (<img alt="" src="https://mdn.mozillademos.org/files/14187/filter.png" style="height: 19px; width: 18px;">) à côté d'une propriété surchargée pour <a href="/fr/docs/Outils/Inspecteur/Comment/Examiner_et_modifier_le_CSS#Déclarations_surchargées">trouver quelle autre propriété la surcharge</a>.</li> + <li>Cliquez-droit sur un nom, une valeur, une règle pour copier n'importe quel nom, valeur, déclaration ou la règle complète dans le presse-papier.</li> +</ul> + +<h2 id="Console_web">Console web</h2> + +<p>Dans tous les onglets:</p> + +<ul> + <li><kbd>Esc</kbd> ouvre la <a href="/fr/docs/Tools/Web_Console/Split_console">console scindée</a> utile lors du debug, ou l'inspection des noeuds.</li> +</ul> + +<p>Dans la <a href="/fr/docs/Tools/Web_Console/The_command_line_interpreter">ligne de commande</a>:</p> + +<ul> + <li><code><a href="/fr/docs/Tools/Web_Console/Helpers#$0">$0</a></code> fait référence au noeud actuellement selectionné.</li> + <li><code><a href="/fr/docs/Tools/Web_Console/Helpers#$">$()</a></code> est un raccourci pour {{domxref("document.querySelector()")}}.</li> + <li><code><a href="/fr/docs/Tools/Web_Console/Helpers#$$">$$()</a></code> retourne sous forme d'un tableau les résultats de {{domxref("document.querySelectorAll()")}}.</li> + <li><code><a href="/fr/docs/Tools/Web_Console/Helpers#copy">copy</a></code> copie tout comme une chaîne.</li> + <li>Cliquez-droit sur un noeud de l'Inspecteur puis cliquez sur <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Use%20in%20Console">"Utiliser dans la Console"</a> pour créer une variable <code><a href="/fr/docs/Tools/Web_Console/Helpers#tempN">temp<em>N</em></a></code> de ce noeud.</li> + <li><code><a href="/fr/docs/Tools/Web_Console/Helpers#cd">cd</a></code> <span id="result_box" lang="fr"><span>bascule le contexte d'évaluation JavaScript dans un iframe différent dans la page</span></span>.</li> + <li><code><a href="/fr/docs/Web/API/Console/table">console.table()</a></code> affiche des données tabulaires dans un tableau.</li> + <li><code><a href="/fr/docs/Tools/Web_Console/Helpers#help">help</a></code> ouvre la page MDN de description des commandes disponibles.</li> + <li><code>:screenshot <filename.png> --fullpage</code> enregistre une capture d'écran dans le dossier "Téléchargements" en utilisant avec le nom du fichier s'il est renseigné en option. Sans nom spécifique le nom sera de ce format-ci: <code>[Date de la Capture] at [heure de la capture].png</code><br> + <br> + Le paramètre --fullpage est optionnel, s'il est inclus, la capture couvrira la page entière, pas juste la partie visible dans la fenêtre de navigation. Le nom du fichier aura également le sufixe "-fullpage". Voir <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Helpers">Fonctions d'aides de la Console</a> pour une liste de tous les paramètres.</li> +</ul> + +<p>Dans la sortie de la console:</p> + +<ul> + <li>Cliquez sur l’icône d'inspection (<img alt="" src="https://mdn.mozillademos.org/files/14185/picker.png" style="height: 18px; width: 18px;">) à côté de l'élément dans la sortie de la console pour <a href="/fr/docs/Outils/Console_Web/Rich_output#Mettre_en_surbrillance_les_noeuds_DOM">le sélectionner dans l'inspecteur</a></li> + <li>Choisissez <a href="/fr/docs/Outils/Settings#Console_web">"Activer les journaux persistants"</a> dans la configuration pour conserver les messages du journal, même ceux d'avant la navigation.</li> + <li>Choisissez <a href="fr/docs/Outils/Settings#Console_web">"Activer l'horodatage"</a> dans la configuration pour montrer l'horodatage à côté des messages du journal.</li> +</ul> + +<h2 id="Débogueur">Débogueur</h2> + +<ul> + <li>Éviter les bibliothèques JavaScript durant la session de débogage via l'icône de boite noire (<img alt="Icon for black boxing a JavaScript source" src="https://mdn.mozillademos.org/files/14189/Black%20boxing.png" style="height: 18px; width: 18px;">).</li> + <li>Pressez <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>F</kbd> pour rechercher dans tous les scripts.</li> + <li>Pressez <kbd>Ctrl</kbd>+<kbd>D</kbd> pour rechercher la définition d'une fonction.</li> + <li>Pressez <kbd>Ctrl</kbd>+<kbd>L</kbd> pour aller à une ligne spécifique.</li> +</ul> + +<h2 id="Éditeur_de_feuilles_de_style_CSS">Éditeur de feuilles de style CSS</h2> + +<ul> + <li>L'icône de boite noire (<img alt="Icon for black boxing a JavaScript source" src="https://mdn.mozillademos.org/files/14189/Black%20boxing.png" style="height: 18px; width: 18px;">) du panneau des feuilles de style permet d'afficher ou de cacher une feuille de style.</li> + <li>Cliquez sur une <a href="/fr/docs/Outils/Éditeur_de_style#Le_volet_media">règle @media </a> pour l'appliquer dans la <a href="/fr/docs/Outils/Vue_adaptative">Vue adaptative</a>.</li> + <li>Cliquez sur le bouton d'import (<img alt="Button to import a style sheet from the file system" src="https://mdn.mozillademos.org/files/14193/Import%20button.png" style="height: 18px; width: 18px;">) pour importer une feuille de style ou le bouton de création (<img alt="Button to create a new style sheet" src="https://mdn.mozillademos.org/files/14195/Create%20style%20sheet%20button.png" style="height: 18px; width: 18px;">) pour en créer une nouvelle.</li> + <li>Cliquez sur le bouton d'option du <a href="/fr/docs/Outils/Éditeur_de_style#Le_panneau_des_feuilles_de_style">panneau des feuilles de style</a> et cliquez sur <a href="/fr/docs/Outils/Éditeur_de_style#Support_de_.22Source_map.22">"Afficher les sources originales"</a> pour basculer vers l'affichage des fichiers du pré-processeur CSS.</li> +</ul> + +<h2 id="Réseau">Réseau</h2> + +<ul> + <li>Cliquez sur le résumé de la requête pour <a href="/fr/docs/Outils/Moniteur_réseau#Analyse_des_performances">comparer la performance du chargement avec cache et du chargement sans cache.</a></li> + <li>Quand une requête est sélectionnée cliquez sur <a href="/fr/docs/Outils/Moniteur_réseau#Modifier_et_renvoyer">"Modifier et renvoyer"</a> pour modifier l'en-tête et la renvoyer.</li> + <li>Cochez <a href="/fr/docs/Outils/Settings#Préférences_générales">"Activer les journaux persistants"</a> dans la configuration pour conserver les requêtes précedentes et suivantes à la navigation.</li> + <li>Survoler <a href="/fr/docs/Outils/Moniteur_réseau#Colone_source">l'icône "js" de la colonne "Source"</a> pour voir la trace de la pile JavaScript responsable de la requête.</li> + <li>Cochez <a href="/fr/docs/Outils/Settings#Parramètres_avancés">"Désactivez le cache HTTP (lorsque la boite à outils est ouverte)"</a> dans la configuration pour désactiver le cache réseau lors du débogage des problèmes réseau.</li> +</ul> + +<h2 id="Stockage">Stockage</h2> + +<ul> + <li>Cliquez-droit sur l'en-tête de la colonne pour ouvrir un menu permettant de changer l'affichage de la colonne.</li> + <li>Cliquez-droit sur une entrée et cliquez sur "Supprimer <var>nom</var>" pour la supprimer ou "Tout supprimer" pour supprimer toute les entrées.</li> + <li>Sélectionnez une entrée pour voir sa valeur dans la barre latérale.</li> +</ul> |