|
JavaScript permet de créer des sites dynamiques, il n'est pas toujours facile à tester. Voici comment utiliser les outils de développement pour ce langage qui sont disponibles dans les principaux navigateurs.
JavaScript est de plus en plus populaire et puissant. Les navigateurs se sont peu à peu équipés de consoles de développement permettant d'entrer des instructions à la volée, de consulter les données en mémoire, ou d'explorer les fonctions et variables disponibles.
Des commandes plus avancées visent à définir des points d'arrêt et d'inspecter la pile des appels. La console est très pratique lorsque l'on souhaite écrire quelques lignes de JavaScript, ou même et surtout des scripts très évolués.
 |
Internet Explorer 8
IE6 et 7
n'en ont pas |
F12 ou via le menu Outils > Outils de développement |
 |
Firefox |
F12 via l'extension Firebug (onglet Console) ou via le menu Firefox >
Développement web > Console Web et Console d'erreurs |
 |
Chrome |
Ctrl+Shift+J ou via le menu Outils > Console JavaScript,
ou F12 pour arriver dans l'inspecteur |
 |
Safari |
En activant dans les Options > Avancées : la case à cocher
"Afficher le menu Développement dans la barre des menus"
puis Ctrl+Alt+I ou Ctrl+Alt+C |
 |
Opera |
Ctrl+Shift+I ou via le menu Page >
Outils de Développement > Opera Dragonfly |
Raccourcis pour gagner du temps : flèches haut/bas : naviguer dans l'historique des commandes entrées, shift+Entrée : aller à la ligne sans exécuter le code, tab ou flèche droite : auto-complétion,
$0 fait référence à l'élément qui a été visé par l'inspecteur d'élément (par exemple clic droit de la souris sur la page > Inspecter l'élément), $1 le précédent, etc. Utilisez les points d'arrêt.
Journal
La console génère un journal plus souples qu'un appel à alert(). La fonction console.log() permet d'afficher un message, une chaîne de texte, voire le contenu d'une variable (objet, tableau) de manière détaillée.
console.log("Kiwi"); ->> Kiwi
console.log(3+3); ->> 6
var fruit = "kiwis";
var mavariable = "J'aime les "+fruit;
console.log(mavariable); ->> J'aime les kiwis
Console.info(), console.warn() et console.error() présentent les retours sous différentes formes. Il faut les retirer du source après la phase de développement.
Autres fonctions des consoles JavaScipt
Selon les consoles, d'autres fonctions complétent l'ensemble, par exemple console.time() et console.timeEnd(), qui respectivement démarrent un chronomètre et le stoppent en affichant le résultat de la mesure. Très pratique pour mesurer le temps d'exécution d'un script et donc sa performance intrinsèque.
console.time("test1")
// Opérations variées nécessitant du temps de calcul...
console.timeEnd("test1");
test1: 10327ms
Voir les documentations de chaque navigateur pour plus d'informations, notament sur :
console.group(), console.dir(), console.assert(), console.trace(), etc
Source : Le journal du net developpeur javascipt
|
