mozilla
Vos résultats de recherche

    Ardoise JavaScript

    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.

    Contrairement à la Console Web qui ne peut interpréter qu'une ligne de code à la fois, l'ardoise JavaScript permet d'éditer des extraits de code plus importants et de les exécuter de manières diverses, en fonction de l'utilisation désirée.

    Utilisation

    Ouvrir l'ardoise JavaScript

    Pour ouvrir la fenêtre de l'ardoise, utilisez le raccourci clavier MAJ+F4 ou allez dans le menu « Développeur Web », qui est lui-même un sous-menu du menu « Outils », et sélectionnez « Ardoise JavaScript ». Cela ouvre la fenêtre de l'éditeur de l'ardoise, qui contient alors un commentaire avec de brèves instructions sur l'utilisation de l'outil. À présent, vous pouvez immédiatement essayer de taper du code JavaScript à essayer !

    Édition

    La fenêtre de l'ardoise ressemble à quelque chose comme ça (sous Windows et Linux, vous aurez aussi une barre de menu, alors que sur Mac, la barre de menu est comme d'habitude en haut de l'écran) :

    Le menu « Fichier » propose des options pour charger et sauvegarder les extraits de code JavaScript, permettant leur réutilisation ultérieure.

    Complétion de code et documentation

    La complétion de code et les informations de type sont seulement disponibles à partir de  32.

    A partir de Firefox 32, l'Ardoise JavaScript intègre le moteur d'analyse de code tern. Il est utilisé pour fournir des suggestions d'autocomplétion et des popups d'information sur le symbole courant. Pour lister les suggestions d'autocomplétion, appuyez sur Ctrl + Espace. Pour afficher le popup, appuyez sur Shift + Espace dans Firefox 32, ou Ctrl + MAJ + Espace à partir de Firefox 33.

    Par exemple, essayez de taper "d", puis ensuite d'appuyer sur Ctrl + Espace. Vous devriez voir :

    L'icône à côté de chaque suggestion indique le type, et la suggestion mise en évidence affiche la popup avec plus d'information. Les flêches Haut et Bas du clavier permettent de défiler parmi les suggestions et la touche Entrée ou Tab sélectionne la suggestion en surbrillance.

    Si vous sélectionnez document, puis addEventListener, puis appuyez sur Shift + Espace, vous verrez ce popup affichant un résumé de la syntaxe de la fonction avec une courte description :

    Le lien "[docs]" vous mène à la documentation MDN pour le symbole.

    Exécuter votre code

    Une fois que vous avez écrit votre code, sélectionnez le code à exécuter. Si vous ne sélectionnez rien, tout le code de la fenêtre sera exécuté. Puis choisissez comment vous voulez que le code soit exécuté : en utilisant les boutons en haut de la fenêtre ou par le menu contextuel (accessible avec le clic droit de la souris). Le code est exécuté dans le contexte de l'onglet actuellement sélectionné. Toutes les variables que vous déclarez en dehors d'une fonction seront ajoutées à l'objet global de cet onglet.

    Exécuter

    Lorsque vous choisissez l'option Exécuter, le code sélectionné s'exécute. C'est ce que vous utilisez si vous voulez exécuter une fonction ou du code qui manipule le contenu de la page sans avoir besoin de voir le résultat.

    Examiner

    L'option Examiner exécute le code comme l'option précédente ; cependant, après l'exécution, un inspecteur d'objet s'ouvre pour vous permettre d'examiner la valeur retournée.

    Par exemple, si vous entrez le code :

    window
    

    Et que vous choisissez « Examiner », vous obtenez une fenêtre d'inspecteur qui ressemblera à quelque chose comme ça :

    Afficher

    L'option « Afficher » exécute le code sélectionné, puis insère le résultat directement dans la fenêtre de l'ardoise, dans un commentaire. C'est une manière pratique pour garder un journal de vos tests pendant votre travail. Vous pouvez aussi l'utiliser comme une calculette minimaliste, mais si vous n'avez pas un meilleur programme pour réaliser cette fonction, vous avez sans doute de plus gros problèmes.

    Recharger et exécuter

    L'option "Recharger et éxecuter" est seulement disponible dans le menu contextuel (accessible avec le clic droit de la souris). Il recharge en premier la page, et éxecuter le code quand la page déclenche l'évènement "load". Utile lorsque vous vous voulez exécuter dans un environnement sans modification.

    Exécuter l'Ardoise JavaScript dans le contexte du navigateur

    Si vous travaillez sur Firefox lui-même, ou si vous développez des extensions, vous pourriez trouver pratique de pouvoir accéder aux mécanismes internes du navigateur directement avec l'ardoise. Pour cela, vous devez cocher l'option « Activer le débogage du chrome et des modules » dans le panneau « Options des outils ». Une fois que vous avez fait ça, le menu « Environnement » a une option « Navigateur »  lorsqu'elle est sélectionnée, votre portée est le navigateur entier et non plus uniquement le contenu de la page courante. Vous pouvez facilement le constater en examinant ces globales :

    window
    /*
    [object ChromeWindow]
    */
    
    gBrowser
    /*
    [object XULElement]
    */

    Le contexte d'exécution de l'Ardoise JavaScript est sur le navigateur lorsqu'un fichier a le commentaire
    // -sp-context: browser
    sur sa première ligne.

    Cas d'usages de l'Ardoise JavaScript

    Il y a beaucoup de manières utiles d'utiliser l'ardoise. Cette partie en traite quelques-unes.

    Tester du code nouveau

    L'Ardoise est particulièrement utile pour tester du nouveau code dans un environnement en train de tourner ; vous pouvez copier le code que vous déboguez dans l'Ardoise, l'exécuter, et le mettre au point jusqu'à ce qu'il fonctionne. Une fois qu'il fonctionne, copiez-le dans votre fichier d'origine, et voilà ! Dans beaucoup de cas, vous pouvez écrire, déboguer, et tester votre code, sans jamais avoir à recharger la page.

    Des extraits de code réutilisables

    La barre de menu vous propose des commandes pour sauvegarder et charger du code JavaScript. Cette fonctionnalité peut être utilisée pour garder dans un coin du code JavaScript que vous utilisez souvent. Par exemple, si vous travaillez sur un site qui utilise des requêtes AJAX pour charger des données, vous pouvez garder des bouts de code qui exécutent ces opérations de chargement pour tester ou vérifier les données. De même, vous pouvez garder des fonctions de débogage pratiques, telles que des fonctions qui peuvent afficher des informations intéressantes sur le DOM.

    Raccourcis clavier

      Windows Mac OS X Linux
    Ouvrir l'Ardoise Maj + F4 Maj + F4 Maj + F4
    Exécuter le code de l'Ardoise Ctrl + R Cmd + R Ctrl + R
    Exécuter le code de l'Ardoise, afficher le résultat dans l'inspecteur d'objets Ctrl + I Cmd + I Ctrl + I
    Exécuter le code de l'Ardoise, insérer le résultat en tant que commentaire Ctrl + L Cmd + L Ctrl + L
    Réévaluer la fonction courante Ctrl + E Cmd + E Cmd + E
    Recharger le document courant puis exécuter le code de l'Ardoise Ctrl + Maj + R Cmd + Maj + R Ctrl + Maj + R
    Enregistrer le fichier Ctrl + S Cmd + S Ctrl + S
    Ouvrir un fichier existant Ctrl + O Cmd + O Ctrl + O
    Créer un nouveau fichier Ctrl + N Cmd + N Ctrl + N
    Fermer l'Ardoise Ctrl + W Cmd + W Ctrl + W
    Formatter et indenter dans l'Ardoise Ctrl + P Cmd + P Ctrl + P
    Afficher les suggestions d'auto-complétion (nouveauté de Firefox 32) Ctrl + Espace Ctrl + Espace Ctrl + Espace
    Afficher la documentation intégrée (nouveauté de Firefox 32) Maj + Espace Maj + Espace Maj + Espace
    Afficher la documentation intégrée (à partir de Firefox 33) Ctrl + Maj + Espace Ctrl + Maj + Espace Ctrl + Maj + Espace

    Éditeur de source

    Cette liste présente les raccourcis par défaut pour l'éditeur de code source.

    Dans les options liées à l'éditeur, vous pouvez choisir d'utiliser les raccourcis Vim, Emacs, ou Sublime Text.

    Pour les sélectionner, rendez-vous dans about:config, sélectionnez le paramètre devtools.editor.keymap et lui affecter la valeur « vim », « emacs », ou « sublime ». Ainsi, les commandes sélectionnées seront utilisées pour tous les outils de développement qui utilisent l'éditeur de source. Il vous faudra réouvrir l'éditeur pour que ce changement soit pris en compte.

    A partir de Firefox 33, cette option de raccourcis clavier est directement disponible dans la section des préférences de l'éditeur dans le panneau « Options des outils » (plutôt que de passer par about:config).

      Windows Mac OS X Linux
    Aller à la ligne Ctrl + J Cmd + J Ctrl + J
    Chercher dans le document Ctrl + F Cmd + F Ctrl + F
    Chercher à nouveau Ctrl + G Cmd + G Ctrl + G
    Tout sélectionner Ctrl + A Cmd + A Ctrl + A
    Couper Ctrl + X Cmd + X Ctrl + X
    Copier Ctrl + C Cmd + C Ctrl + C
    Coller Ctrl + V Cmd + V Ctrl + V
    Annuler Ctrl + Z Cmd + Z Ctrl + Z
    Rétablir Ctrl + Maj + Z / Ctrl + Y Cmd + Maj + Z / Cmd + Y Ctrl + Maj + Z / Ctrl + Y
    Indenter Tab Tab Tab
    Désindenter Maj + Tab Maj + Tab Maj + Tab
    Déplacer la/les ligne(s) vers le haut Alt + Haut Alt + Haut Alt + Haut
    Déplacer la/les ligne(s) vers le bas Alt + Bas Alt + Bas Alt + Bas
    Commenter/décommenter la/les ligne(s) Ctrl + / Cmd + / Ctrl + /

    Étiquettes et contributeurs liés au document

    Contributors to this page: tregagnon, Fredchat, maximelore, julienw, Goofy, Delapouite, Omnilaika02
    Dernière mise à jour par : maximelore,