Chrome 有内置的开发者工具。它拥有丰富的特性,比如元素(Elements)、网络(Network)和安全(Security)。今天,我们主要关注一下 JavaScript 控制台。

当我最初写代码时,我只会使用JavaScript控制台来打印服务器返回值或变量值。但随着时间推移和教程的帮助,我发现这个控制台能做的事远远超乎我的想象。

接下来我们说说你可以通过控制台做到的事情。如果你在电脑的 Chrome 浏览器(或其他浏览器)中阅读这篇文章,你可以立刻打开开发者工具并尝试。


1. 选取DOM元素

如果你对 jQuery 很熟悉,你应该知道 $(‘.class’) 和 $(‘#id’) 选择器的重要性。他们通过元素关联的 class 或 id 来选取元素。

但当你在 DOM 中无法使用 jQuery 时,你依然可以在开发者控制台中做同样的事情。

$(‘tagName’) 、$(‘.class’) 、$(‘#id’) 和 $(‘.class #id’) 相当于 document.querySelector(‘ ‘)。它返回选择器在 DOM 中匹配到的第一个元素。

你可以使用 $$(‘tagName’) 或 $$(‘.class’) 构建特殊的选择器来选取 DOM 中所有匹配的元素(注意是两个 $ 符号)。这会把结果放入一个数组。你可以继续通过下标在数组中获取到特定的某个元素。

举个例子,$$(‘.className’) 将给你返回所有 class 为 className 的元素,$$(‘.className’)[0] 和 $$(‘.className’)[1] 分别给你返回第一个和第二个元素。

2. 将你的浏览器变成编辑器

曾经多次幻想是否在浏览器里面就可以编辑文本?答案是可以的,你可以把你的浏览器变成编辑器。你可以在 DOM 中任意添加或移除文本。

你不再需要检查元素和编辑 HTML。相反,打开开发者控制台输入下面内容:

document.body.contentEditable=true

这将使内容变为可编辑状态。你可以编辑 DOM 里的任何东西。

3. 查找DOM中元素关联的事件

当调试时,你肯定对 DOM 中约束元素的事件监听器感兴趣。开发者控制台让你更容易找到它们。

你可以做以下事情来找到特定事件的监听器:

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

这将展示与特定事件相关联的监听器。eventName[0] 是一个包含所有特定事件的数组。比如:

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

它会展示 ID 为「firstName」元素的点击事件所关联的监听器。

4. 监控事件

如果你想在 DOM 中特定元素绑定的事件执行时监控它们,你可以通过控制台中完成。你可以使用很多不同的命令来监控部分或全部事件:

  • monitorEvents($(‘selector’)) 能够监控你所选取元素所关联的所有事件,当事件触发时,在控制台打印它们。比如 monitorEvents($(‘#firstName’)) 会打印 ID 为「firstName」的元素绑定的所有事件。

  • monitorEvents($(‘selector’),’eventName’) 将打印元素绑定的特定事件。你可以将事件名字作为参数传入函数。它将打印特定元素绑定的特定事件。比如,monitorEvents($(‘#firstName’),’click’) 会打印 ID 为「firstName」的元素绑定的点击事件。

  • monitorEvents($(‘selector’),[‘eventName1′,’eventName3’,…]) 会根据你的要求打印多个事件。传递参数包含所有事件的字符串数组,而不是单个事件名字。比如,monitorEvents($(‘#firstName’),[‘click’,’focus’]) 会打印 ID 为「firstName」的元素绑定的点击事件和焦点事件。

  • unmonitorEvents($(‘selector’)) :这个会停止监视和在控制台打印事件。

5. 查询代码块执行时间

JavaScript 控制台有一个名为 console.time(‘labelName’) 的重要函数,它接收一个标记名作为参数,然后开启计时器。另一个重要函数是 console.timeEnd(‘labelName’) ,它也接收一个标记名作为参数,然后结束特定标记名所关联的计时器。 举个例子:

console.time('myTime'); //Starts the timer with label - myTime
console.timeEnd('myTime'); //Ends the timer with Label - myTime
 
//Output: myTime:123.00 ms

上面两行代码给我们展示了计时器开始和结束的间隔时间。

我们可以改进它来计算代码块的执行时间。

举个例子,如果我想知道一个循环的执行时间。我可以这样做:

console.time('myTime'); //Starts the timer with label - myTime
 
for(var i=0; i < 100000; i++){
  2+4+5;
}
 
console.timeEnd('mytime'); //Ends the timer with Label - myTime
 
//Output - myTime:12345.00 ms

6. 将变量里的值排列成表格

比如我们有一个下面这样的对象数组:

ar myArray=[{a:1,b:2,c:3},{a:1,b:2,c:3,d:4},{k:11,f:22},{a:1,b:2,c:3}]

当我们在控制台输入变量名时,它给我们返回的格式是对象数组。这很有用。你可以展开对象查看属性值。

但当属性增加时,这变得难于理解。因此,要想清楚地表现变量,我们可以把它展示成表格。

console.table(variableName) 把变量和它的所有属性展现城表格结构。如下所示:

7. 检查DOM中的元素

你可以直接在控制台中检查元素:

  • inspect($(‘selector’)) 会检查与选择器匹配的元素,并切换 Chrome 开发者工具到元素标签页。举个例子,inspect($(‘#firstName’)) 检查 ID 为「firstName」的元素,inspect($(‘a’)[3]) 检查 DOM 中第 4 个锚点元素。

  • $0、$1、$2 等等能帮助你取到最近检查的元素。比如,$0 给你返回上次检查的 DOM 元素,$1 返回上上次检查的 DOM 元素。

8. 列举元素的属性

你可以在控制台中做以下事情来列举一个元素的所有属性。

dir($(‘selector’)) 返回一个对象和与其 DOM 元素关联的所有属性。你可以展开它查看细节。

9. 检索最近一个结果的值

你可以把控制台当做计算器。一旦你这么做,你可能需要在计算中使用上一次的计算结果。下面是如何从内存中取到上一次计算的结果。

 $_

就像下面这样:

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

10. 清空控制台和内存

如果你想清空控制台和内存,只需要输入:

clear()

然后敲回车键。就是酱紫。

这是使用 Chrome JavaScript 控制台的几个例子。我希望这些小贴士能让你的生活更美好。

Chrome 开发者控制台中,你可能意想不到的功能的更多相关文章

  1. Chrome开发者控制台的这些功能你都知道吗?

    Chrome内置了一些开发者工具,这些工具提供了很多的功能.今天,我们将会专注于JavaScript控制台. 在我编程的过程中,这个控制台为我提供了大量的帮助. 如果你正在电脑端阅读这篇文章,你可以在 ...

  2. 使用 Chrome 开发者工具进行 JavaScript 问题定位与调试

    转自:https://www.ibm.com/developerworks/cn/web/1410_wangcy_chromejs/ 引言 Google Chrome 是由 Goole 公司开发的一款 ...

  3. Chrome 开发者控制台使用技巧

    Chrome 有内置的开发者工具.它拥有丰富的特性,比如元素(Elements).网络(Network)和安全(Security).今天,我们主要关注一下 JavaScript 控制台. 当我最初写代 ...

  4. 转:在控制台中调试AngularJS应用

    在控制台中调试AngularJS应用 在创建AngularJS应用时,一个很棘手的问题是如何在Chrome,Firefox,以及IE的JavaScript控制台中访问深藏在应用中的数据和服务.本文将会 ...

  5. Chrome开发者工具中Elements(元素)断点的用途

    SAP Engagement Center UI的这个按钮会每秒钟刷新一次,显示页面已经打开了多长时间. 需求:需要找到哪行JavaScript代码不断刷新的按钮文字. 按照经验判断,这个文字肯定是一 ...

  6. (转)Chrome开发者工具不完全指南(一、基础功能篇)

    本篇转载自卖烧烤夫斯基,并做了小部分的修改. 原文地址:Chrome开发者工具不完全指南(一.基础功能篇) 原作者:卖烧烤夫斯基 就算你不是一名前端开发工程师,相信你也不会对Chrome浏览器感到陌生 ...

  7. 【转载】chrome控制台中看见的cookie属性详解

    在chrome控制台中的resources选项卡中可以看到cookie的信息. 一个域名下面可能存在着很多个cookie对象. name字段为一个cookie的名称. value字段为一个cookie ...

  8. 利用Chrome开发者工具功能进行网页整页截图的方法

    第一步:打开chrome开发者工具. 打开你想截图的网页,然后按下 F12(macOS 是 option + command + i)调出开发者工具,接着按「Ctrl + Shift + P」(mac ...

  9. 前端调试效率低?试试这10个“Chrome开发者工具”使用技巧

    摘要:今天给大家分享一些使用“Chrome开发者工具”的小技巧.包括调试,优化页面渲染速度等.希望能提升Web开发人员的工作效率. 今天给大家分享一些使用“Chrome开发者工具”的小技巧.包括调试, ...

随机推荐

  1. 044 SimpleDateFormat的线程安全问题与解决方案

    这个问题,以前好像写过,不过现在这篇文章,有一个重现的过程,还是值得读一读的. URL:SimpleDateFormat的线程安全问题与解决方案

  2. web服务-1、http协议的三次握手四次挥手

    知识点:http协议:它是基于tcp协议的,浏览器访问服务器,服务器把资源回给浏览器,这个过程都是遵循http协议的,否则无法完成,http早些年是1.0版本,现在基本上都是1.1版本了,俩个版本的区 ...

  3. 堆优化dijstra

    因为spfa没事就被卡一卡,所以堆优化dijstra就显得很重要,在最短路或者其模型里边,最少有一条边是没有被更新过的,也就是它是最短的,同理从这个点开始也有一条边最短,所以每次就找最短的然后松弛操作 ...

  4. Python接口测试简单框架

    用例设计: 执行用例代码: # -*- coding: UTF-8 -*-import xlrd,logging,urllib,urllib2,json,sysfrom pylsy import py ...

  5. 如何解决Failed to retrieve MSVC Environment from XXXXXXXX

    升级了新版的Qt5.9.3后,本人的电脑也出了这个问题. 最后通过删除了path中的一些错误.多余的环境变量解决了.(删除了一些mysql的环境变量)

  6. [Win] Win8权限机制导致R安装包失败

    在Rstudio安装tidyselect的时候,提示 ERROR: compilation failed for package ‘tidyselect’ 搜了一下,在github上找到tidysel ...

  7. Java笔记(一)编程基础与二进制

    编程基础与二进制 一.编程基础 函数调用的基本原理: 函数调用中的问题: 1)参数如何传递? 2)函数如何知道返回什么地方? 3)函数结果如何传递给调用方? 解决思路是使用内存来函数调用过程中需要的数 ...

  8. 2009 ACM 水题

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=2009 思路:寻找平方根的函数,c++里面有sqrt,一定要注意 1 添加头文件#include <i ...

  9. 潭州课堂25班:Ph201805201 django框架 第一课 环境搭建 (课堂笔记)

    在虚拟机中创建虚拟环 mkvirtualenv -p /usr/bin/python3 djtest mkvirtualenv 是创建命令, -p /usr/bin/python3  是指定在 pyt ...

  10. python正则表达式(四)

    re模块的高级用法 search 需求:匹配出文章阅读的次数 #coding=utf-8 import re ret = re.search(r"\d+", "阅读次数为 ...