比console.log更多-chrome 调试命令

chrome dev-tools功能很强大。相信大多数人使用最多的一个api就是console.log,这很有用,但是这只是chrome 调试api 之一,还有很多其它非常强大的api!推开门,是另一片风景。

console.log

其它没啥可讲,主要看看其格式化功能:

> console.log("I am %d years old, my name is %s",18,"Davin")
> I am 18 years old, my name is Davin

输出对象:%O,var t={name:"Davin",age:18}:

使用css样式:%c


是不是似曾相识? 百度首页按f12看吧。

显示错误和警告:console.error、console.warn

注:除过这些,console还有count、assert、dir等方法,详情移步chrome console api.

$_

$_代表上一个语句的执行结果:

$0 - $4

代表inspect最近选中的5个dom对象,$0代表最近一次选中的dom。这非常有用,我们可以在elements面板中用鼠标单击某个dom,如果要对该dom进行操作,直接在命令行输入$0便是该dom的引用.

$(selector)、$$(selector)

使用css选择器选取�dom, 前者只匹配第一个元素,是document.querySelector() 的一个别名,后者会返回所有,是document.querySelectorAll().的�别名。

注意:如果"$"符已在js中定义,则会覆盖系统原始的$,当页面中引入jQuery时�,$(jQuery)将会覆盖调试�命令中的$。区分$有没有被覆盖的一个简单的方法是查看其定义:


未覆盖

下面是引入Neat.js后,neat�会定义$:

已覆盖

clear()

清楚控制台的所有输出

copy(object)

将object拷贝到剪贴板

debug(function)

调试某个函数,当指定的函数被执行时将会断在被调试函数的源代码的第一句。

inspect(object/function)

查找某个对象或�函数。执行后会定位到该对象/函数处。

自动选中body

命令行输入后,Elements面板中会自动选中body.

定位到函数

monitor(function)

观察某个函数被调用的情况:

Paste_Image.png

monitorEvents(object[, events])

观察某个对象发生的事件.如下,观察当前窗口大小变化的事件。

观察事件

可以�同时观察多个事件:

  monitorEvents(window, ["resize", "scroll"]) 

可以和$0-$4结合使用:

monitorEvents($0, "key"); 

注:$0为一个input,观察其键盘事件。

当然也存在着相应的解绑事件,如下:
undebug(function)、unmonitor(function)、unmonitorEvents(object[, events])

getEventListeners(object)

获取object的所有事件listeners.

输出document DOMContentLoaded事件listener源码。

keys(object)、values(object)

查看对象的key、value

table(data[, columns])

将对象数据以表格形式显示,columns为可选的列标题。

详细的文档请参考:Command Line API Reference

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 准入训练 第1章 进入忍者世界 js开发人员通常使用js库来实现通用和可重用的功能。这些库需要简单易用,...
    如201608阅读 5,158评论 1 2
  • 1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined、Nul...
    极乐君阅读 10,989评论 0 106
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 12,385评论 2 17
  • 一本正经的我 做一本正经的事 你好,我是左伊。 .............................. i'...
    左伊Zoe阅读 1,248评论 0 0
  • 累了一整天 晚间到小区的青石板路上 走一走 只有一只蛐蛐的叫声 让我瞬间想起故乡 想大哭一场 只有那只蛐蛐的弹唱 ...
    湖北雪儿阅读 3,008评论 0 2