js 调试—— 【控制台】debugger语句 、 命令行API

简介: js 调试—— 【控制台】debugger语句 、 命令行API

在控制台中,除了使用console对象,还可以使用debugger语句和控制台自带的命令行方法。

debugger

debugger语句必须与除错工具配合使用,如果没有除错工具,debugger语句不会产生任何结果。

chrome浏览器中,当代码运行到debugger指定的行时,就会暂停运行,自动打开console界面。它的作用类似于设置断点。

for(var i = 0;i<5;i++){
    console.log(i);
    if (i===2) debugger;
}

上面代码打印出0,1,2以后,就会暂停,自动打开console窗口,等待进一步处理。

$_

返回上一个表达式的值

2+2
// 4
$_
// 4

$0- $4

控制台保存了最近5个在Elements面板选中的DOM元素,$0代表倒数第一个,$1代表倒数第二个,以此类推直到$4。

$(selector)

document.querySelectorAll方法的别名,返回一个数组,包括特定的CSS选择器匹配的所有DOM元素。

var images = $('img');
for (each in images) {
    console.log(images[each].src);
}

打印出网页中所有img元素的src属性。

$$(selector)

返回一个选中的DOM对象,等同于document.querySelectorAll。

$x(path)

返回一个数组,包含匹配特定XPath表达式的所有DOM元素。

$x("//p[a]")

返回所有包含a元素的p元素。

inspect(object)

打开相关面板,并选中相应的元素:DOM元素在Elements面板中显示,JavaScript对象在Profiles中显示。

getEventListeners(object)

返回一个对象,该对象的成员为登记了回调函数的各种事件(比如click或keydown),每个事件对应一个数组,数组的成员为该事件的回调函数。

keys(object)

返回一个数组,包含特定对象的所有键名。

values(object)

返回一个数组,包含特定对象的所有键值。

var o = {'p1':'a', 'p2':'b'};

keys(o)
// ["p1", "p2"]
values(o)
// ["a", "b"]

monitorEvents(object[, events])

监听特定对象上发生的特定事件。当这种情况发生时,会返回一个Event对象,包含该事件的相关信息。

monitorEvents(window, "resize");

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

单个事件和多个事件的监听

事件分为四大类:

  • mouse:”mousedown”, “mouseup”, “click”, “dblclick”, “mousemove”, “mouseover”, “mouseout”, “mousewheel”
  • key:”keydown”, “keyup”, “keypress”, “textInput”
  • touch:”touchstart”, “touchmove”, “touchend”, “touchcancel”
  • control:”resize”, “scroll”, “zoom”, “focus”, “blur”, “select”, “change”, “submit”, “reset”

monitorEvents允许监听同一大类的事件。

monitorEvents($("#msg"), "key");

监听所有key大类的事件。

unmonitorEvents(object[, events])

停止监听

monitorEvents($0, "mouse");
unmonitorEvents($0, "mousemove");

profile([name]),profileEnd()

profile方法用于启动一个特定名称的CPU性能测试,profileEnd方法用于结束该性能测试。

profile("My profile")

profileEnd("My profile")

clear()

清除控制台的历史

copy(object)

复制特定DOM元素到剪贴板。

dir(object)

显示特定对象的所有属性,是console.dir方法的别名。

dirxml(object)

显示特定对象的XML形式,是console.dirxml方法的别名。

目录
相关文章
|
1天前
|
JavaScript API 索引
JS【详解】Set 集合 (含 Set 集合和 Array 数组的区别,Set 的 API,Set 与 Array 的性能对比,Set 的应用场景)
JS【详解】Set 集合 (含 Set 集合和 Array 数组的区别,Set 的 API,Set 与 Array 的性能对比,Set 的应用场景)
6 0
|
1天前
|
JSON JavaScript API
JS【详解】Map (含Map 和 Object 的区别,Map 的常用 API,Map与Object 的性能对比,Map 的应用场景和不适合的使用场景)
JS【详解】Map (含Map 和 Object 的区别,Map 的常用 API,Map与Object 的性能对比,Map 的应用场景和不适合的使用场景)
6 0
|
3天前
|
JavaScript API
前后端数据交互.js文件的axios的写法,想要往后端发送数据,页面注入API,await的意思是同步等待服务器数据,并返回,axios注入在其他页面,其他页面调用的时候,同步作用
前后端数据交互.js文件的axios的写法,想要往后端发送数据,页面注入API,await的意思是同步等待服务器数据,并返回,axios注入在其他页面,其他页面调用的时候,同步作用
|
3天前
|
JavaScript
js 调试 —— 断点(含进入函数、条件断点等)
js 调试 —— 断点(含进入函数、条件断点等)
9 0
|
4天前
|
JavaScript 前端开发 测试技术
js 控制台调试——console 对象【详解】
js 控制台调试——console 对象【详解】
9 0
|
2月前
|
Java
java实战项目超市管理系统控制台版
java实战项目超市管理系统控制台版
|
2月前
|
Java
【Java开发指南 | 第二十篇】Java流之控制台
【Java开发指南 | 第二十篇】Java流之控制台
24 2
|
2月前
|
XML 监控 Dubbo
Dubbo03【管理控制台和监控中心搭建】,Java开发实用必备的几款插件
Dubbo03【管理控制台和监控中心搭建】,Java开发实用必备的几款插件
|
2月前
|
存储 Java 关系型数据库
景区特色商品管理系统【控制台+MySQL】(Java课设)
景区特色商品管理系统【控制台+MySQL】(Java课设)
30 1
|
2月前
|
存储 Java 关系型数据库
银行储蓄管理系统【控制台+MySQL】(Java课设)
银行储蓄管理系统【控制台+MySQL】(Java课设)
28 1