Web 检查器参考 检查器引导脚本

检查器引导脚本是一个由 Web 检查器创建并持久化的 JavaScript 片段，它保证在任何页面（包括 <iframe>）中创建任何新的 JavaScript 全局对象后，无论 URL 如何，只要 Web 检查器处于打开状态，它都将是第一个被评估的脚本。您可以在创建资源时选择检查器引导脚本来创建它。

类似于本地覆盖允许覆盖通过网络加载的任何 <script> 的内容，检查器引导脚本允许“覆盖”（修改）JavaScript 全局对象本身以添加/删除/更改功能，因为它在任何其他内容有机会接触 JavaScript 全局对象之前进行评估。

检查器引导脚本可以用作调试工具，例如用包含 debugger 或 console 语句的函数替换现有函数，甚至可以作为存储常用实用函数的方法，以便更轻松地在控制台中操作值。

请记住，由于检查器引导脚本是第一个被评估的脚本，任何后续脚本都可能覆盖添加到 JavaScript 全局对象中的任何值，因此请仔细考虑命名。

动机

有时，为了减小资源大小，压缩器可能会保存对各种原型函数的引用，以避免出现多个相同字符序列的实例。

例如，preventDefault 有 14 个字符，而像 pd 这样的只有 2 个。

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

这样做并没有“错”，但这确实增加了执行常见调试操作的难度，例如用一个记录相关数据或甚至插入 debugger 语句的函数替换原型函数。

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

由于 a 是原型函数的已保存引用，因此对 Event.prototype 进行的任何进一步修改（例如上述修改）都不会影响 a。

因此，为了使上述调试操作有用，它们需要在任何其他脚本有机会评估之前进行评估。

一种方法是为主要资源创建本地覆盖，并在 <head> 的开头添加一个内联 <script>，但这只对该 URL 有效，而不是在所有地方都有效。

相反，将调试代码放入检查器引导脚本中将确保它在任何页面/<iframe>上的任何脚本之前进行评估，这反过来意味着永远不会漏掉对 preventDefault 的调用。

为Safari 技术预览版更新。试用它以获取最新的 Web 检查器功能，包括上述所有功能及更多。

撰写于 2020 年 1 月 14 日，作者：Devin Rousso

最后更新于 2021 年 1 月 7 日，作者：Devin Rousso