比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


文/杜文(简书作者)
原文链接:http://www.jianshu.com/p/a894f7f8d27d
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: `console.log` 是一种在 JavaScript 中输出信息到控制台的方法。它可以用于调试代码和输出各种类型的信息,包括字符串、数字、布尔值、对象、数组等。当您在代码中调用 `console.log` 时,它会在浏览器或 Node.js 的控制台中打印出您指定的信息。 例如,在 JavaScript 中,您可以使用以下代码将一条消息打印到控制台中: ``` console.log("Hello World!"); ``` 这将在控制台中输出字符串 "Hello World!"。您还可以将其他类型的值传递给 `console.log`,例如: ``` console.log(42); // 输出数字 42 console.log(true); // 输出布尔值 true console.log({name: "John", age: 30}); // 输出一个对象 console.log([1, 2, 3]); // 输出一个数组 ``` `console.log` 是一种非常有用的调试工具,可以帮助您诊断和解决 JavaScript 中的问题。 ### 回答2: console.log() 是JavaScript中用于向控制台输出信息的内置函数。它可以用于在浏览器控制台或Node.js中打印出我们想要的任何信息。这个函数的主要作用是用于调试代码和查看程序的运行结果。 console.log()函数有很多用法。它可以接受一个或多个参数,这些参数可以是字符串、数值、对象、数组等。例如,我们可以使用console.log("Hello, World!")来在控制台打印出"Hello, World!"这个字符串。 console.log()还可以接受变量作为参数,从而输出该变量的值。通过这种方式,我们可以检查程序中某个变量的取值,以帮助我们调试代码。例如,如果我们想要查看一个变量num的值,我们可以使用console.log(num)来输出该变量的值。 此外,console.log()函数还可以通过格式化字符串的方式输出信息。我们可以使用占位符,例如%s代表字符串、%d代表整数、%f代表浮点数等。通过这种方式,我们可以加灵活地输出信息,并且能够在同一行中同时输出多个变量的值。 总而言之,console.log()是一个非常实用的函数,它在开发过程中起着重要的作用。它可以用于查看变量的值、调试程序、输出调试信息等。了解如何使用console.log()函数可以帮助我们好地理解和调试代码,提高开发效率。 ### 回答3: console.log是一个在JavaScript中常用的方法,用于在控制台打印输出信息。它可以用于调试代码,查看变量的值或输出自定义的消息。 console.log的作用很简单,当我们希望在浏览器的开发者工具控制台中输出一些信息时,就可以使用它。使用方法也非常简单,只需在代码中调用console.log()方法,并将要输出的信息作为参数传入即可。 console.log的输出结果包含在控制台中,可以显示在不同的标签页和面板上。我们可以在Chrome浏览器的控制台中看到这些输出,也可以在其他浏览器或集成开发环境中使用。 除了输出简单的消息外,console.log还可以输出复杂的数据类型,如对象和数组。它会将这些数据以易读的方式展示出来,方便我们查看和调试。同时,它还支持格式化输出,可以使用占位符来将变量的值插入到输出消息中。 使用console.log能够提高代码的可读性和调试效率。通过在关键位置插入console.log语句,我们可以查看变量在特定时刻的值,从而找出代码中的问题和错误。在调试过程中,我们可以根据输出结果逐步分析和修复代码,提高开发效率。 总之,console.log是JavaScript开发中非常实用的方法,它能够帮助我们输出和查看调试信息,提高代码的质量和效率。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值