+ Répondre à la discussion Actualité déjà publiée
Affichage des résultats 1 à 14 sur 14
  1. #1
    Membre régulier Avatar de marcbuils
    Homme Profil pro
    Développeur Web
    Inscrit en
    septembre 2012
    Messages
    94
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Lot et Garonne (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Conseil

    Informations forums :
    Inscription : septembre 2012
    Messages : 94
    Points : 91
    Points
    91

    Par défaut [Article] jQuery.loadScript : Chargez en Ajax des fichiers scripts déboguables

    Bonjour,

    Vous ne vous êtes jamais retrouvé avec un script impossible à déboguer parce qu'il avait été chargé en Ajax ?
    Si oui, je vous propose cet article qui vous guidera pour déboguer ce script grâce à l'utilisation du plugin jQuery.loadScript :
    Chargez en Ajax des fichiers scripts déboguables

    N'hésitez pas à faire part de vos remarques et surtout, bon code !

    Marc
    Pour moi, une informatique efficace est avant tout une informatique intuitive
    Liste de mes cours: http://marcbuils.developpez.com
    Si vous appréciez mon intervention, dite le avec le

  2. #2
    Membre régulier Avatar de marcbuils
    Homme Profil pro
    Développeur Web
    Inscrit en
    septembre 2012
    Messages
    94
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Lot et Garonne (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Conseil

    Informations forums :
    Inscription : septembre 2012
    Messages : 94
    Points : 91
    Points
    91

    Par défaut

    Bonjour,

    Je viens de faire une petite correction dans l'article car je viens de m'apercevoir que depuis la version 1.5 de jQuery, le fonction jQuery.getScript retourne un objet jQuery.Deferred alors que j'étais persuadé du contraire...


    Excusez-moi pour cette petite coquille

    Marc
    Pour moi, une informatique efficace est avant tout une informatique intuitive
    Liste de mes cours: http://marcbuils.developpez.com
    Si vous appréciez mon intervention, dite le avec le

  3. #3
    Rédacteur/Modérateur
    Avatar de SylvainPV
    Inscrit en
    novembre 2012
    Messages
    1 948
    Détails du profil
    Informations forums :
    Inscription : novembre 2012
    Messages : 1 948
    Points : 4 674
    Points
    4 674

    Par défaut

    Bonjour,

    Je ne suis pas sûr de comprendre, en quoi charger un script en AJAX le rend difficile à déboguer ? Avec l'inspecteur Webkit, il apparaît dans les ressources et on peut utiliser breakpoints et autres outils de la même façon que s'il était chargé via une balise <script>.

    Aussi, pouvez-vous préciser qu'est-ce qu'apporte $.loadScript en comparaison avec $.getScript ? Ce n'est pas très explicite dans l'article, tout ce que j'ai retenu est que le success callback est appelé sans arguments.

  4. #4
    Membre régulier Avatar de marcbuils
    Homme Profil pro
    Développeur Web
    Inscrit en
    septembre 2012
    Messages
    94
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Lot et Garonne (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Conseil

    Informations forums :
    Inscription : septembre 2012
    Messages : 94
    Points : 91
    Points
    91

    Par défaut

    Bonjour SylvainPV,

    La fonction $.getScript de jQuery charge les scripts de manières différentes si le script est local (sur la même machine que la page HTML) ou si le script est distant.
    Autant lorsque le script est distant, il est déboguable au même titre que les fichiers chargés depuis une balise script, par contre lorsque celui-ci est local, jQuery utilise Ajax pour le charger ce qui le rend illisible pour les débogueur car tout le code s'affiche sur une seule ligne.

    C'est dans ce cas que $.loadScript devient intéressant
    Pour moi, une informatique efficace est avant tout une informatique intuitive
    Liste de mes cours: http://marcbuils.developpez.com
    Si vous appréciez mon intervention, dite le avec le

  5. #5
    Rédacteur/Modérateur
    Avatar de SylvainPV
    Inscrit en
    novembre 2012
    Messages
    1 948
    Détails du profil
    Informations forums :
    Inscription : novembre 2012
    Messages : 1 948
    Points : 4 674
    Points
    4 674

    Par défaut

    Citation Envoyé par marcbuils Voir le message
    jQuery utilise Ajax pour le charger ce qui le rend illisible pour les débogueur car tout le code s'affiche sur une seule ligne.
    Je n'ai jamais observé ce comportement. Charger en AJAX ne change pas la source, qui devrait donc s'afficher de la même façon. Êtes-vous sûr que cela ne provient pas de votre debugger ou d'une mauvaise configuration de votre serveur qui minimise automatiquement les scripts ?

    J'ai réalisé un test avec un script local chargé avec jQuery.getScript, la source m’apparaît bien formatée :
    http://i.imgur.com/1lBHH.png
    Images attachées Images attachées

  6. #6
    Membre régulier Avatar de marcbuils
    Homme Profil pro
    Développeur Web
    Inscrit en
    septembre 2012
    Messages
    94
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Lot et Garonne (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Conseil

    Informations forums :
    Inscription : septembre 2012
    Messages : 94
    Points : 91
    Points
    91

    Par défaut

    C'est étonnant, je n'ai pas du tout le même comportement.
    Sur le débogueur de Chrome, le script chargé par l'intermédiaire de $.getScript n'apparait même pas alors qu'il est correctement exécuté. Et c'est un problème que je rencontre, moi mais aussi d'autres personnes avec qui j'en ai parlé, depuis des années et sur de nombreux serveurs différents.

    Voici un aperçu:
    http://i.imgur.com/ZiqBt.png
    Images attachées Images attachées
    Pour moi, une informatique efficace est avant tout une informatique intuitive
    Liste de mes cours: http://marcbuils.developpez.com
    Si vous appréciez mon intervention, dite le avec le

  7. #7
    Membre régulier Avatar de marcbuils
    Homme Profil pro
    Développeur Web
    Inscrit en
    septembre 2012
    Messages
    94
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Lot et Garonne (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Conseil

    Informations forums :
    Inscription : septembre 2012
    Messages : 94
    Points : 91
    Points
    91

    Par défaut

    Citation Envoyé par SylvainPV
    J'ai réalisé un test avec un script local chargé avec jQuery.getScript, la source m’apparaît bien formatée :
    http://i.imgur.com/1lBHH.png
    SylvainPV, en regardant de plus près ton aperçu d'écran, je me suis redu compte que l'onglet que tu présentes est l'onglet "Network", ce qui signifie que tu vois bien le fichier être appelé en Ajax.
    Par contre Chrome ne te permet pas de placer des points d'arrêts dans ton code ou encore espionner la valeur des variables.
    C'est ce genre de choses que te permet de faire la fonction $.loadScript.
    Pour moi, une informatique efficace est avant tout une informatique intuitive
    Liste de mes cours: http://marcbuils.developpez.com
    Si vous appréciez mon intervention, dite le avec le

  8. #8
    Rédacteur/Modérateur
    Avatar de SylvainPV
    Inscrit en
    novembre 2012
    Messages
    1 948
    Détails du profil
    Informations forums :
    Inscription : novembre 2012
    Messages : 1 948
    Points : 4 674
    Points
    4 674

    Par défaut

    D'accord, je comprends mieux. J'ai retrouvé le problème ici :
    http://stackoverflow.com/questions/6...cript-function

    Les scripts en local chargés via $.getScript sont ajoutés en inline et non en référence externe. J'ignore la raison, et je n'ai pas vu de réponse de l'équipe jQuery à ce sujet.

    Aussi, j'ai trouvé un gist assez court qui corrige ce problème sur la fonction $.getScript d'origine. Ca serait intéressant de comparer vos implémentations :
    https://gist.github.com/896561

  9. #9
    Membre régulier Avatar de marcbuils
    Homme Profil pro
    Développeur Web
    Inscrit en
    septembre 2012
    Messages
    94
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Lot et Garonne (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Conseil

    Informations forums :
    Inscription : septembre 2012
    Messages : 94
    Points : 91
    Points
    91

    Par défaut

    Citation Envoyé par SylvainPV Voir le message
    Aussi, j'ai trouvé un gist assez court qui corrige ce problème sur la fonction $.getScript d'origine. Ca serait intéressant de comparer vos implémentations :
    https://gist.github.com/896561
    Je viens de regarder le code en question et on utilise en fait exactement le même principe.
    A savoir qu'on ajoute simplement une balise "script" dans la balise "head" du HTML, avec le champs src qui pointe vers le fichiers à charger.
    La fonction $.loadScript est juste un peu plus complète puisqu'elle retourne un objet deferred qui permet de synchroniser plusieurs appels simultanés.

    Exemple:
    Code :
    1
    2
    3
    4
     
    $.when( $.loadScript('test.js'), $.loadScript('test2.js') ).done(function(){
        $('#test').test().test2();
    });
    Pour information, le fichier script compressé pèse seulement 0.745 kb
    Pour moi, une informatique efficace est avant tout une informatique intuitive
    Liste de mes cours: http://marcbuils.developpez.com
    Si vous appréciez mon intervention, dite le avec le

  10. #10
    Membre actif

    Homme Profil pro
    Développeur Web
    Inscrit en
    février 2006
    Messages
    27
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : février 2006
    Messages : 27
    Points : 168
    Points
    168

    Par défaut

    Bonsoir,

    J'aimerai signaler qu’il est inutile d’utiliser une API pour cela (dans le sens « pouvoir débogguer plus facilement ». Dans le sens importer plus facilement son fichier, pourquoi pas, même si cela se fait très simplement).

    En effet, j’ai été confronté à ce problème récurrent (surtout lorsque j’utilise RequireJS pour une architecture modulaire), et en fouinant rapidement, j’ai vu qu’il est possible de mettre une ligne à la fin de son fichier, que les navigateurs reconnaissent : sourceURL

    Cela permet de « nommer son fichier » (car le fichier n’est pas réellement chargé quand nous utilisons Ajax, il est exécuté dans un « eval »). Ainsi, lorsque ce dernier est chargé en Ajax, le navigateur lui associe un nom, et est facilement accessible dans le déboggeur Chrome et Firefox (et même dans des anciens).

    Un exemple d’utilisation :
    Code :
    1
    2
    3
    4
    5
    window.jQuery && (function($){
        // Do something here
    })(jQuery);
     
    //@ sourceURL=/javascripts/app.js

    Du coup, j’ai pris comme bonne pratique de placer cette information en bas de tous mes fichiers JavaScripts. Permettant ainsi de se dédouaner d'un framework supplémentaire, et à moindre coût.

    Pour de plus ample informations, voir le lien suivant : http://blog.getfirebug.com/2009/08/1...ith-sourceurl/


    Cordialement

  11. #11
    Membre régulier Avatar de marcbuils
    Homme Profil pro
    Développeur Web
    Inscrit en
    septembre 2012
    Messages
    94
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Lot et Garonne (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Conseil

    Informations forums :
    Inscription : septembre 2012
    Messages : 94
    Points : 91
    Points
    91

    Par défaut

    Bonjour indiana_jules,

    C'est en effet une solution intéressante aussi. Par contre je n'ai pas réussi à le faire fonctionner avec $.getScript, je ne suis pas certain que la fonction $.getScript utilise la fonction eval().
    Tu as déjà eu l'occasion de l'utiliser avec jQuery ?
    C'est compatible avec les debogueurs natifs des navigateurs ?

    En tout cas, merci pour l'info, c'est une bonne alternative
    Pour moi, une informatique efficace est avant tout une informatique intuitive
    Liste de mes cours: http://marcbuils.developpez.com
    Si vous appréciez mon intervention, dite le avec le

  12. #12
    Rédacteur/Modérateur
    Avatar de SylvainPV
    Inscrit en
    novembre 2012
    Messages
    1 948
    Détails du profil
    Informations forums :
    Inscription : novembre 2012
    Messages : 1 948
    Points : 4 674
    Points
    4 674

    Par défaut

    Je viens d'essayer la solution d'indiana_jules dans mon code de test avec $.getScript, et ça fonctionne impeccablement. Le script est visible dans mes sources et je peux placer des breakpoints via l'inspecteur Web de Webkit.

    Si quelqu'un a une référence des annotations en commentaires pour le navigateur telles que @ sourceURL, je suis preneur.

  13. #13
    Membre actif

    Homme Profil pro
    Développeur Web
    Inscrit en
    février 2006
    Messages
    27
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : février 2006
    Messages : 27
    Points : 168
    Points
    168

    Par défaut

    Bonjour,

    D'après ce que j'ai pu voir / ressentir, je pense qu'un débuggeur de navigateur fonctionne de la manière suivante:

    * Si le fichier est déclaré dans la page HTML, ou injecter via JavaScript (en ajoutant une balise <script>, <link> dans le header par exemple), le navigateur va prendre le nom (et le chemin) relatif au fichier (via l'attribut href ou src en fonction de la balise)

    * Autrement, si nous souhaitons injecter du contenu via Ajax (qui utilisera eval), le navigateur cherchera dans le contenu @ sourceURL, afin d'associer le code exécuté plus facilement avec le navigateur. A noter que vous pouvez générer un javascript à la volée, l'exécuter avec eval, et si @ sourceURL est présent, il devrait apparaître dans le déboggeur du navigateur

    Vu que le plugin $.loadScript injecte le JavaScript en utilisant la première méthode, @ sourceURL est donc ignorée.



    D'après ce que j'ai pu voir aussi, c'est que les débuggeurs natifs, tel que celui de Chrome, ou additionnel comme Firebug, le reconnaissent. Cela me porte à croire que cela fait parti des usages et que le débuggeur est censé le prendre en compte.



    Ce qui est intéressant avec @ sourceURL, c'est que du coup, nous nous soucions plus du tout de savoir par quel biais notre fichier JavaScript va être injecté.

    Par exemple, j'utilise souvent RequireJS. Il va injecter mes scripts avec la première solution (me semble-t-il). Mais si la stratégie de chargement change, ou que j'utilise un framework qui privilégie le chargement en Ajax, ce sera transparent pour moi. Et je n'aurai pas besoin de faire des hacks / surcharges lourdes en JavaScript pour cela.

    Cordialement

  14. #14
    Invité de passage
    Homme Profil pro
    Chef de projet NTIC
    Inscrit en
    novembre 2012
    Messages
    1
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations professionnelles :
    Activité : Chef de projet NTIC
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : novembre 2012
    Messages : 1
    Points : 1
    Points
    1

    Par défaut

    Il existe déjà un plugin JQuery de ce type, je l'utilise en production sur de gros site depuis plus d'un an.
    http://www.arashkarimzadeh.com/jquer...avascript.html

    Il permet de charger le JS ou le CSS et utilise un peu la même approche que celle que vous citez, à savoir créer un élément dans la partie HEAD pour charger le script supplémentaire.

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •