Index

105 pages trouvées :

N°	Page	Étiquettes et résumé
1	Outils de développement	Développement Web, Développement Web:Outils, Firefox, Guide, Outils, guide
2	API du Debugger
		SpiderMonkey, le moteur JavaScript de Mozilla fournit une interface de débogage appelée Debugger. Cette interface permet à du code JavaScript d'observer et de manipuler l'exécution de code JavaScript. Les outils de développement de Firefox et le module complémentaire Firefbug utilisent Debugger pour implémenter leurs débogueurs JavaScript. Cependant, Debugger est très générale, et peut être utilisée pour implémenter d'autres sortes d'outils, par exemple des traceurs ou des analyseurs de protection.
3	Debugger.Object
		Une instace de Debugger.Object représent un objet du code débugué, fournissant des méthodes orientés reflection pour pouvoir inspecter et modifier son référent. Les proprotétées du référent n'apparaisent pas directement en tant que propriétées de l'instance de Debugger.Object. Le débogueur peut accéder à ces propriétées uniquement en passant par des méthodes comme Debugger.Object.prototype.getOwnPropertyDescriptor et Debugger.Object.prototype.defineProperty, cela afin d'être sur que le débogueur n'invoquera pas par érreur des getters et setters du référent.
4	Ajouter un nouveau panneau dans les outils de développement
		Écriture d'une extension qui rajoute un nouveau panneau aux outils de développement.
5	Ardoise JavaScript	Firefox, Tools, Web Development, Web Development:Tools
		L'ardoise JavaScript propose un environnement pour expérimenter avec du code JavaScript. Vous pouvez écrire du code qui interagit directement avec le contenu d'une page web, et vous pouvez ainsi tester vos idées avant de développer le code final avec vos outils habituels. Ou bien vous pouvez l'utiliser pour bricoler et jouer sur des sites existants.
6	Barre de Développement
		La Barre de Développement vous donne un accès en ligne de commande à certains outils de développement dans Firefox. La Barre de Développement est un interpréteur de ligne de commande graphique : Il a le pouvoir et la concision de la ligne de commande, mais fourni une aide intégrée pour ses commandes et peut afficher de plus amples informations. Il est aussi extensible : vous pouvez ajouter vos propres commandes locales et même les convertir en modules complémentaires pour que d'autres personnes puissent les installer aussi.
7	Ardoise JavaScript
		Créer des commandes en utilisant l'Ardoise JavaScript requiert des privilèges chrome. Voir la documentation de l'ardoise pour des détails sur comment activer cette fonctionnalités.
8	Customization	NeedsTranslation, TopicStub
		The mozcmd format is a way to store GCLI commands for easy access. It is available to Firefox users by setting the devtools.commands.dir to point to a directory containing a number of files with the extension mozcmd.
9	Futur de GCLI
		Cette section traite des fonctionnalités futures. Cette section ne documente pas les fonctionnalités courantes. (Attention cependant, la dernière mise à jour de la version officielle date de 2012...) GCLI a actuellement 3 axes d'améliorations :
10	Obtenir GCLI pour Firefox	Build instructions
		Il est nécessaire d'avoir un checkout de Firefox que vous pouvez compiler et lancer. Pour plus de détails, voir : compilation simple de Firefox ou  documentation sur la compilation.
11	Boite à Outils	Toolbox, Tools, devtools
		La boite à outils réunit la plupart des outils de développement intégrés à Firefox dans un seul endroit. Vous pouvez l'ouvrir en sélectionnant "Outils de développement " dans le menu "Développement" (dans "Outils" pour OS X et Linux, ou dans "Firefox" sous Windows), ou en activant l'un des outils par exemple le débogueur JavaScript ou l'inspecteur web). Vous pouvez aussi utiliser le raccourci  Ctrl Maj I sous Windows ou Linux, ou bien Cmd Opt i pour OS X. Ou bien même utiliser la touche F12.
