diff options
Diffstat (limited to 'files/fr/tools/remote_debugging')
5 files changed, 227 insertions, 0 deletions
diff --git a/files/fr/tools/remote_debugging/chrome_desktop/index.html b/files/fr/tools/remote_debugging/chrome_desktop/index.html new file mode 100644 index 0000000000..1e1580b614 --- /dev/null +++ b/files/fr/tools/remote_debugging/chrome_desktop/index.html @@ -0,0 +1,49 @@ +--- +title: Déboguer Chrome Desktop à distance +slug: Outils/Débogage_distant/Chrome_Desktop +translation_of: Tools/Remote_Debugging/Chrome_Desktop +--- +<div>{{ToolsSidebar}}</div><p>Cet article explique comment connecter <a href="/fr/docs/Outils">les outils de développement Firefox</a> à <a href="https://www.google.fr/chrome/browser/desktop/">Google Chrome</a> si celui-ci est lancé sur l'ordinateur.</p> + +<div class="note"> +<p><strong>Note :</strong> Ce support dépend du module complémentaire Valence qui effectue le lien entre le protocole de débogage utilisé par Firefox et celui utilisé par Chrome. Le support de Valence est toujours expérimental.</p> +</div> + +<p>Ce guide est organisé en deux parties : la première concerne les prérequis nécessaires, la seconde partie concerne la partie de connexion.</p> + +<h2 id="Prérequis">Prérequis</h2> + +<p>Pour connecter les outils de développement avec Google Chrome, vous aurez besoin de :</p> + +<ul> + <li>Firefox 35 ou une version supérieure</li> + <li>Du module complémentaire <a href="/fr/docs/Outils/Firefox_Tools_Adapter">Valence</a> (anciennement appelé Adaptateur des outils) installé sur Firefox. Si vous utilisez <a href="/fr/Firefox/Developer_Edition">Firefox Developer Edition</a>, Valence est déjà installé. Sinon, vous pouvez <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/fxdt-adapters/">télécharger la dernière version de Valence</a> pour l'installer dans Firefox en ouvrant le fichier XPI.</li> + <li>Chrome 37 ou une version supérieure.</li> +</ul> + +<h2 id="Connexion">Connexion</h2> + +<p>{{EmbedYouTube("g5p9__OiaMY")}}</p> + +<h3 id="Lancer_Chrome">Lancer Chrome</h3> + +<p>Pour activer le débogage distant sur Chrome (pour ordinateur), vous aurez besoin de le lancer avec le flag suivant : <code>--remote-debugging-port=9222</code>. Pour plus d'informations, voir ce guide pour <a href="http://www.chromium.org/developers/how-tos/run-chromium-with-flags">démarrer Chrome avec des options en ligne de commande</a>.</p> + +<p>D'autres options peuvent s'avérer utiles. En lançant Chrome avec <code>--no-first-run</code>, <code>--no-default-browser-check</code>, et <code>--user-data-dir</code>, on peut lancer une instance de Chrome en parallèle d'une autre déjà lancée.</p> + +<p>Par exemple, sur OS X, on peut lancer la commande suivante pour démarrer une instance de Chrome qui soit débogable et qui puisse être séparée des autres instances éventuellement déjà lancées :</p> + +<pre class="language-html"><code class="language-html">/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --no-first-run --no-default-browser-check --user-data-dir=$(mktemp -d -t 'chrome-remote_data_dir')</code></pre> + +<h3 id="Effectuer_la_connexion_avec_WebIDE">Effectuer la connexion avec WebIDE</h3> + +<p>Sous Firefox, ouvrez <a href="/fr/docs/Tools/WebIDE/Opening_WebIDE">WebIDE</a>. Dans WebIDE, cliquez sur « Sélectionner l'environnement » puis sélectionnez « Chrome Desktop » dans le menu déroulant.</p> + +<p>Ensuite, cliquez sur le menu « Ouvrir une application » de WebIDE. Cela affichera une liste des onglets ouverts sur l'instance. Cliquez sur un onglet pour y connecter les outils de développement. Vous pourrez ensuite utiliser la plupart des outils de développement Firefox. À l'heure actuelle, les outils suivants ne sont pas encore supportés :</p> + +<ul> + <li><a href="/fr/docs/Outils/Performance">Performance</a></li> + <li>Timeline</li> + <li><a href="/fr/docs/Outils/Moniteur_réseau">Réseau</a></li> + <li><a href="/fr/docs/Outils/Inspecteur_de_stockage">Stockage</a></li> +</ul> diff --git a/files/fr/tools/remote_debugging/debugging_firefox_desktop/index.html b/files/fr/tools/remote_debugging/debugging_firefox_desktop/index.html new file mode 100644 index 0000000000..c6f18c479b --- /dev/null +++ b/files/fr/tools/remote_debugging/debugging_firefox_desktop/index.html @@ -0,0 +1,44 @@ +--- +title: Déboguer Firefox Desktop +slug: Outils/Débogage_distant/Debugging_Firefox_Desktop +tags: + - Debugging + - Guide + - Tools +translation_of: Tools/Remote_Debugging/Debugging_Firefox_Desktop +--- +<p>{{draft}}</p> + +<div>{{ToolsSidebar}}</div> + +<div></div> + +<p>Ce guide explique comment utiliser des outils de développement de Firefox pour déboguer une instance différente de Firefox pour ordinateur tournant sur la même machine. Dans ce guide, l'instance de Firefox qui sera déboguée sera référencée sous l'appellation <em>le débogué. </em> tournant l’instance qui fait le débogage sera appelé <em>le déboguant.</em></p> + +<h2 id="Activer_le_débogage_distant">Activer le débogage distant</h2> + +<p>Tout d'abord, il est nécessaire de s'assurer que le déboguant et le débogué aient tous les deux les options "Activer le débogage du chrome du navigateur et des modules" et "Activer le débogage distant" d'activés dans les <a href="/fr/docs/Tools/Tools_Toolbox#Settings">options des outils de développement</a>. Si vous utilisez <a href="/fr/Firefox/Developer_Edition">Firefox Developer Edition</a>, les options devraient être activées par défaut.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16905/remote_debug_settings.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p> + +<p>Cette étape n'est nécessaire qu'une seule fois : les valeurs de ces options sont persistantes et resteront les mêmes jusqu'à ce que vous les changiez de nouveau.</p> + +<h2 id="Lancer_le_serveur_de_débogage">Lancer le serveur de débogage</h2> + +<p>Ensuite, il faut lancer le serveur de débogage dans le débogué.</p> + +<p>Depuis Firefox 37 la méthode ci-dessus fonction toujours, mais il existe une alternative : lancez le débogué en ligne de commande avec l'option <code>--start-debugger-server</code> :</p> + +<pre>/path/to/firefox --start-debugger-server</pre> + +<p>Passée sans argument, --start-debugger-server lance l'écoute sur le port 6000. Pour utiliser un port différent, il faut passer le port désiré :</p> + +<pre>/path/to/firefox --start-debugger-server 1234</pre> + +<p>Note: Sous Windows, l'appel <code>start-debugger-server</code> n'a qu'un seul tiret :</p> + +<pre>firefox.exe -start-debugger-server 1234</pre> + +<div class="note"> +<p><strong>Note</strong>: Par défaut, et pour des raisons de sécurité, l'option <code>devtools.debugger.force-local</code> est activé. Si vous voulez déboguer une instance de Firefox sur une machine externe, il est possible de changer cette option, mais il est extrêmement recommandé de faire cela que sur un réseau de confiance ou d'avoir au préalable instauré une règle de pare-feu forte pour déterminer quelle machine peut y accéder.</p> +</div> diff --git a/files/fr/tools/remote_debugging/debugging_firefox_for_android_with_webide/index.html b/files/fr/tools/remote_debugging/debugging_firefox_for_android_with_webide/index.html new file mode 100644 index 0000000000..1c09d2f521 --- /dev/null +++ b/files/fr/tools/remote_debugging/debugging_firefox_for_android_with_webide/index.html @@ -0,0 +1,70 @@ +--- +title: Déboguer Firefox pour Android avec WebIDE +slug: Outils/Débogage_distant/Debugging_Firefox_for_Android_with_WebIDE_clone +tags: + - Debugging + - Guide + - Tools +translation_of: Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE_clone +--- +<div>{{ToolsSidebar}}</div><p>Cet article décrit comment connecter les <a href="https://developer.mozilla.org/fr/docs/Tools">Outils de développement de Firefox </a>de Firefox pour Android à partir de Firefox 36.</p> + +<p>Cela fait un moment qu'il est possible de connecter les outils de développement de Firefox à Firefox pour Android afin de pouvoir déboguer des sites pour mobiles. Cependant, jusqu'à maintenant il s'agissait d'un procédé complexe et prompt à l'erreur. Depuis Firefox 36 le procédé est beaucoup plus simple : en particulier, il n'est plus du tout nécessaire de passer directement par l'outil <a href="http://developer.android.com/tools/help/adb.html">adb</a>. La connexion se fait maintenant par <a href="/fr/docs/Tools/WebIDE">WebIDE</a>, qui lui s'occupe d'adb.</p> + +<div class="note"> +<p>Pour que cela fonctionne, il est nécessaire d'avoir les versions Firefox Desktop 36+ et Firefox pour Android 35+. Si vous avez besoin d'utiliser des versions précédentes, regardez les instructions pour <a href="/fr/docs/Tools/Remote_Debugging/Firefox_for_Android">connecter les outils de développement à Firefox pour Android</a>.</p> +</div> + +<p> </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9011/remote-debugging-overview-fx36.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Ce guide est divisé en deux parties : la première partie "Prérequis", décris toutes les opérations qui ne sont requises qu'une seule fois, alors que la seconde partie "Connexion", décrit les étapes qui sont nécessaires à chaque connexion.</p> + +<h2 id="Prérequis">Prérequis</h2> + +<p>Tout d'abord, vous aurez besoin d'avoir :</p> + +<ul> + <li>Un ordinateur avec Firefox 36 ou plus récent installé</li> + <li>Un appareil Android <a class="external external-icon" href="https://support.mozilla.org/fr/kb/will-firefox-work-my-mobile-device" title="https://support.mozilla.org/en-US/kb/will-firefox-work-my-mobile-device">capable d'exécuter Firefox pour Android</a> avec Firefox pour Android 35 ou plus récent installé.</li> + <li>Un câble USB pour connecter les deux appareils</li> +</ul> + +<h3 id="ADB_Helper">ADB Helper</h3> + +<p>Votre Firefox Desktop doit également posséder le module complémentaire ADB Helper version 0.7.1 ou plus récent. Ce module devrait s'être installé automatiquement à la première ouverture de WebIDE. Pour vérifier la version, tapez <code>about:addons</code> dans la barre d'adresse du navigateur et ADM devrait être listé.</p> + +<p>Si vous n'avez pas ADB Helper version 0.7.1+, sélectionnez " Gérer les composants additionnels " depuis le menu "Projets", et ADB Helper sera listé sous "Composants supplémentaires" :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9021/extra-components.png" style="display: block; margin-left: auto; margin-right: auto;">Cliquez sur "désinstaller", puis sur "installer", et vous devriez maintenant avoir la dernière version.</p> + +<h3 id="Configurer_l'appareil_Android">Configurer l'appareil Android</h3> + +<p>Tout d'abord, activez le débogage USB en suivant les étapes<a class="external external-icon" href="http://developer.android.com/guide/developing/device.html#setting-up" title="http://developer.android.com/guide/developing/device.html#setting-up">2 et 3 de ce lien et uniquement ce lien</a>.</p> + +<p>Ensuite, activez le débogage distant dans Firefox pour Android : Ouvrez le navigateur, ouvre le menu et sélectionnez "Options" puis "Outils de développement" (sur certains appareils il peut être nécessaire de sélectionner "Plus" pour voir "Options"). Maintenant, cochez la case "Débogage distant" :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5829/remote-debugging-device-enable.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Le navigateur peut alors afficher une notification vous rappelant de configurer le "port forwarding", ignorez cette notification.</p> + +<h2 id="Connexion">Connexion</h2> + +<p>Connectez l'appareil Android à l'ordinateur grâce au câble USB, ouvrez <a href="/fr/docs/Tools/WebIDE">WebIDE</a>, et dans le panneau "Environnement", vous verrez un Firefox pour Android dans la catégorie "Périphériques USB" :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9013/remote-debugging-android-runtime.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Sélectionnez-le. Sur l'appareil Android, le message d'avertissement suivant apparait :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9031/incoming-warning.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Cliquez sur OK. Maintenant, cliquez sur "Ouvrir une application" dans le menu de WebIDE? Vous verrez alors une liste des onglets ouverts sur l'appareil :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9015/remote-debugging-android-open-tabs.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Sélectionnez un onglet pour y attacher les outils de développement :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9029/remote-debugging-android-attached.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Maintenant, vous devriez pouvoir utiliser tous les outils de développement de Firefox qui supporte le débogage distant. Voir la page <a href="/fr/docs/Tools/Remote_Debugging">débogage distant</a> pour plus de détails.</p> diff --git a/files/fr/tools/remote_debugging/index.html b/files/fr/tools/remote_debugging/index.html new file mode 100644 index 0000000000..bc7965065b --- /dev/null +++ b/files/fr/tools/remote_debugging/index.html @@ -0,0 +1,20 @@ +--- +title: Débogage distant +slug: Outils/Débogage_distant +tags: + - Outils +translation_of: Tools/Remote_Debugging +--- +<div>{{ToolsSidebar}}</div> + +<p>Il est possible d'utiliser les <a href="/fr/docs/Tools">outils de développement</a> de Firefox de votre ordinateur pour déboguer des sites et des applications web tournant dans d'autres navigateurs ou environnements d'exécution. Les autres navigateurs peuvent être sur le même appareil que les outils ou sur un appareil différent, tel qu'un téléphone connecté en USB.</p> + +<p>Les instructions détaillées pour connecter les outils de développement dépendent de l’environnement d'exécution.</p> + +<p>Il est possible de connecter les outils de développement aux environnements d'exécution Gecko tels que : Firefox sur ordinateur, Firefox pour Android, et Thunderbird.</p> + +<ul> + <li><a href="/fr/docs/Tools/Remote_Debugging/Debugging_Firefox_Desktop">Firefox sur ordinateur</a></li> + <li>Firefox pour Android <a href="/fr/docs/Tools/about:debugging">via USB</a></li> + <li><a href="/fr/docs/Tools/Remote_Debugging/Thunderbird">Thunderbird</a></li> +</ul> diff --git a/files/fr/tools/remote_debugging/thunderbird/index.html b/files/fr/tools/remote_debugging/thunderbird/index.html new file mode 100644 index 0000000000..cf55624731 --- /dev/null +++ b/files/fr/tools/remote_debugging/thunderbird/index.html @@ -0,0 +1,44 @@ +--- +title: Débogage distant de Thunderbird +slug: Outils/Débogage_distant/Thunderbird +tags: + - Debug + - Tutorial + - thunderbird +translation_of: Tools/Remote_Debugging/Thunderbird +--- +<div>{{ToolsSidebar}}</div><p>Ce guide décrit comment utiliser le <a href="/fr/docs/Mozilla/Firefox_OS/Firefox_OS_usage_tips/Remote_debugging">débogage distant </a>pour inspecter et déboguer du code dans <a href="/fr/docs/Mozilla/Thunderbird">Thunderbird</a>.</p> + +<p>De nombreux outils de développeent sont compatibles avec Thunderbird en utilisant de mécanisme de connexion à distante de Firefox. Les outils actuellement compatibles sont : La Console Web, l'Inspecteur, le Débogeur, l'Éditeur de Style, Performance, et Réseau. D'autres outils seront disponibles dans le futur.</p> + +<h2 id="Configurer_Thunderbird">Configurer Thunderbird</h2> + +<p>Tout ce qui a besoin d'être fait dans Thunderbird est d'activer le serveur de débogage. Cela peut être fait en utilisant le menu <code>Outils</code> dans la barre d'outils (alt + Outils) et en sélectionnant <code>Activer le débogage distant</code>. Par défaut, le serveur sera ouvert sur le port 6000. Si vous désirez changer ce port, par exemple pour déboguer de multiples profils, il est nécessaire d'ouvrir l'éditeur de configuration avancé et de changer la préférence <code>devtools.debugger.remote-port</code>.</p> + +<h2 id="Configurer_Firefox">Configurer Firefox</h2> + +<p>Firefox agit comme le client et fournit l'interface utilisateur pour contrôler les outils de développement pour Thunderbird. Il est recommandé d'utiliser une version de Firefox et Thunderbird majeure, mais dans certains cas, cela fonctionnera avec d'autres versions.</p> + +<p>Pour configurer Firefox, il faut activer l'option "Activer le débogage distant" dans les options des outils de développement. Pour cela, il faut <a href="/fr/docs/Tools/Tools_Toolbox" title="/fr/docs/Tools/Tools_Toolbox">ouvrir la boite à outils</a>, cliquer sur l'icône "Options" button dans la <a href="/fr/docs/Tools/Tools_Toolbox#Barre_d'outils" title="/fr/docs/Tools/Tools_Toolbox#Toolbar">barre d'outils</a>, et cocher "Activer le débogage distant" :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5827/remote-debugger-toolbox-settings.png"></p> + +<p>Vous pouvez maintenant ouvrir la page de connections de Firefox en passant par le menu outils :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5811/remote-debugging-connect-menuitem.png" style="height: 503px; width: 583px;"></p> + +<p>Un page s'ouvrira alors dans le navigateur, il est possible de l'ajouter aux favoris. Dans le cas ou le port est celui par défaut, les champs seront déjà remplis correctement. Cliquez sur le bouton de connexion pour initialiser la connexion distante. Si vous avez changé le port par défaut, rentrez le port que vous avez choisi dans le champ approprié.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5813/remote-debugging-desktop-connect.png" style="height: 686px; width: 732px;"></p> + +<p>Vous serez ensuite présenté avec une liste d'onglets et de processus distants. Comme la notion d'onglets de Thunderbird n'est pas la même que celle de Firefox, les onglets distants qui sont affichés sont les éléments xul:browser dans Thunderbird. Cela peut être un onglet à contenu, ou le lecteur de message. Dans la plupart des cas cependant, vous voudrez sélectionner "Processus principal" pour déboguer le code de Thunderbird lui-même. Une nouvelle fenêtre s'ouvre alors avec les outils de développement connectés à l'instance de Thunderbird.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5819/remote-debugging-desktop-select-target.png"></p> + +<h2 id="Utiliser_les_outils_de_développement">Utiliser les outils de développement</h2> + +<p>L'utilisation des outils de développement est explicite. Si vous avez des problèmes avec un outil en particulier, jetez un oeil à la <a href="/fr/docs/Tools/Remote_Debugging"> documentation des outils de développement</a>. Du faite de la nature distante de la connexion, il peut y avoir quelques menues différences. Certains outils peuvent ne pas être disponibles, et il est également possible que la performance ne soit pas la même. Par exemple utiliser l'outil Débogeur prend pas mal de temps à charger, car les fichiers doivent être transférés par une connexion réseau interne.</p> + +<h2 id="Résolution_des_problèmes">Résolution des problèmes</h2> + +<p>Si vous rencontrez une erreur, la première chose à faire est de vérifier que les numéros de version de Firefox et Thunderbird sont les mêmes : si vous utilisez Firefox 24, vous devriez utiliser également Thunderbird 24. Ensuite, il est important de savoir si le problème vient des outils de développement ou du code distant dans Thunderbird. Pour vérifier cela, essayez de reproduire le problème en utilisant uniquement Firefox. Par exemple si vous vous rendez compte que vous ne pouvez pas modifier un attribut dans l'Inspecteur, essayez de changer un attribut dans Firefox. SI vous ne pouvez pas le reproduire, déclarez un bug dans le produit Thunderbird, sinon, déclarez un bug dans les outils de développement de Firefox.</p> |