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. 将变量里的值排列成表格

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

var 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开发工具就是一个工具,它允许Web开发人员可以通过浏览器应用程序干预和操作Web页面,也可以通过这个工具调试和测试Web页面或Web应用程序。有了这个工具,你可以做很多有趣的事情:

  • 调试界面的问题
  • 使用断点调试JavaScript代码
  • 优化你的代码

打开开发者工具,你只需要在页面的任意位置右击鼠标,选择检查元素或从右上角菜单中选择“工具>更多工具>开发者工具“。

下面示例演示的都是在Google Chrome的Canary浏览器下做的演示。

快速编辑HTML元素

试一试:

  • 选择"Elements"面板
  • 选择"Elements"面板内的一个DOM元素
  • 双击你需要打开的DOM元素标签,你就可以编辑它

当你完成之后会自动更新和关闭标签

到指定的行数

你可以在“Sources”面板中选择指定的文件中使用“:行数:列数”的功能。试试快捷键CMD + O

展开所有子节点

试一试:

  • 选择"Elements"面板
  • 选择DOM元素和在带有剪头的地点按住Alt +点击鼠标左键,可以展开所有子节点

改变开发者工具位置

试一试快捷键:CMD + Shift + D。设置开发者工具有三个选项:

  • 不在窗口中显示开发者工具
  • 在窗口右侧显示开发者工具
  • 在窗口底部显示开发者工具

通过CSS选择器搜索DOM元素

试一试快捷键:CMD + F / CTRL + F和输入你需要的类名或ID名,可以搜索到相应的选择器。

Material和自定义颜色调色板

你可以点击颜色代码前面的小图标,你可以选择:

  • 页面颜色:这个面板是从你的Web网站(在你的CSS中)自动生成
  • Material Design:这个面板可以从Material Design面板中自动生成颜色

多个光标

移动光标按住CMD + 点击可以添加多个光标,你也可以使用CMD + U撤销你选择的最后一个光标。

复制图片的Data URI

  • 选择"Network"面板
  • 在“Resources”面板选择你的图片
  • 在图片上右击,选择“Copy Image as Data URI”选项

触发伪类

  • 在左边的面板元素上右击鼠标,并选择“Force Element State”
  • 另外在右边的面板中选择切换伪类状态的图标

通过拖拽选择多列

  • 选择“Sources”面板
  • 在“Sources”面板编辑器中选择你需要的文件
  • 按住Alt并拖动鼠标

使用$0获取当前元素

  • 选择“Elements”面板
  • 在"Element"面板中选择DOM元素
  • 点击"Console"并输入$0可以获取当前元素

在元素中显示

选择一个DOM节点:

  • 在“Console”面板中右击
  • 选择"Reveal in Elements Panel"

查看事件监听器

  • 选择“Elements”面板”
  • 在“Event Listeners”菜单中选择一个事件
  • 右击并选择“Show Function Definition”,你可以查看到对应的源码

预览Easing

  • 点击easing图标(紫色的图标),可以预览easing
  • 你可以通过浏览选择其他的easing或者自定义easing

媒体查询

  • 点击左上角的手机图标,选择设备模式
  • 点击断点("blue","green","orange")工具栏选择断点

如果你可击一个工具栏,你可以在源码中找到它对应的位置。

Network Filmstrip

"Film Strip"显示页面从开始到结束渲染的截图。你可以点击截图和在timeline-style中查看视图。

  • 选择“Network”面板
  • 点击“录制”图标
  • 重新加载页面

Copy Response

你可以在网络资源中复制"Response/Request"头。

  • 选择“Network”面板”
  • 在“Sources”面板编辑器中选择你需要的文件”
  • 右击并选择“Copy Response”

运行预定义的代码片段

  • 在左侧边栏中选择: Sources > Snippets
  • 右击选择Select New
  • 输入文件名和在右侧的面板中输入代码片段
  • 代码片段文件名上右击选择Run

Device Emulation Sensors

你可以模拟移动设备传感器:

  • 触摸屏
  • 地理位置坐标
  • 加速计

你可以这样操作:

  • 选择“Elements”面板
  • 选择“Emulation > Sensors”和点击“Esc”取消

Workspaces

  • 选择“Sources”面板
  • 在Sources面板中右击并选择“Add Folder to Workspaces”
  • 选择你的文件和右击,并选择Map to Network Resources
  • 修改你的文件代码和查看

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/tools/how-to-use-chrome-devtools-like-a-pro.html © w3cplus.com

