Code For Better 谷歌开发者之声——使用谷歌浏览器 Chrome 更好地调试_chrome控制台如何修改indexdb的数据(3)

最新推荐文章于 2024-06-26 17:12:42 发布

2401_85011960

最新推荐文章于 2024-06-26 17:12:42 发布

阅读量252

点赞数 5

分类专栏： 2024年程序员学习文章标签：物联网嵌入式硬件面试

本文链接：https://blog.csdn.net/2401_85011960/article/details/138981668

版权

2024年程序员学习专栏收录该内容

27 篇文章 0 订阅

订阅专栏

收集整理了一份《2024年最新物联网嵌入式全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升的朋友。

如果你需要这些资料，可以戳这里获取

需要这些体系化资料的朋友，可以加我V获取：vip1024c （备注嵌入式）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

当指定对象上发生任何指定事件时，Event 对象将被记录到控制台。要监视的事件可以是特定事件、事件数组或映射到预定义集合的通用事件“类型”。

此函数接收应监控的对象和特定事件，即monitorEvents(object [, events]). 例如，要监视窗口对象的任何调整大小事件：

monitorEvents(window, "resize");

输出：

在这里插入图片描述
你可以选择性地停止监视对象 ie 上的特定事件unmonitorEvents(object[, events])，或对象 ie 上的所有事件unmonitorEvents(window)。

要了解有关此功能的更多信息，请访问文档。

table() - 将数组输出为表

从数据库或外部 API 获取数据时，它通常以对象数组的形式出现。想象一下，你正试图在你的 chrome 控制台中预览或读取此返回的数据，以找出在你的应用程序中不起作用的内容。该console.log()函数通常将其显示为难以阅读或分类的文本输出。

你显然希望以更易于阅读的有条理的方式查看所有项目、属性及其相关属性。你可以在 chrome 控制台中使用table()函数即 table(data) 来完成此操作。这种方法以更人性化、更易于阅读和理解的表格格式打印和组织信息。

例如：

const users = [  

    { first: "zhang", last: "san"},  

    { first: "li", last: "si", birthday: "19990919" },

    { first: "wang", last: "wu",},

];

table(users);

在这里插入图片描述
注意：使用可以实现类似的结果console.table()。

getEventListeners() - 获取事件监听器

使用作为参数传递给它的 DOM 对象调用 getEventListener 函数会返回在该特定对象上注册的所有事件。返回的值是一个对象，其中包含每个注册的事件类型（如点击、按键等）的数组。每个成员数组都包含该事件类型的所有事件，并且可以扩展以探索它们各自的属性，例如它们触发的关联函数。

在这里插入图片描述

debug() - 调试函数

为了修复不符合预期的页面、功能或组件，你通常会添加一个“调试器”；声明函数声明以激活调试器并尝试了解它有什么问题。

但是，这需要你手动进入源代码以添加这些调试器语句。Chrome 允许你直接从控制台执行此操作，而无需使用 debug() 函数访问你的源代码。只需在控制台中调用它并将函数的名称传递给它，它就会自动将调试器注入到函数中，让你可以单步调试代码。

在这里插入图片描述
在控制台中调用debug(functionReference)会增加一个调试器；引用函数声明的第一行上的语句。

DevTools 还提供断点，让你逐行执行代码。你可以通过单击“源”面板中的行号来添加它们。左键单击会自动添加断点，而右键单击数字可以设置条件断点，这对于调试循环非常有用。

在这里插入图片描述
要禁用函数中的所有断点，请使用undebug(functionReference)或使用源面板。

调试期间重启帧

借助 Chrome 新添加的 DevTools Restart Frame 功能，你可以在调试函数时遇到断点后重新运行前面的代码。这意味着你可以在函数中某处暂停后立即重新运行前面的代码。

因此，你可以在当前调用堆栈中穿越时间（尽管在有限的范围内）。

在这里插入图片描述

注意：当你使用 Restart Frame Chrome 时，状态不会恢复。执行指针简单地移动到函数的顶部。

在 DOM 元素上添加断点（属性/模板更改）

有时你可能需要在有条件或动态更改的 DOM 元素上放置断点或调试器。

你可以通过右键单击目标 DOM 元素并选择“中断”->“属性修改”来轻松修改 DOM 元素。此外，你还可以尝试其他一些选项。

在这里插入图片描述

代码片段

在调试时，你可能经常需要一遍又一遍地执行同一行代码，直到你完成故障排除。但是，这会导致你进行大量重复输入或不断地从你最喜欢的代码编辑器复制并粘贴到你的 Chrome 浏览器控制台。

Google Chrome DevTools 有一个代码片段功能，允许你保存代码片段，以便在需要时使用。片段是一段 JavaScript 源代码，你可以保存并重复使用以进行调试。创建的代码片段可以在任何时候在任何网站上的每个调试会话中通过单击按钮来执行，因为它会永久保存，直到手动删除。这可以节省你在每个页面测试中输入重复信息的时间。

在 Chrome 中创建代码片段：

1.打开 DevTools 窗口并单击选项卡面板中的“Sources”。
2.单击>>符号，选择“snippets”，然后选择 New snippet。
3.给它一个名字并写下你的代码片段。
4.保存文件。
5.现在，你可以通过右键单击片段文件名并选择“运行”在任何网页上执行代码。

console.log('Hello,嘎嘎');
document.body.innerHTML = '';
var p = document.createElement('p');
p.textContent= 'Hello,嘎嘎';
document.body.appendChild(p);

在这里插入图片描述

结论

毫无疑问，Chrome DevTools 是对开发者工具箱的极好补充。在这篇文章中，我们研究了如何通过使用 Google Chrome 的 DevTools 直接在浏览器中进行调试来提高调试技能。希望这将使你能够更高效地对 Web 应用程序和组件进行故障排除。

尽管如此，这只是 Google Chrome 的 DevTools 中提供的众多功能的一小部分。你还使用哪些其他工具和技巧？可以在下面的评论区告诉我。

⭐️ 好书推荐

收集整理了一份《2024年最新物联网嵌入式全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升的朋友。

如果你需要这些资料，可以戳这里获取

需要这些体系化资料的朋友，可以加我V获取：vip1024c （备注嵌入式）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

et/topics/618679757)**

需要这些体系化资料的朋友，可以加我V获取：vip1024c （备注嵌入式）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

2401_85011960

关注

5
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
Code For Better 谷歌开发者之声——使用谷歌浏览器 Chrome 更好地调试_chrome控制台如何修改indexdb的数据(3)

当指定对象上发生任何指定事件时，Event 对象将被记录到控制台。要监视的事件可以是特定事件、事件数组或映射到预定义集合的通用事件“类型”。此函数接收应监控的对象和特定事件，即输出：你可以选择性地停止监视对象 ie 上的特定事件，或对象 ie 上的所有事件。要了解有关此功能的更多信息，请访问。
复制链接

扫一扫