命令行API娱乐和利润

浏览器开发者工具命令行API：提升开发和调试效率的利器

本文探讨浏览器开发者工具中强大的命令行API，它提供一系列别名、便捷函数和快捷方式，显着提升开发和调试体验。

核心要点:

• 命令行API允许开发者在JavaScript控制台中与网页交互。
• API仅限于JavaScript控制台访问，无法用于页面脚本，但方便直接在浏览器窗口中试验代码片段。
• API提供多种函数用于DOM探索、对象跟踪和控制台调试，包括$ ( document.querySelector 别名), dir (列出对象所有属性), debug 和monitor (设置断点和监控函数调用)。
• 尽管存在局限性（例如，不适用于原生方法或自定义事件），命令行API仍然是开发者的强大工具，能显着提高效率并简化工作流程。

命令行API包含一系列别名、便捷函数和快捷方式，允许您直接在JavaScript控制台中与网页交互。本文将介绍一些实用工具及其在提升开发和调试体验方面的应用。

您可以通过多种方式访问浏览器的JavaScript控制台。通常按下F12键并点击“控制台”选项卡即可。

在深入探讨之前，让我们先来一个小测验：您知道如何在浏览器中可视化CSS布局的大纲吗？

答案：仅需108字节代码。

[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1

正如该简洁代码的创建者Addy Osmani所说，这是一个“推特大小的调试器”。您可以立即尝试它。只需复制该行代码并将其粘贴到您喜欢的开发者工具（如Chrome的DevTools、Firefox的Firebug、Opera的Dragonfly、Safari的Web Inspector，甚至IE的F12工具）的JavaScript控制台中（尽管IE仅支持$系列和console对象）。

虽然颜色十六进制值的生成令人印象深刻，但我更想让您关注特殊的$$。这是document.querySelectorAll的别名，也是命令行API中众多巧妙功能之一。让我们看看API还能提供什么其他功能。

命令行API仅在JavaScript控制台中可用。您无法将API提供给页面上的脚本。但好处是，这使您有机会直接在浏览器窗口中尝试本文其余部分的所有代码片段。只需打开您的JavaScript控制台并进行实验。

DOM 探索

如果您熟悉jQuery库，您可能已经猜到$的作用。作为document.querySelector的别名，它返回与给定CSS选择器匹配的第一个DOM元素的引用。

让我们看看如何在著名的Cookie Clicker游戏中使用它。如果您从未遇到过这个单调但奇怪地令人上瘾的游戏：您基本上点击一个大饼干来生产更多烘焙食品，并购买各种烘焙设备。然后这些设备会生产更多饼干……您明白了。

现在，如果我们能让控制台代劳点击饼干，让手和鼠标休息一下，岂不是很好？只需一点JavaScript和我们新朋友$，就可以通过简洁的一行代码实现：

[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1

虽然这很有趣，但在某些情况下，命令行API的DOM选择功能也具有实际价值。您已经在本文的介绍中了解了$$的强大功能。作为document.querySelectorAll的别名，它返回一个包含与给定CSS选择器匹配的所有DOM元素的数组。

例如，我们可以使用此函数提取网站的所有图像源：

setInterval(function() { $("#bigCookie").click(); }, 10);

如果您正在寻找特定元素并想仔细检查它，请使用inspect。例如，inspect(document.body) 将直接带您到开发者工具的“元素”选项卡中的body元素。（如果您向其传递JavaScript函数，inspect 也适用——它会将您带到“源”面板。）

对象跟踪

当我试图理解JavaScript的原型继承时，我在控制台中有一个小助手：dir。当对对象调用此方法时，它会显示对象的所有属性列表，包括例如prototype和__proto__。这只是dir派上用场的众多场景之一。我发现它能方便地查看所有对象的属性。

如果您只对对象的直接属性（即不是从原型链继承的属性）感兴趣，可以使用keys和values分别获取包含名称和关联值的数组。试试看：

var pics = $$("img");
for (pic in pics) {
  console.log(pics[pic].src);
}

由于对象是JavaScript中最基本和普遍存在的数据结构，我经常使用这些函数来跟踪对象状态。

控制台调试

每当我的网站或应用程序出现问题时，我做的第一件事就是检查控制台是否有错误消息。我在控制台中花费了大量的开发时间。如果您也是如此，那么您应该会对debug和monitor等函数感到兴奋。它们只是命令行API提供的强大调试工具中的两个示例。（不幸的是，Safari的Web Inspector不支持这两个函数。）

debug(YourLibrary.someFunction)

这会在YourLibrary.someFunction函数的第一行设置断点，并且每次调用该函数时，调试器都会打开。由于我几乎一直在控制台中工作，因此这比浏览源代码并手动设置断点要快得多，尤其是在处理压缩代码时。要关闭此行为，只需对同一函数调用undebug即可。

如果您不想调用调试器，而只是在每次调用特定函数以及使用什么参数时收到通知，monitor就是您的朋友。

控制台中的以下代码：

[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1

例如，一旦您调用square，Chrome就会像这样通知您：

square(5); function square called with arguments: 5

只需对同一函数调用unmonitor即可停止监控。请注意，Firebug中的monitor仅适用于页面代码中的函数。

命令行API在事件调试方面也为您提供了支持。getEventListeners返回一个对象，其中包含为指定对象注册的每个事件类型（如“click”或“mousedown”）的数组。

getEventListeners(document);

更进一步，您还可以使用monitorEvents来获取控制台中有关是否实际触发指定事件的反馈。继续在控制台中输入以下内容：

monitorEvents(window, "resize");

调整浏览器窗口大小后，您将在控制台中获得反馈以及Event对象以供进一步检查。Firebug添加了一个不错的额外功能，甚至会通知您哪些DOM元素超出或溢出当前视口——这对于调试响应式布局非常有帮助。

您还可以指定多个事件，甚至可以从事件类型列表中选择：

monitorEvents(window, ["scroll", "mousedown"]); monitorEvents(document, "key");

请参阅Google Developers上的命令行API参考以获取完整列表。那时您可能不会感到惊讶的是，您可以使用unmonitorEvents停用事件监控。

Chrome用户的额外福利

迟早控制台中的调试功能会暴露出一些缺点，包括：

• debug和monitor不适用于原生方法
• monitorEvents不适用于自定义事件
• 缺少功能，例如在对象属性访问时中断

幸运的是，Amjad Masad在他的出色Chrome扩展程序Debug Utils中解决了这些问题（您可以在Github上找到源代码）。

如何使用命令行API？

命令行API提供了一系列有用的便捷函数，用于对网页和应用程序进行临时评估。尤其是在我的调试工作流程中，它很快取代了整个console.log噩梦，成为我最喜欢的工具之一。

JavaScript控制台是一个强大的工具，您现在可以在每个主要浏览器中访问它。您正在使用它吗？如果是，您最喜欢的提示和技巧是什么？

(FAQs部分略去，因为与文章主题关联性较弱，且篇幅过长。)

以上是命令行API娱乐和利润的详细内容。更多信息请关注PHP中文网其他相关文章！