浏览器调试时常用的小技巧

1.软文推荐

2.软文推荐

3.软文推荐

本篇文章重点为大家讲解一下浏览器调试时常用的一些小技巧，有需要的小伙伴可以参考一下。

如果熟悉jQuery，就会知道 $('.class') 和 $('#id') 选择器有多么重要。它们根据与之关联的类或 ID 选择 DOM 元素。但是当你没有引用 jQuery时，你仍然可以在谷歌开发控制台中进行同样的操作。

$('tagName') $('.class') $('#id') and $('.class #id') 等效于 document.querySelector(' ')，这将返回 DOM 中与选择器匹配的第一个元素。

也可以使用 $$(tagName) 或 $$(.class), 注意双元符号，根据特定的选择器选择DOM的所有元素。这也将它们放入数组中，你也可以通过指定数组中该元素的位置来从中选择特定的元素。

例如，$$('.className') 获取具有类 className 的所有元素，而$$('.className')[0]和 $$('.className')[1]获取到分别是第一个和第二个元素。

你有多少次想知道你是否可以在浏览器中编辑一些文本？ 答案是肯定的，你可以将浏览器转换为文本编辑器。 你可以在 DOM 中的任何位置添加文本和从中删除文本。你不再需要检查元素并编辑HTML。相反，进入开发人员控制台并输入以下内容:

document.body.contentEditable=true

这将使内容可编辑。现在，你几乎可以编辑DOM中的任何内容，还在等什么，快去试试吧。

调试时，需要查找 DOM 中某个元素的事件侦听器感时，谷歌控制台用了 getEventListeners使找到这些事件更加容易且直观。

getEventListeners($(‘selector’)) 返回一个对象数组，其中包含绑定到该元素的所有事件。你可以展开对象来查看事件:

查找与DOM中的元素关联的事件

要找到特定事件的侦听器，可以这样做:

getEventListeners($(‘selector’)).eventName[0].listener

这将显示与特定事件关联的侦听器。这里 eventName[0] 是一个数组，它列出了特定事件的所有事件。例如:

getEventListeners($(‘firstName’)).click[0].listener

将显示与 ID 为 'firstName' 的元素的单击事件关联的侦听器。

如果希望在执行绑定到 DOM 中特定元素的事件时监视它们，也可以在控制台中这样做。你可以使用不同的命令来监控其中的一些或所有事件:

你可以直接从控制台检查一个元素:

你可以将控制台用作计算器。当你这样做的时候，你可能需要用第二个来跟踪一个计算。以下是如何从内存中检索先前计算的结果:

$_

过程如下：

2+3+4
9 //- The Answer of the SUM is 9
$_
9 // Gives the last Result
$_ * $_
81  // As the last Result was 9
Math.sqrt($_)
9 // As the last Result was 81
$_
9 // As the Last Result is 9

如果你想清除控制台及其内存，输入如下：

 clear()

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

本文来源：www.lxlinux.net/8531.html，若引用不当，请联系修改。