专栏首页grain先森浏览器调试小技巧

浏览器调试小技巧

选择DOM元素

如果熟悉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元素

将浏览器转换为编辑器

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

document.body.contentEditable=true 

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

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

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

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

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

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

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

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

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

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

监控事件

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

  • monitorEvents($(‘selector’)) 将监视与选择器的元素关联的所有事件,然后在它们被触发时将它们打印到控制台。例如,monitore($(#firstName)) 将打印 IDfirstName元素的所有事件。
  • monitorEvents($(‘selector’),’eventName’) 将打印与元素绑定的特定事件。 你可以将事件名称作为参数传递给函数。 这将仅记录绑定到特定元素的特定事件。 例如,monitorEvents($(‘#firstName’),’click’) 将打印绑定到ID为'firstName'的元素的所有 click 事件。
  • monitore($(selector),[eventName1, eventName3', .])将根据您自己的需求记录多个事件。与其传递单个事件名作为参数,不如传递包含所有事件的字符串数组。例如monitore($(#firstName),[click, focus])将记录与ID firstName元素绑定的 click事件和focus事件。
  • unmonitorevent ($(selector)):这将停止监视和打印控制台中的事件。

检查 DOM 中的一个元素

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

  • inspect($('selector')) 将检查与选择器匹配的元素,并转到 Chrome Developer Tools中的 Elements 选项卡。 例如, inspect($('#firstName')) 将检查 ID为 'firstName' 的元素,spect($('a')[3]) 将检查 DOM 中的第 4 个 a 元素。
  • $0, $1, $2 等可以帮助你获取最近检查过的元素。 例如,$0 表示最后检查的 DOM 元素,而$1 倒数第二个检查的 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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Chrome - JavaScript调试技巧总结(浏览器调试JS)

    Chrome 是 Google 出品的一款非常优秀的浏览器,其内置了开发者工具(Windows 系统中按下 F12 即可开启),可以让我们方便地对 JavaSc...

    小蔚
  • 测试技能之谷歌浏览器调试技巧

    生活学习中我们常用的工具之一就是浏览器,但测试工程师需要知道不仅仅是输入网址,鼠标点击几下那么简单。

    吾非同
  • Chrome 浏览器必知必会的小技巧

    来源:FEWY https://segmentfault.com/a/1190000012143176 说明 这篇文章主要介绍的就是一些chrome浏览器的小技...

    程序员宝库
  • chrome浏览器 必知必会的小技巧

    这篇文章主要介绍的就是一些chrome浏览器的小技巧,很简单,希望对大家有所帮助。 这其中的一些小技巧在低版本中是没有的,所以建议大家用最新版的,目前最新版...

    FEWY
  • 分享高效使用 Chrome 浏览器调试前端代码的技巧

    相信大部分前端同学都是用 Chrome 浏览器进行开发,这篇博客要分享的基本上是除了我们常用 console.log之外的,Chrome 开发者工具控制面板提供...

    夜尽天明
  • JavaScript 调试小技巧

    ‘debugger;’ 除了console.log,debugger就是另一个我很喜欢的快速调试的工具,将debugger加入代码之后,Chrome会自动在插入...

    hbbliyong
  • Android调试小技巧

    当我们想要用attach方式调试某个应用时,如何做到在程序启动时就下断点? 这是一个悖论:你要先启动程序,才能获取pid进行attach,但程序启动到你att...

    用户2930595
  • Android 调试小技巧

    最近在调试公司中的Android项目时,遇到的一些问题,及时做个总结,以免后面再遇到这类问题时再浪费时间。

    音视频_李超
  • 分享一些少为人知但很有用的浏览器调试技巧

    相信大部分前端同学都是用Chrome浏览器进行开发,这篇博客要分享的基本上是除了我们常用console.log之外的,Chrome开发者工具控制面板提供的调试方...

    桃翁

扫码关注云+社区

领取腾讯云代金券