12	Boîte à outils du navigateur
		La boîte à outils du navigateur est comme la Boîte à Outils normale, mais elle est appliquée à tout le navigateur au lieu d'un seul onglet de contenu. Il permet d'exécuter les Outils du Développeur Firefox dans le navigateur en son entier, au lieu d'une seule page Web. Ceci permet de déboguer des extensions et le code JavaScript du navigateur lui-même au lieu de pages Web.
13	CSS Coverage
		Le CSS Coverage est un ensemble de commandes pour les outils de développement de Firefox qui aide à améliorer du CSS désordonné en mettant en évidence le CSS qui n'est pas "utilisé" et en indiquant les parties du fichier CSS nécessaires au rendu initial.
14	Console JavaScript	Browser, Debugging, Tools, Web Development, WebDevelopment:Tools, console
		No summary!
15	Console Web	Debugging, Guide, Security, Tools, Web Development, Web Development:Tools, debugging, guide, web console
		La Console Web :
16	Fonctions d'aide de la Console Web	Debugging, Web Development, web console
		La ligne de commande JavaScript fournie par la Console Web, offre de nombreuses fonctions d'aide pour rendre certaines tâches plus simple.
17	Sortie personnalisée dans la Console Web	Console Web, Guide, Modules, Reference, Réference, Référence
		Ce document décrit comment vous pouvez étendre et personnaliser la sortie de la Console Web et de la Console Javascript. Vous pourreez aussi apprendre comment étendre l'aperçu des objets que nous générons dans les consoles et dans l'Inspecteur d'Objet.
18	Contribuer
		No summary!
19	Couleurs des DevTools
		No summary!
20	DevTools API
		L'API des outils de développements fournit une manière d'enregistrer et d'accéder aux outils de développement dans Firefox.
21	Débogage distant	Outils
		Il est possible d'utiliser les outils de développement 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 de développement ou sur un appareil différent tel qu'un téléphone connecté en USB.
22	Debugging Firefox for Android with WebIDE
		This article describes how to connect the Firefox Developer Tools to Firefox for Android from Firefox 36 onwards.
23	Déboguer Chrome Desktop à distance
		Cet article explique comment connecter les outils de développement Firefox à Google Chrome si celui-ci est lancé sur l'ordinateur.
24	Remotely debugging Firefox for Android	Not Translated
		This guide explains how to use remote debugging to inspect or debug code running in Firefox for Android over USB.
25	Débogueur	Debugger, Debugging, Dev Tools, Firefox OS, Tools
		Le débogueur JavaScript permet d'avancer pas à pas dans du code JavaScript et de l’examiner ou de le modifier, afin de retrouver et de corriger les bugs.
26	Comment faire…	NeedsTranslation, TopicStub
		Cette page lie vers les différents guides "Comment faire…" du déboggeur. Ces tutoriels expliquent en détail ces techniques concrètes.
27	Accéder au débogage depuis un module complémentaire
		Les objets suivant sont accessibles dans le contexte de chrome://browser/content/debugger.xul (ou, en version beta 23,, chrome://browser/content/devtools/debugger.xul) :
28	Afficher en surbrillance et inspecter les nœuds DOM
		Si vous survolez un nœud DOM dans le panneau des variables, il sera affiché en surbrillance dans la page :
29	Ajouter un point d'arrêt	JavaScript, Tools
		Pour ajouter un point d'arrêt deux solutions :
30	Ajouter un point d’arrêt conditionnel
		No summary!
31	Déboguer des sources évaluées
		Depuis Firefox 36, il est possible de déboguer du code JavaScript qui à été évalué dynamiquement, soit en étant passé sous forme de chaine de caractère à la fonction eval(), soit en étant passé sous forme de chaine caractère au constructeur d'une fonction.
32	Désactiver des point d'arrêts
		Pour désactiver un point d'arrêt, il suffit de décocher la case à cocher à coté du point d'arrêt dans le panneau de la liste des sources :
33	Examiner, modifier, et espionner des variables
		Quand le code s'est arrêté sur un point d'arrêt, il possible d'examiner ses variables grâce au panneau des variables du débogueur:
34	Formater et indenter un fichier minifié
		Pour formater et indenter un fichier qui a été minifié, il faut ouvrir le fichier minifié et cliquer sur l'icône en forme de paire d'accolades :
