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月前
|
XML JavaScript 前端开发
JavaScript控制台:提升Web开发技能的秘密武器
作为Web开发人员,掌握JavaScript控制台中的各种方法至关重要。本文介绍了22种实用的console方法,从基本的log()到高级的profile()和memory,每种方法都配有示例和说明,帮助开发者更高效地调试和记录信息。通过了解这些工具,您可以优化代码、提高开发速度,减少错误,使编码过程更加顺畅愉快。
37 1
JavaScript控制台:提升Web开发技能的秘密武器
|
1月前
|
JavaScript 前端开发 开发者
JavaScript 浏览器控制台的使用
JavaScript 浏览器控制台的使用
19 0
|
3月前
|
API Docker 容器
jumpserver API调试
jumpserver API调试
|
3月前
|
JavaScript 前端开发 开发者
Chrom devtools JS调试、性能优化与必备功能
Chrom devtools JS调试、性能优化与必备功能
|
2月前
|
Web App开发 JavaScript 前端开发
JavaScript 调试
JavaScript 调试
17 0
|
3月前
|
存储 JSON 监控
JavaScript 逆向基础篇:浏览器调试与 Hook 技术
JavaScript 逆向基础篇:浏览器调试与 Hook 技术
287 1
|
2月前
|
Web App开发 JavaScript 前端开发
JavaScript基础知识-使用Firefox进行代码的调试(Debug)
关于如何使用Firefox浏览器进行JavaScript代码调试的基础知识介绍。
84 0
|
3月前
|
JavaScript 开发者 UED
Vue.js 错误处理与调试:跟上技术潮流,摆脱开发困扰,成为代码大神不是梦!
【8月更文挑战第30天】在 Vue.js 开发中,错误处理与调试至关重要。本文将对比 Vue 的全局错误捕获机制 `Vue.config.errorHandler` 和组件内 `watch` 监听数据变化的方式,并介绍 Vue 开发者工具、控制台打印 (`console.log`) 以及代码断点 (`debugger`) 等调试方法。此外,还将探讨如何通过自定义错误页面提升用户体验。通过这些技巧的对比,帮助开发者灵活选择适合的策略,确保应用稳定性和开发效率。
52 0
|
3月前
|
JavaScript 前端开发 C++
【Azure Function】调试 VS Code Javascript Function本地不能运行,报错 Value cannot be null. (Parameter 'provider')问题
【Azure Function】调试 VS Code Javascript Function本地不能运行,报错 Value cannot be null. (Parameter 'provider')问题
|
3月前
|
存储 API
【Azure API 管理】为调用APIM的请求启用Trace -- 调试APIM Policy的利器
【Azure API 管理】为调用APIM的请求启用Trace -- 调试APIM Policy的利器