chrome 开发者工具内置了jQuery?

早上思考到一个问题,为什么Chrome的devtool中"$"一直可以执行,即使页面没有jQuery脚本。难道内置了jQuery?本着寻根究底的原则,好好研究了一下。

我们在Chrome控制台中进行的操作其实是调用了 Chrome Command Line API。这个API主要完成选择和检查DOM元素,显示数据,执行函数以及监控DOM事件等任务。需要注意的是,这个API只能通过Chrome控制台调用,不能通过网页的脚本调用。

了解到这里,大家就明白了在控制台中用$查找元素和页面一毛钱关系也没有,也不是jQuery的选择器。顺便介绍一下 Chrome Command Line API有哪些接口。

  • $(selector)
    返回带有指定的 CSS 选择器的第一个 DOM 元素的引用。此函数等同于 document.querySelector() 函数。$是Chrome定义的一个别名,实际就是document.querySelector()

注意: 如果页面中使用了jQuery或者其他脚本对 $ 进行了重写,那么 $ 会被覆盖。执行的结果将是jQuery或其他脚本的结果。

  • $$(selector)
    返回与给定 CSS 选择器匹配的元素数组。此命令等同于调用 document.querySelectorAll()。

  • $x(xpath)
    返回一个与给定 XPath 表达式匹配的 DOM 元素数组。

  • clear()
    清除其历史记录的控制台。

  • copy(object)
    将指定对象的字符串表示形式复制到剪贴板。

  • $_
    返回最近评估的表达式的值。

Chrome Command Line API支持的方法还有很多,Chrome开发者工具也是一个很强大的工具。更多信息请参考https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference

你可能感兴趣的:(chrome 开发者工具内置了jQuery?)