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.

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

Il y a différentes façons d'ouvrir l'ardoise JavaScript dans une fenêtre dédiée :

• Utiliser le raccourci clavier Maj + F4, ou aller dans le menu "Développement" (qui est un sous-menu du menu outils sur OS X et Linux), et sélectionner ensuite "Ardoise JavaScript"
• cliquer sur l'icône (), dans la barre d'outils principale ou dans le menu principal (), puis sélectionner "Ardoise JavaScript".

Cela ouvrira l'ardoise JavaScript dans une nouvelle fenêtre.

Ouvrir l'ardoise JavaScript dans la boite à outils

Depuis Firefox 47, il est possible d'ouvrir l'ardoise dans les outils de développement. Il faut pour avant tout cocher la case "Ardoise" dans la section "Outils de développement par défaut" des options des outils page.

L'ardoise est maintenant disponible dans la boite à outils aux cotés des autres outils tels que l'Inspecteur et la Console. Ce mode est particulièrement utile combiné avec la console scindée : Il est alors possible d'utiliser l'ardoise pour avoir un éditeur multiligne persistant, et la Console pour interagir avec la page.

Édition

La fenêtre de l'ardoise ressemble à ceci (sur OS X la barre de menu est 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

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.

Par exemple, essayez de taper "d", puis 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 touches ↑ et  ↓  permettent de défiler parmi les suggestions et la touche Entrée ou Tab sélectionne la suggestion en surbrillance.

documentation popup

Pour afficher la popup de documentation; il faut appuyer sur Ctrl + Maj + Espace  lorsque le curseur est sur un identifieur. Par exemple si when the cursor is on an identifier. Par exemple taper document.addEventListener, puis appuyer sur Ctrl + Maj + Espace, affichera une popup contenant le résumé de la syntaxe de la fonction ainsi qu'un court résumé :

Le lien "[docs]" pointe sur la documentation MDN pour le symbole.

Exécution

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 à ceci :

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. Ainsi, il est possible de l'utilisé en tant que REPL.

Recharger et exécuter

L'option "Recharger et exécuter" est seulement disponible dans le menu contextuel (clic droit). Il recharge tout d'abord la page, puis exécute le code lorsque la page déclenche l'évènement "load". C'est utile lorsque vous vous voulez exécuter dans un environnement sans modification.

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

Il est possible d'exécuter l'ardoise dans le contexte du navigateur lui-même. Pour cela, il est nécessaire de cocher l'option «Activer le débogage du chrome et des modules » dans les options des outils de développement . Une fois cela fait, le menu « Environnement » a une option « Navigateur » . Lorsqu'elle est sélectionnée, le contexte est le navigateur entier et non plus uniquement le contenu de la page courante. Il est  facile de 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.

Raccourcis clavier

Éditeur de source

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

Dans les options de 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 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).