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方法的别名。

目录
相关文章
|
29天前
|
JSON 缓存 JavaScript
深入浅出:使用Node.js构建RESTful API
在这个数字时代,API已成为软件开发的基石之一。本文旨在引导初学者通过Node.js和Express框架快速搭建一个功能完备的RESTful API。我们将从零开始,逐步深入,不仅涉及代码编写,还包括设计原则、最佳实践及调试技巧。无论你是初探后端开发,还是希望扩展你的技术栈,这篇文章都将是你的理想指南。
|
22天前
|
JSON JavaScript 前端开发
深入浅出Node.js:从零开始构建RESTful API
在数字化时代的浪潮中,后端开发作为连接用户与数据的桥梁,扮演着至关重要的角色。本文将引导您步入Node.js的奇妙世界,通过实践操作,掌握如何使用这一强大的JavaScript运行时环境构建高效、可扩展的RESTful API。我们将一同探索Express框架的使用,学习如何设计API端点,处理数据请求,并实现身份验证机制,最终部署我们的成果到云服务器上。无论您是初学者还是有一定基础的开发者,这篇文章都将为您打开一扇通往后端开发深层知识的大门。
38 12
|
29天前
|
JavaScript NoSQL API
深入浅出Node.js:从零开始构建RESTful API
在数字化时代的浪潮中,后端开发如同一座灯塔,指引着数据的海洋。本文将带你航行在Node.js的海域,探索如何从一张白纸到完成一个功能完备的RESTful API。我们将一起学习如何搭建开发环境、设计API结构、处理数据请求与响应,以及实现数据库交互。准备好了吗?启航吧!
|
1月前
|
JavaScript 前端开发 API
Vue.js 3:探索组合式API带来的新变革
Vue.js 3:探索组合式API带来的新变革
|
1月前
|
JavaScript 前端开发 API
Vue.js 3中的Composition API:提升你的组件开发体验
Vue.js 3中的Composition API:提升你的组件开发体验
|
1月前
|
JavaScript 前端开发 API
Vue.js 3:深入探索组合式API的实践与应用
Vue.js 3:深入探索组合式API的实践与应用
|
1月前
|
JSON JavaScript 前端开发
使用JavaScript和Node.js构建简单的RESTful API
使用JavaScript和Node.js构建简单的RESTful API
|
7月前
|
Java
java实战项目超市管理系统控制台版
java实战项目超市管理系统控制台版
|
7月前
|
Java
【Java开发指南 | 第二十篇】Java流之控制台
【Java开发指南 | 第二十篇】Java流之控制台
67 2
|
7月前
|
XML 监控 Dubbo
Dubbo03【管理控制台和监控中心搭建】,Java开发实用必备的几款插件
Dubbo03【管理控制台和监控中心搭建】,Java开发实用必备的几款插件