Chrome 开发者控制台使用技巧的更多相关文章

  1. 多了解一下Chrome开发者控制台

    多了解一下Chrome开发者控制台 2017年10月14日 • Tools, Web前端 • 1.0k views • 暂无评论 作为一名前端开发者,Chrome内置的控制台是必须了解的,它拥有非常丰 ...

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

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

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

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

  4. Chrome 开发者工具使用技巧

    最近我花了较多的时间使用 Chrome 的开发者工具.我发现了很多之前没用过的好功能 (或还不是特别需要用到的功能,例如 blackboxing 和 asynchronous stacktraces) ...

  5. Firefox / Chrome 开发者工具 使用技巧

    附上资料 https://developers.google.cn/web/tools/chrome-devtools/          谷歌官方开发者工具文档 https://developer. ...

  6. 转15个必须知道的chrome开发者技巧GIF

    在Web开发者中,Google Chrome是使用最广泛的浏览器.六周一次的发布周期和一套强大的不断扩大开发功能,使其成为了web开发者必备的工具.你可能已经熟悉了它的部分功能,如使用console和 ...

  7. 15个必须知道的chrome开发者技巧

    在Web开发者中,Google Chrome是使用最广泛的浏览器.六周一次的发布周期和一套强大的不断扩大开发功能,使其成为了web开发者必备的工具.你可能已经熟悉了它的部分功能,如使用console和 ...

  8. 15个必须知道的chrome开发者技巧(转)

    15个必须知道的chrome开发者技巧 在Web开发者中,Google Chrome是使用最广泛的浏览器.六周一次的发布周期和一套强大的不断扩大开发功能,使其成为了web开发者必备的工具.你可能已经熟 ...

  9. [转帖]CHROME开发者工具的小技巧

    CHROME开发者工具的小技巧 https://coolshell.cn/articles/17634.html 需要仔细学习看一看呢. 2017年01月19日 陈皓 评论 58 条评论  64,08 ...

随机推荐

  1. T25健身视频全集+课表

    http://jianfei.39.net/thread-3639251-1.html T25健身视频全集+课表 强度适中 不伤膝盖! [复制链接]     zytttt         主题 好友 ...

  2. PySpider HTTP 599: SSL certificate problem错误的解决方法(转)

    前言 最近发现许多小伙伴在用 PySpider 爬取 https 开头的网站的时候遇到了 HTTP 599: SSL certificate problem: self signed certific ...

  3. s5_day8作业

    # 1 整理今天装饰器代码(每人手写一份,注意,是手写,交到小组长手里,明天我检查),准备明天默写 # 2 编写日志装饰器,实现功能如:一旦函数f1执行,则将消息2017-07-21 11:12:11 ...

  4. 转:css中!important的作用

    转:http://www.cnblogs.com/guoguo-15/archive/2011/08/24/2151859.html {*rule !important}这个css规则当今在网页制作的 ...

  5. LeetCode:前K个高频单词【692】

    LeetCode:前K个高频单词[692] 题目描述 给一非空的单词列表,返回前 k 个出现次数最多的单词. 返回的答案应该按单词出现频率由高到低排序.如果不同的单词有相同出现频率,按字母顺序排序. ...

  6. Unity,如何阻塞当前函数一段时间

    public class Example : MonoBehaviour { IEnumerator Example() { print(Time.time); ); print(Time.time) ...

  7. Storm--命令行解析

    strom的命令行解析 Commands: activate classpath deactivate dev-zookeeper drpc help jar kill list localconfv ...

  8. C# Winform 窗体传值 利用委托 子窗体传值给父窗体

    常用的Winform窗体传值有两种方式. 1.更改Form.designer.cs文件,将控件的设为Public,供子窗体访问. 在designer.cs文件的最后,找到你的控件声明. private ...

  9. ES6 随记(3.3)-- 数组的拓展

    上一章请见: 1. ES6 随记(1)-- let 与 const 2. ES6 随记(2)-- 解构赋值 3. ES6 随记(3.1)-- 字符串的拓展 4. ES6 随记(3.2)-- 正则的拓展 ...

  10. 介绍Web项目中用到的几款JS日历日期控件和JS文本编辑框插件

    第一款日历日期控件:layDate 官方网站:http://laydate.layui.com/ 第二款日历日期控件:my97 官方网站:http://www.my97.net/ 第三款 文本编辑器控 ...