Web Inspector ReferenceInspector Bootstrap Script

The Inspector Bootstrap Script is a JavaScript snippet created in and persisted by Web Inspector that is guaranteed to be the first script evaluated after any new JavaScript global object is created in any page, including <iframe>, regardless of URL, so long as Web Inspector is open. It can be created by selecting Inspector Bootstrap Script when creating a resource.

Similar to how Local Overrides allow for the content of any <script> loaded over the network to be overridden, the Inspector Bootstrap Script allows for “overriding” (modifying) of the JavaScript global object itself to add/remove/change functionality, since it evaluates before anything else has had the opportunity to touch the JavaScript global object.

The Inspector Bootstrap Script can be used as a debugging tool, such as replacing existing functions with ones that contain debugger or console statements, or even as a way to store common utility functions to make manipulating values in the Console easier.

Keep in mind that since the Inspector Bootstrap Script is the first script to be evaluated, any subsequent script could override any values added to the JavaScript global object, so consider names carefully.

Motivation

Sometimes, in an effort to cut down resource size, minifiers may save references to various prototype functions to avoid having more than one instance of the same sequence of characters.

As an example, preventDefault is 14 characters, whereas something like pd is only 2:

var p = "prototype";
var a = Event[p].preventDefault;
function pd(e) {
    a.call(e);
}

There’s nothing “wrong” with doing this, but it does make it more difficult to do common debugging actions, such as replacing a prototype function with one that logs relevant data, or even inserts debugger statements:

// Log whenever `Event.prototype.preventDefault` is called.
(function() {
    let original = Event.prototype.preventDefault;
    Event.prototype.preventDefault = function(...args) {
        console.trace(this, args);
        return original.apply(this, args);
    };
})();

Since a is a saved reference to the prototype function, any further modifications made to Event.prototype, such as the one above, won’t affect a.

As a result, in order for debugging actions like the one above to be useful, they need to be evaluated before any other scripts have had a chance to evaluate.

One way to do this would be to create a Local Override for the main resource and add an inline <script> to the beginning of the <head>, but this would only have an effect for that URL, not everywhere.

Instead, putting the debugging code inside the Inspector Bootstrap Script will ensure that it is evaluated before any scripts on any page/<iframe>, which in turn means that no calls to preventDefault will ever be missed.

Updated for Safari Technology Preview. Try it out for the latest Web Inspector features, including all of the above and more.

Written January 14, 2020 by Devin Rousso

Last updated January 7, 2021 by Devin Rousso