35	Mettre une source dans une boîte noire
		Il est possible de mettre/enlever une source dans une boîte noire en sélectionnant la source dans le panneau de la liste des sources puis en cliquant sur l'icône en forme d'œil en bas à gauche :
36	Ouvrir le Débogueur
		Pour ouvrir le débogueur, il faut sélectionner "Débogueur" dans le menu Développement qui est un sous-menu du menu Firefox (ou du menu outils sous OS X), ou presser Ctrl+Maj+S (Command-Option-S sur Mac).
37	Parcourir le code
		Quand votre code s'arrête sur un point d'arrêt, il est possible de parcourir le code pas à pas en utilisant les quatre boutons à gauche dans la barre d'outils :
38	Rechercher et filtrer
		Pour effectuer une recherche à l'intérieur du débogueur, il est possible d'utiliser le filtre de script de la barre d'outils :
39	S’arrêter sur un évènement DOM
		Si vous écoutez un évènement DOM, Il est possible d'indiquer au débogueur de s'arrêter lorsque l'événement est lancé, sans avoir besoin de chercher l'écouteur et de mettre un point d'arrêt manuellement.
40	Utiliser une source map
		Les sources JavaScript sont souvent combinés et minifiées afin d'optimiser le temps que met le serveur à les fournir. Il est également de plus en plus courant que les sources soient générées automatiquement en utilisant un langage comme CoffeeScript. En utilisant des source maps, le débogueur peut faire le lien entre le code étant exécuté et les fichiers sources originaux, rendant ainsi le débogage incroyablement plus facile.
41	Paramètres
		Le Débogueur a son propre menu de paramètres. Il est accessible depuis l’icône en forme d'engrenage dans la barre d'outils :
42	Raccourcis clavier
		Ra
43	Visite guidée de l'interface utilisateur
		Cet article est une visité guidée des principales sections de l'interface utilisateur du Débogueur JavaScript de Firefox. Cet interface est séparée en six sections principales :
44	Exemples de modules complémentaires
		Les modules complémentaires améliorent l'expérience utilisateur des navigateurs web, tels que Mozilla Firefox, en permettant la personnalisation des barres d'outils et des boutons, l'ajout des fonctions rapides, et la création des raccourcis clavier utiles. Les Modules complémentaires et les extensions peuvent être créés, publiés et implémentés via code.
45	Frise chronologique	Gecko, Guide, Tools
		La frise chronologique suit à la trace les opérations réalisées par Gecko, le moteur du navigateur.Il faut aller dans les the devtools options des outils de developemment pour activer la frise chronologique.
46	Inspecteur	CSS, DOM, Développement Web, HTML, Outils, styles
		L'inspecteur de styles et du DOM sert à examiner et modifier l'HTML et le CSS d'une page web.
47	Comment faire…
		Cette page présente différents "Comment faire ?" pour l'Inspecteur, décrivant des techniques avancées.
48	Edition des filtres CSS
		A partir de la version 40, Firefox implémente un éditeur de filtre  dans la vue Règles avec un rond gris à coté:
49	Examiner et modifier le CSS	Guide, Inspector, tool
		Il est possible d'examiner et d'éditer le CSS via le panneau CSS.
50	Examiner et modifier le modèle de boîte	Guide, Tools
		En ayant le bouton de Sélection d'éléments activé, survoler un élément de la page aura pour effet de l'afficher en surbrillance :
51	Examiner et éditer le code HTML	Guide, Inspector, Tools
		Il est possible d’examiner et d'éditer le code HTML d'une page web dans le panneau HTML.
52	Examiner les écouteurs d'évènements	Guide, Inspector, Tools
		Depuis Firefox 33, une icône "ev" apparait dans le panneau HTML à côté des éléments qui ont un écouteur lié :
53	Inspecter et sélectionner des couleurs
		Dans l'onglet "Règles" du panneau CSS, si une règle contient une valeur de couleur, un aperçu de cette couleur sera affiché à coté de la valeur :
54	Ouvrir l'inspecteur	Guide, Inspecteur, Tools
		Il y a deux façons principales d’ouvrir l'inspecteur :
