jQuery Girl
  1. jQuery Girl
  3. JQuery.getScript peut-il afficher le fichier en tant que ressource dans les outils de développement Chrome?
Intereting Posts
Exemple simple à propos de CouchJS dans l’espace utilisateur, par exemple avec le navigateur? Surveiller les changements de DOM, de manière élégante Remplacement de code de couleur spécifique dans css à l’aide de jquery Essayer de générer un tableau à partir de jQuery: sélecteur vérifié Trouver une valeur à Meteor Mongo Comment append des ticks dynamics via JSON dans Flot? jKey Erreurs du plug-in jQuery dans IE6 / 7, tentative d’exécution chaque fois qu’une touche non utilisée est enfoncée Comment combattre? jQuery, vérifie si tous les groupes de radiobutton sont sélectionnés jQuery: Comment puis-je append un saut de ligne à la saisie de formulaire? jQuery jump to id (pas d’animation) Conservez les majuscules avec attr () avec jquery (sensible à la casse) Téléchargement de fichier Blueimp, comment savoir à quel fichier le rappel de progression est destiné? pourquoi la colonne figée Jqgrid ne semble-t-elle pas fonctionner avec les lignes et l’en-tête du filtre? Comment masquer la barre de défilement du corps à l’aide de jQuery Fondu dans le contenu généré dynamicment avec Bootstrap 3

JQuery.getScript peut-il afficher le fichier en tant que ressource dans les outils de développement Chrome?

Mon code doit charger des scripts à la demande. 

function includeJS(uri) { return jQuery.getScript(uri); } includeJS('/path/to/script.js').always(function() { // do something after script is loaded });

Le problème, cependant, est que le fichier JS ne sera pas disponible dans les outils de développement de Chrome, contrairement aux autres fichiers inclus de manière statique sur la page. Pour cette raison, je ne peux pas facilement mettre des points de rupture.

Existe-t-il une alternative à jQuery.getScript qui affiche également le script dans les outils de développement de Chrome avec la possibilité de définir des points de rupture?

EDIT: Ajout de la solution en fonction de la réponse acceptée (je considérerai d’autres solutions, mais cela semble fonctionner pour moi) 

 function includeJS(uri) { var def = $.Deferred(); var script = document.createElement('script'); script.src = uri; script.onload = function() { def.resolve(); } script.onerror = function() { def.reject(); } document.body.appendChild(script); return def.promise(); }

Vous pouvez simplement append une balise de script et utiliser un gestionnaire de chargement pour exécuter des actions post-chargement. Exemple: https://jsfiddle.net/0nu2dusu/ 

 var script = document.createElement('script'); script.src = 'my_external_script.js'; script.onload = loadHandler; document.body.appendChild(script);

Vous avez un peu moins de contrôle sur les chargements échoués que les offres $.getScript , mais le script apparaît dans les outils de développement.

En fait, c’est toujours là. Jetez un coup d’œil à un exemple du site jQuery.getScript () . Voici à quoi cela ressemble: http://soffr.miximages.com/javascript/LMFFAag.png . Le problème avec .getScript() est qu’il ne met jamais en cache les fichiers demandés. Il ajoute donc une chaîne aléatoire pour chaque appel afin d’empêcher la mise en cache (ce qui nous empêche également de déboguer du code). Mais il existe une solution pour cela:

  1. Définissez la mise en cache .ajax globale (non recommandé) avant d’appeler .getScript() : 

     $.ajaxSetup({ cache: true });

  2. Utiliser un .ajax() direct .ajax() (recommandé): 

     $.ajax({ dataType: "script", cache: true, url: url }

  3. Si c’est votre propre script, vous pouvez toujours append un debugger; commande n’importe où pour forcer le navigateur à entrer en mode débogage (DevTools doit être ouvert).