javascript - Can jQuery.getScript show the file as a resource in Chrome Developer Tools? - Stack Overflow

admin管理员组

文章数量:1332881

My code needs to load scripts on demand.

function includeJS(uri) {
    return jQuery.getScript(uri);
}

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

The problem, though, is that the JS file will not be available in the Chrome Developer tools like other files that were included statically on the page. Due to this I cannot easily put break points.

Is there an alternative to jQuery.getScript that will also show the script in the Chrome Developer tools with the ability to put break points?

---

EDIT: Adding solution based on currently accepted answer (I will still consider other solutions, but this seems to work for me)

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();
}

My code needs to load scripts on demand.

function includeJS(uri) {
    return jQuery.getScript(uri);
}

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

The problem, though, is that the JS file will not be available in the Chrome Developer tools like other files that were included statically on the page. Due to this I cannot easily put break points.

Is there an alternative to jQuery.getScript that will also show the script in the Chrome Developer tools with the ability to put break points?

---

EDIT: Adding solution based on currently accepted answer (I will still consider other solutions, but this seems to work for me)

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();
}

• javascript
• jquery

Share Improve this question Follow edited Aug 17, 2015 at 20:53 codefactor asked Aug 17, 2015 at 18:22 codefactorcodefactor 1,65633 gold badges1919 silver badges4141 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You can simply append a script tag, and use an onload handler to execute post-load actions. Example: https://jsfiddle/0nu2dusu/

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

You have slightly less control over failed loads than $.getScript offers, but the script does show up in dev tools.

Actually it's always there. Just take a look at an example from the jQuery.getScript() site. Here's how it looks like: https://i.sstatic/VcFqX.png. The problem with .getScript() is that it never caches files requested, so on every call it adds some random string to prevent caching (what also prevents us from debugging code). But there's workaround for that:

1. Set global .ajax caching (not remended) before you call .getScript():

   $.ajaxSetup({
     cache: true
   });
   

2. Use direct .ajax() call (remended):

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

3. If it's your own script, you can always add a debugger; mand anywhere to force browser to enter the debug mode (DevTools must be opened).

本文标签： javascriptCan jQuerygetScript show the file as a resource in Chrome Developer ToolsStack Overflow