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

目录
相关文章
|
10月前
|
JSON 安全 Java
什么是用于REST API的JWT Bearer令牌以及如何通过代码和工具进行调试
在Web开发中,保护REST API至关重要,而JSON Web令牌(JWT)特别是JWT Bearer令牌,是一种高效方法。它通过紧凑、自包含的结构实现安全信息交换,提升用户体验。本文探讨JWT Bearer的基本概念、结构与实现,包括在Java中的应用步骤,以及使用Apipost和cURL进行测试的方法。JWT优势明显:无状态、互操作性强,适用于分布式系统。掌握JWT Bearer,可助开发者构建更安全、高效的API解决方案。
|
10月前
|
安全 Java API
什么是用于 REST API 的 Bearer Token以及如何通过代码和工具进行调试
Bearer Token 是一种基于 OAuth 2.0 的身份验证机制,广泛应用于 REST API 的授权访问中。它通过在 HTTP 请求头中传递令牌,确保用户凭据安全传输并验证。本文深入解析了 Bearer Token 的概念、实现步骤及调试方法,包括其无状态特性、灵活性与安全性优势。同时,提供了 Java 实现示例和使用 Apipost、cURL 等工具测试的实践指导,帮助开发者掌握这一核心技能,保障 API 系统的安全与高效运行。
|
12月前
|
人工智能 JSON 自然语言处理
AI 程序员的4个分身 | 代码生成专家+注释精灵+API集成助手+智能调试伙伴
AI 程序员的4个分身 | 代码生成专家+注释精灵+API集成助手+智能调试伙伴
502 35
|
11月前
|
安全 API Go
如何实现和调试REST API中的摘要认证(Digest Authentication)
本文介绍如何实现和调试REST API中的摘要认证(Digest Authentication),涵盖其原理、优势及Java和Go语言的实现示例。摘要认证通过哈希算法处理密码,避免明文传输风险,并使用nonce防止重放攻击,确保数据完整性。文中还提供了Postman、cURL和Insomnia等工具的测试方法,帮助开发者轻松验证API的安全性。总结指出,摘要认证相比基本认证更安全,适合需要高安全性的API应用。
|
11月前
|
数据可视化 测试技术 API
前后端分离开发:如何高效调试API?有工具 vs 无工具全解析
在前后端分离的开发模式中,API 调试的效率直接影响项目的质量和交付速度。通过本文的对比分析,我们可以看到无工具调试模式虽具备灵活性和代码复用能力,但在操作便利性和团队协作上稍显不足。而传统的外部调试工具带来了可视化、高效协作与扩展性,却可能存在工具切换带来的开发链路断层问题。Apipost-Hepler 融合了两者的优势,让开发者无需离开熟悉的 IDEA 环境,就能享受可视化调试工具的强大功能。
384 5
|
12月前
|
前端开发 程序员 API
(1)深度对比:Apipost vs Apifox (1):产品背景及API简单调试
API调试工具是每个开发者不可或缺的帮手。国外的Postman功能强大但不够“中国特色”,收费也让人望而却步。国内的Apipost和Apifox应运而生,旨在解决本地化需求。 Apipost由一位不满Postman的开发者亲手打造,界面直观、操作流畅,支持离线使用,特别适合需要频繁离线操作的场景。Apifox则致力于整合接口生命周期的各个流程,提供一体化解决方案,初次上手稍显复杂,但功能全面且潜力巨大。 两者各有千秋:Apipost更适合快速上手和离线使用,Apifox则在团队管理和功能整合方面表现突出。选择哪款工具,取决于你的具体需求和使用习惯。
|
11月前
|
人工智能 测试技术 API
Ollama本地模型部署+API接口调试超详细指南
本文介绍了如何使用Ollama工具下载并部署AI大模型(如DeepSeek-R1、Llama 3.2等)。首先,访问Ollama的官方GitHub页面下载适合系统的版本并安装。接着,在终端输入`ollama`命令验证安装是否成功。然后,通过命令如`ollama run Llama3.2`下载所需的AI模型。下载完成后,可以在控制台与AI模型进行对话,或通过快捷键`control+d`结束会话。为了更方便地与AI互动,可以安装GUI或Web界面。此外,Ollama还提供了API接口,默认支持API调用,用户可以通过Apifox等工具调试这些API。
|
XML JavaScript 前端开发
JavaScript控制台:提升Web开发技能的秘密武器
作为Web开发人员,掌握JavaScript控制台中的各种方法至关重要。本文介绍了22种实用的console方法,从基本的log()到高级的profile()和memory,每种方法都配有示例和说明,帮助开发者更高效地调试和记录信息。通过了解这些工具,您可以优化代码、提高开发速度,减少错误,使编码过程更加顺畅愉快。
221 1
JavaScript控制台:提升Web开发技能的秘密武器
|
数据采集 JavaScript 前端开发
JavaScript逆向爬虫——无限debugger的原理与绕过
JavaScript逆向爬虫——无限debugger的原理与绕过
1428 2
|
JavaScript Java
Java 控制台VUE.JS的使用
Java 控制台VUE.JS的使用
80 0

热门文章

最新文章