55	Prévisualiser des images de fond
		Dans l'onglet des règles, il est possible de prévisualiser les images spécifiées avec la propriété background-image. Il suffit de survoler cette règle :
56	Sélectionner un élément	Guide, Inspector, Tools
		Si vous avez ouvert l'inspecteur en cliquant sur "Examiner l’élément" alors, un élément sera déjà sélectionné.
57	Utiliser l'API de l'Inspecteur	Inspector, Reference, Réference, Référence, Tools
		Les modules complémentaires de Firefox peuvent accéder les objet du contexte chrome://browser/content/devtools/inspector/inspector.xul suivants :
58	Utiliser l'Inspecteur depuis la Console Web	Guide, Inspector, Tools
		L'élément qui est sélectionné dans l'Inspecteur peut être référencé dans la Console Web en utilisant la variable $0 :
59	Visualiser les transformations	Guide, Inspector, Tools
		Survoler une propriété transform dans l'onglet des règles, fera apparaitre la transformation dans la page :
60	Voir les polices	Guide, Inspector, Tools
		Survoler une propriété font-family dans l'onglet des règles fera apparaître une infobulle avec un exemple de cette police :
61	Work with animations	Guide, Inspector, Tools, guide
		Toute règles @keyframes associée avec l'élément sélectionné est maintenant affichée dans la Règle vu et est éditable:
62	Exemples d'animations
		No summary!
63	Inspecteur d'animations (Firefox 41 et 42)
		Dans Firefox 41 et 42, l’inspecteur d'animations permet de :
64	Panneau HTML	HTML, Tools, Web Development, Web Development:Tools
		Le contenu de cette page à été transféré dans la section "Panneau HTML" de la visite guidée de l'Inspecteur.
65	Raccourcis Clavier
		Ces raccourcis fonctionnent dans l'onglet HTML de l'inspecteur.
66	UI Tour
		Cet article présente les trois grandes parties de l'interface utilisateur de l'inspecteur, à savoir :
67	Inspecteur de stockage
		L'inspecteur de stockage permet d'inspecter différents types de stockage qu'une page web peut utiliser. Actuellement, il peut être utilisé pour inspecter les types de stockage suivants :
68	Le Menu Développement
		Le menu "Développement" est le moyen principal d'accéder aux outils de développement qui sont intégrés à Firefox. Sous OS X et Linux, ce menu est un sous menu du menu "Outils" :
69	Modules complémentaires
		Certains modules sont des des outils de développement qui ne sont pas directement intégrés à Firefox. Il est possible de les trouver dans le catalogue des modules complémentaires du menu "Modules" (menu Firefox Modules ou Ctrl+Maj+A).
70	Inspecteur DOM	DOM, DOM:Tools, DOM_Inspector, Extensions, Extensions:Tools, Themes, Themes:Tools, Tools, Web Development, Web Development:Tools, XUL, XUL:Tools
		L'inspecteur DOM (également connu sous l'appellation DOMi) est un outil de Mozilla servant à inspecter, parcourir et modifier le modèle objet de document des documents - habituellement des pages Web ou des fenêtres XUL. Il est possible de naviguer dans la  hiérarchie DOM en utilisant une fenêtre à deux panneau qui permet une visibilitée du document et de tout les noeuds qu'il contient.
71	FAQ de l'Inspecteur DOM	DOM_Inspector
		Le menu "File" permet différentes manières d'inspecter un document :
72	Interieur de l'Inspecteur DOM
		Il ya trois parties principales dans l'Inspecteur DOM. La plus utilisée est l'interface utilisateur principale basée sur inspector.xul. il s'agit de l'Inspecteur à deux panneaux qui apparait au lancement de l'outil.
73	Introduction à l'Inspecteur DOM	DOM_Inspector
		L'Inspecteur DOM est une extension Mozilla qui est accéssible depuis le menu Tools > Web Development dans SeaMonkey, ou en sélectionant "DOM Inspector" depuis le menu Developpement web de Firefox ou Thunderbird. L'Inspecteur DOM est un programe standalone qui supporte toutes les applications toolkit, et il est également possible de l'inclure dans votre propre application XUL. L'Inspecteur DOM peut servir à vérifier la qualitée et l'état du DOM, ou peut être utilisé pour manipuler le DOM à la main si besoin est.
