Y a-t-il une fonction de téléchargement dans jsFiddle ?

Question

Existe-t-il une fonction de téléchargement dans jsFiddle, qui vous permette de télécharger un HTML avec les CSS, HTML et JS dans un seul fichier, afin de pouvoir l'exécuter sans jsFiddle à des fins de débogage ?

Answer 1

Ok, je l'ai découvert :

Vous devez mettre /show a après l'URL sur laquelle vous travaillez :
http://jsfiddle.net/<votre_fiddle_id>/show/
C'est le site qui montre les résultats.

Et ensuite quand tu l'enregistres comme un fichier. Tout est dans un seul fichier HTML.

Par exemple :
http://jsfiddle.net/Ua8Cv/show/
pour le site http://jsfiddle.net/Ua8Cv

Answer 2

Nouvelle réponse à une vieille question :

Méthode 1 :

Étape 1 : Vous devez mettre /show après le URL sur lequel vous travaillez :

http://jsfiddle.net/<fiddle_id>/show/ 

Il montre la sortie avec un en-tête de résultat.

Étape 2 : Cliquez avec le bouton droit de la souris sur le cadre inférieur et sélectionnez Voir la source du cadre . C'est tout. Vous avez le code html avec les liens JS en ligne, CSS.

Enregistrez-la.

Par exemple : http://jsfiddle.net/YRafQ/20/show/ pour le site http://jsfiddle.net/YRafQ/20/

Note : Voir la source du cadre et non Afficher la source de la page

Méthode 2 :

Vous pouvez utiliser ce code : view-source:http://fiddle.jshell.net/<fiddle_id>/show/light/

Par exemple : Pour mon fiddle_id : YRafQ/20

view-source:http://fiddle.jshell.net/YRafQ/20/show/light/

Answer 3

L'ajout de /show ne présente pas un code source pur, c'est un exemple de travail intégré. Pour l'afficher sans scripts, css et html supplémentaires, utilisez :

http://fiddle.jshell.net/<fiddle id>/show/light/

Un exemple : http://fiddle.jshell.net/Ua8Cv/show/light/

Answer 4

Non, JSFiddle n'a pas de fonction de téléchargement. Cependant, il n'est pas très difficile de contourner ce problème et de sauvegarder le contenu d'un fiddle de toute façon.

Depuis que la réponse acceptée a été postée, JSFiddle a apporté quelques modifications récentes à l'interface utilisateur et au backend qui affectent la manière dont un fiddle doit être téléchargé. Notez les procédures mises à jour ci-dessous.

---

Méthode simple en ligne de commande

Cette méthode ne télécharge que le HTML, le JavaScript et le CSS du violon en un seul fichier. Les ressources externes de fiddle ne sont pas sauvegardées.

Dans la ligne de commande indiquée ci-dessous, fiddle_id fait référence au numéro d'identification du violon. Pour un violon dont l'URL est " http://jsfiddle.net/<fiddle_user>/<fiddle_id> " ou " http://jsfiddle.net/<fiddle_id> ", seul le fiddle_id est nécessaire. Le site fiddle_user est sans importance.

À l'invite d'un shell, entrez la ligne de commande unique :

fiddleId=fiddle_id; curl "http://fiddle.jshell.net/${fiddleId}/show/" -H "Referer: http://fiddle.jshell.net/${fiddleId}/" --output "${fiddleId}.html"

Le violon sera enregistré dans un fichier nommé " fiddle_id.html ".

---

Méthode de navigation plus longue

Cette méthode permet de télécharger le violon ainsi que ses ressources externes. Les étapes indiquées sont basées sur l'utilisation de Google Chrome. L'utilisation d'autres navigateurs Web devrait également fonctionner, mais ils peuvent utiliser des noms de fichiers différents.

1. Sélectionnez l'option " Share/Embed Le menu/lien " " en haut de la page d'édition de JSFiddle. Dans la boîte de dialogue qui s'affiche, copiez l'URL indiquée dans le champ " Share full screen result . Il sera de la forme " http://jsfiddle.net/<fiddle_user>/<fiddle_id>/embedded/result/ " ou " http://jsfiddle.net/<fiddle_id>/embedded/result/ ".
2. Ouvrez une nouvelle fenêtre de navigateur et collez-y l'URL copiée à l'étape précédente. Chargez cette page.
3. Utilisez la fonction d'enregistrement de votre navigateur pour sauvegarder la page et toutes ses ressources sur votre ordinateur local. Pour enregistrer toutes les ressources en utilisant Google Chrome, par exemple, assurez-vous de sélectionner " Webpage, Complete " dans le " Format menu ". Veillez à donner un nom à la page. Disons qu'elle s'appelle " fiddle.html " pour cet exemple.
4. Une fois la page sauvegardée sur votre ordinateur, vous disposerez de la fonction " fiddle.html "et un répertoire nommé " fiddle_files ". Le fichier " fiddle.html La page "wrapper" est la page que JSFiddle utilise pour afficher un en-tête avec un titre "Résultat" et d'autres liens. Elle chargera votre fiddle dans un élément iframe. Dans la plupart des cas, ce fichier peut être ignoré ou même supprimé. Le contenu HTML, JavaScript et CSS de votre gabarit sera enregistré dans le fichier " fiddle_files "comme un seul fichier nommé " saved_resource.html ".
5. Copie " fiddle_files/saved_resource.html "à l'endroit où vous souhaitez l'utiliser. Si votre violon comprend des éléments sous " External Resources ", ceux-ci apparaîtront également dans le " fiddle_files Répertoire ". Veillez à copier ces fichiers au même endroit que celui où vous avez copié " saved_resource.html ", car le fichier HTML fera référence à ces ressources en utilisant des URL relatives.

Comme indiqué précédemment, d'autres navigateurs peuvent nommer les fichiers différemment lorsqu'ils sont enregistrés. Par exemple, Firefox nomme le fichier combiné HTML/JS/CSS " fiddle_files/a.html ".

Answer 5

Étape 1 :
Allez à une page de violon comme jsfiddle.net/oskar/v5893p61

Étape 2 :
Ajoutez '/show' à la fin de l'URL, comme suit jsfiddle.net/oskar/v5893p61/show

Étape 3 :
Cliquez à droite sur la page et cliquez sur le bouton Voir la source du cadre . Vous obtiendrez le code HTML, y compris le CSS dans la balise et le Javascript (js) dans la balise. [Le lien source de toutes les bibliothèques sera également ajouté.] Voir la capture d'écran

Étape 4 :
Vous pouvez maintenant enregistrer le code source dans un fichier .html.