Blogdevphp

5 sandbox javascript pour tester son code

2014-04-12 outils

Vous connaissez cette expression qui dit qu'une image vaut mieux qu'un long discours. Alors un script javascript, exécutable en live avec fichier HTML et CSS en prime, c'est plus parlant.

Difficile parfois de s'imaginer , d'avoir une idée précise du fonctionnement du script ou encore de montrer son travail à l'ensemble de l'équipe. Des sandbox existent pour tester et montrer en condition réelle, notre code javascript. On a la possibilité de sauvegarder et d'envoyer par mail le lien correspondant. 

Je vais vous en présenter cinq, il y en a d'autres bien sûr, mais, à mon humble avis, ce sont ceux qui méritent d'être connus.

 

Jsfiddle

Je pense que c'est l'un des plus connu, facile à utiliser et mettre en place comme pour la plupart des sandbox d'ailleurs. Jsfiddle contient de très nombreuses librairies telles que Jquery, ExtJs, AngularJS, FabricJS, Paper.js... vraiment un catalogue très riche.

Il est possible également de simuler des requêtes Ajax, choisir le DTD de votre fichier HTML, importer vos propres fichiers et travailler avec des fichiers CSS et SCSS.

De plus, il inclue des outils pour réindenter votre code et aussi, pour valider celui-ci avec JSHint. On peut également travailler en mode collaboratif.

 

 

Codeopen

La particularité de Codeopen, c'est qu'on trouve des scripts tout fait, à la disposition de tous, postés par des les utilisateurs inscrits sur Codeopen. Ce n'est pas juste, une sandbox où l'on vient tester son code, on peut également partager son script.

On peut travailler avec des fichiers CSS, mais également SASS(.scss, .sass), LESS et Stylus. On peut importer des fichiers et analyser nos scripts, HTML inpector pour le fichier HTML, CSS Lint pour nos fichiers CSS et JS Hint pour le fichier JS.

 

 

Jsdo

Sur le même principe que Codeopen, on peut partager nos scripts avec la communauté de Jsdo.

Par rapport au fichier HTML, on a la possibilité d'utiliser Emmet, j'en avais parlé dans un article, il permet de générer dynamiquement des balises HTML avec des combinaisons de touches.

On peut glisser-déposer des fichiers pour l'import, faire un preview smartphone, associer avec notre compte Github pour faire notre gist afin de partager nos snippets.

 

 

JS Bin

Avec JS Bin, je peux également importer sur Github. Le petit plus, c'est que avec mon script, je peux créer une balise embed et l'intégrer sur mon site ou mon blog. 

Comme ça, je peux montrer en live, l'éxécution du code sous un format vidéo.

 

 

Liveweave

Sur Liveweave, on a généralement les dernières versions de librairies, on peut télécharger notre travail, sous la forme d'un fichier ZIP. On a le choix des couleurs pour le fichier HTML.

On a le mode 'vision de nuit' afin de ne pas fatiguer nos petits yeux!

 

 

comments powered by Disqus
Copyright © 2017 blogdevphp.fr - Tous droits réservés