74	Moniteur Réseau	Debugging, Dev Tools, Firefox, Guide, Networking, Tools, guide
		Le moniteur réseau affiche toutes les requêtes effectuées par Firefox (par exemple, au chargement d'une page ou avec XMLHttpRequests), le temps pris par ces requêtes et les détails les concernant. Pour ouvrir le moniteur, sélectionnez "Réseau" dans le menu "Développement web" (situé sous mac dans "Outils") ou ouvrez les outils développeurs et sélectionnez l'onglet "Réseau".
75	Outil de mise en surbrillance des zones repeintes
		L'outil de mise en surbrillance des zones repeintes lorsqu’il est activé met en surbrillance les parties de la page que le navigateur doit repeindre en réponse à un changement. Par exemple, lorsque l'utilisateur fait défiler, certains blocs vont être repeints. Avec l'aide de cet outil, il est possible de savoir si votre site web cause plus de repaint qu'il ne devrait. C'est important, car les repaints peuvent être des opérations très couteuses. Ainsi, éliminer les repaints inutiles peut améliorer la réactivité de votre site web.
76	Performance
		L'outil Performance donne un aperçu de : la réactivité générale du site, la performance de son code JavaScript et de la performance du layout (disposition). Cet outil permet de réaliser un enregistrement (appelé profil) d'un site sur une période donnée. L'outil montre alors une vue d'ensemble des opérations que le navigateur a effectuées pour afficher le site durant le profil. Un graphique du frame rate lors du profil est également affiché.
77	Arbre d'appel
		L'arbre d'appel est un profileur par échantillons. Il prend périodiquement des échantillons de l'état du moteur JavaScript, et enregistre la pile pour le code s'exécutant dans ce moment. Statistiquement, le nombre d'échantillons dans lequel on exécute une fonction en particulier correspond au temps que le navigateur passe à l'exécuter. Il est alors possible de trouver les points noirs de votre code.
78	Chronologie
79	Comment faire ?
		Pour ouvrir l'outil Performance, il existe plusieurs possibilités :
80	Exemples
		Liste des pages de démos pour les scénarios de performances et walkthroughs.
81	Comparaison des algorithmes de tri
		Ce articlé décrit un programe simple qui est utilisé dans deux des guides de l'outil Performance : le guide pour l'arbre d'appel et le guide pour le diagramme de flamme.
82	Flame Chart
		L'Arbre d'appel et le Flame Chart sont tous deux utilisés pour analyser les performances du code JavaScript de pages web. Et ils utilisent tous deux les mêmes données : des échantillons de la pile du moteur JavaScript, pris périodiquement durant l'enregistrement.
83	Frame rate
		Le Frame rate est la vitesse à laquelle un appareil vidéo peut produire des images (frames). Cette unité est très utilisée dans les films ou les jeux vidéos, mais est maintenant utilisée couramment comme indicateur de performance pour les sites web et les applications web.
84	Scénarios
		Scénarios de performances
85	Animer des propriétés CSS
		Avec les animations CSS, il est possible de spécifier un nombre keyframes, chacune de celle-ci utilisent du CSS pour définir l'apparence d'un élément à un moment donné de l'animation. Le navigateur crée l'animation comme étant une transition d'une keyframe à une autre.
86	Intensive JavaScript
		Si vous souhaitez expérimenter par vous même tout en lisant, le site web de démonstration est disponible ici.
87	UI Tour
		La plateforme d'outils se découpe en 4 parties principales:
88	Pipette à couleur
		La pipette à couleur vous permet de sélectionner des couleurs dans la page courante. Cela marche comme une loupe au dessus de la page, vous permettant de sélectionner au pixel près.
89	Profileur JavaScript	Debugging, Firefox, Guide, Profiler, Profiling, Tools
		Le Profileur JavaScript est très pratique pour trouver les points noirs dans un code JavaScript. Le Profileur prend périodiquement des échantillons de la pile d'appel JavaScript et compile des statistiques de ces échantillons.
90	Raccourcis claviers	Clavier, Outils, Raccourcis, Tools
		Cette page liste tous les raccourcis clavier utilisés par les outils de développement intégrés à Firefox.
91	Simulateur Firefox OS	Apps, Firefox OS, Tools, WebIDE, WebIde, simulator
		Le simulateur Firefox OS (Firefox OS Simulator en anglais) est une version des couches supérieures de Firefox OS qui permet de simuler le fonctionnement d'un appareil Firefox OS sur un ordinateur de bureau. Cela signifie que, pour la plupart des cas, il n'est pas nécessaire d'avoir un vrai appareil pour déboguer l'application. Le simulateur s'affiche dans une fenêtre de la même taille qu'un appareil Firefox OS, comprend l'interface utilisateur de Firefox OS et les applications natives, il permet également de simuler plusieurs API matérielles pour Firefox OS.
92	Travailler avec les iframes
		Depuis Firefox 34, il est possible d'assigner les outils de développement à un  iframe spécifique à l’intérieur d'un document.
93	Valence (Firefox Tools Adapter)
		Valence (anciennement Firefox Tools Adapter) est un module expérimental qui permet aux outils de développement de Firefox de déboguer un plus grand éventail de navigateurs et plus uniquement les navigateurs Firefox, Firefox pour Android et Firefox OS.
94	Validateurs	Tools
		No summary!
95	Vue 3D	Tools
		Quand vous cliquez sur le bouton "3D View", la page passe en mode de vue 3D. Dans ce mode, vous pouvez voir votre page présentée dans une vue 3D dans laquelle s'est emboîté les blocs de HTML sont de plus en plus "grands", projetant extérieurs du bas de page. Cette vue fait facile de visualiser la l'emboîtement de votre contenu.
96	Vue adaptative	Firefox, Mobile, Responsive Design, Tools, Web Development
		La capture d’écran ci-dessous montre une page de la version mobile de Wikipédia, vue dans une zone de contenu de 320×480.
97	WebIDE	Apps, B2G, Debugging, Firefox OS, Tools, WebIDE
		Avec WebIDE, il est possible de configurer un ou plusieurs environnements. Un environnement sert à lancer et déboguer une application. Un environnement peut être un appareil Firefox OS connecté à un ordinateur par USB (ou par Wi-Fi depuis Firefox 39), ou bien un Simulateur Firefox OS installé sur l'ordinateur même.
98	Créer et modifier des applications
		Dans le menu "Ouvrir une application", vous avez trois options : créer une nouvelle application, ouvrir une application empaquetée, ouvrir une application hébergée.
99	Mise en place des environnements
		Un environnement vous permet d'exécuter et de déboguer des applications. Un environnement peut être un appareil Firefox OS connecté à votre machine en USB, cela peut également être un simulateur Firefox OS installé sur votre propre machine, ou encore une autre instance de Firefox pour Bureau.
100	Ouvrir WebIDE	WebIDE, devtools, opening
		Il y a trois moyens d'ouvrir WebIDE :
101	Travailler avec des applications Cordova dans WebIDE
		Apache Cordova permet d'écrire des application en utilisant HTML, JavaScript, et CSS, et ensuite de générer des applications natives pour les plate-formes mobiles tels que iOS ou Android. Avec Cordova, vous pouvez également générer une version de votre application pour Firefox OS.
102	WebIDE diagnostic de connexion
		Si votre appareil fonctionnant sous Firefox OS ne se connecte pas au WebIDE, voici quelques points à vérifier :
103	Éditeur Web Audio	Tools
		Avec l'API Web Audio, les développeurs peuvent créer un contexte audio. Dans ce contexte, ils peuvent créer différents nœuds audio comme :
104	Éditeur de Shaders	Tools, Web Development
		L'Éditeur de Shaders permet de voir et d'éditer les vertex shaders et les fragments shaders utilisés par WebGL
105	Éditeur de Style	CSS, Stylesheets, Tools, Web Development, Web Development:Tools
		L'Éditeur de Style permet de :