专栏首页较真的前端Chrome开发者工具还有这些功能,你知道吗?

Chrome开发者工具还有这些功能,你知道吗?

前言

原文是来自于freeCodeCamp网站的一篇博客

原文链接:https://medium.freecodecamp.org/10-tips-to-maximize-your-javascript-debugging-experience-b69a75859329

原文作者:Swagat Kumar Swain

Chrome开发者工具的功能十分强大,其中包括了元素调试、网络监控、安全检查功能。本篇文章要重点讲的是JavaScript控制

我最早写代码的时候,也就是在JS控制台里输出一些服务器返回的内容,或者一些变量的值。但是后来通过一些深入的学习和了解,我发现Chrome的JS控制台原来还有这么多神奇的功能。

选取DOM元素

如果你使用过jQuery的话,一定对$('.className') 或者 $('#id') 这种选择器不会陌生。但其实jQuery的选择器和原生JS的document.querySelector('')的使用方法是一样的。

在Chrome控制台里,你可以通过两个$符号来替代jQuery和querySelector两个方法,它的语法和上面两位是一样的的。

一秒钟让Chrome变成所见即所得的编辑器

你可能经常会困惑你到底能不能直接在浏览器里更改网页的文本内容。答案是肯定的,你可以只通过一行简单的指令把Chrome变成所见即所得的编辑器,直接在网页上随心所欲地删改文字。

你所要做的只是在控制台上输入一行代码即可:

代码生效后,你可以像下面一样编辑网页

获取某个DOM元素绑定的事件

在调试的时候,你肯定需要知道某个元素上面绑定了什么触发事件。Chrome的开发者控制台可以让你很轻松地找到它们。

getEventListeners($('selector')) 方法以数组对象的格式返回某个元素绑定的所有事件。你可以在控制台里展开对象查看详细的内容。

如果你想选中其中的某个时间,可以通过下面的方法来访问:

这里的eventName表示某种事件类型,例如:

监测事件

当你需要监视某个DOM触发的事件时,也可以用到控制台。例如下面这些方法:

●monitorEvents($('selector')) 会监测某个元素上绑定的所有事件,一旦该元素的某个事件被触发就会在控制台里显示出来。

●monitorEvents($('selector'),'eventName') 可以监听某个元素上绑定的具体事件。第二个参数代表事件类型的名称。例如 monitorEvents($('#firstName'),'click') 只监测ID为firstName的元素上的click事件。

●monitorEvents($('selector'),

['eventName1','eventName3',….]) 同上。可以同时检测具体指定的多个事件类型。

●unmonitorEvents($('selector')) 用来停止对某个元素的事件监测。

用计时器来获取某段代码块的运行时间

通过 console.time('labelName') 来设定一个计时器,其中的 labelName 是计时器的名称。

通过console.timeEnd('labelName') 方法来停止并输出某个计时器的时间。例如:

控制台输出了testTime代码块的运行消耗时间。

以表格的形式输出数组

假设我们这样的一个数组:

要是你直接在控制台里输入数组的名称,Chrome会以文本的形式返回一个数组对象。但你完全可以通过console.table(variableName) 方法来以表格的形式输出每个元素的值。例如下图:

通过控制台方法来检查元素

你可以直接在控制台里输入下面的方法来检查元素

inspect($('selector')) 会检查所有匹配选择器的DOM元素,并返回所有选择器选择的DOM对象。例如inspect($('#firstName')) 选择所有ID是 firstName 的元素,inspect($('a')[3]) 检查并返回页面上第四个 p元素。

●$0, $1, $2等等会返回你最近检查过的几个元素,例如 $0 会返回你最后检查的元素,$1 则返回倒数第二个。

列出某个元素的所有属性

你也可以通过控制台列出某个元素的所有属性:

dir($('selector')) 会返回匹配选择器的DOM元素的所有属性,你可以展开输出的结果查看详细内容

检索到最后一个结果的值

Chrome的控制台通过全局变量——$_ 来缓存最后一次计算结果的值

看下面的例子:

清空控制台输出

当你想清空控制台中所有内容时,你只需要执行clear()方法即可

Chrome开发者工具的功能非常强大,本篇文章只是揭露了冰山一角,希望能够帮助开拓你的事业。

如果你觉得这篇文章有用的话,请你转发给其他有可能需要的人。

较真的前端

前端技术分享交流。

最新前端笔试题。

前端开发工作职位发布。

本文分享自微信公众号 - 较真的前端(gh_7af41a2be77e),作者:英俊潇洒你冲哥

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-08-18

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [译] 调试 RxJS 第1部分: 工具篇

    用户1687375
  • HTML 5.2 新特性

    用户1687375
  • Webpack 5有哪些值得期待▶️

    早在今年(2019年)的2月份,Webpack核心团队的Sean Larkin就做过一次关于webpack 5新特性的演讲,为大家讲述了webpack 5目前的...

    用户1687375
  • 产品动态 | 腾讯云NLP 1月最新动态

    腾讯云自然语言处理(Natural Language Process,NLP)深度整合了腾讯内部顶级的 NLP 技术,依托千亿级中文语料累积,提供16项智能文本...

    庞九公子
  • 回归制造本质——边缘计算使能全局效率提升

    边缘计算越来越受到了来自IT和OT领域的企业的关注,本文旨在从制造本质—从源头分析如何去推进其实现。

    CloudBest
  • 福特与Postmates和沃尔玛合作,在迈阿密地区提供自动杂货配送服务

    自动驾驶杂货配送是一个新的热门趋势。今年夏天,Nuro与杂货巨头Kroger联手在美国推出自动驾驶杂货配送,不久之后,创业公司Robomart宣布计划测试自动驾...

    AiTechYun
  • 亚太城市峰会及市长论坛:腾讯向世界展示“智慧城市”的现在与未来

    ?   未来的智慧城市将是一幅怎样的蓝图?第10届亚太城市峰会及市长论坛于7月5日至8日,在澳大利亚布里斯班举行。腾讯公司作为被唯一邀请的中国互联网企业,与来...

    腾讯研究院
  • 性能优化

    河湾欢儿
  • 腾讯副总裁王巨宏:互联网+赋能产学融合人才培养新模态

    10月26日,以“融通•变革”为主题的2016年中国高等教育创新大会在北京国家会议中心举办。此次大会汇集了包括清华大学、四川大学、西安交通大学、北京航空航天大学...

    腾讯高校合作
  • 如果您有全职工作,如何为Kubernetes做贡献

    当我在IBM产品安全事件响应团队工作时,我于2018年10月开始为Kubernetes(K8s)做出贡献。我被分布式系统所吸引,但在日常工作中无法与它们合作,因...

    Hyman.W

扫码关注云+社区

领取腾讯云代金券