还记得 Adob​​e Flash 播放器吗？正是这款漂亮的软件可以让网站嵌入视频和网络游戏。整个网站甚至可以由 Flash 驱动。

尽管 Flash 的使用率大幅下降，并且 Adob​​e 将于 2020 年停用该软件，但某些网站今天仍在使用它。如果你遇到其中一个网站，你可能会想看看该内容是什么。

在本教程中，我们将了解在 Chrome 中启用 Flash 播放器所需遵循的步骤。

如何在 Chrome 中启用 Flash 播放器

由于 Google Chrome 会自动禁用 Flash 播放器，因此如果你希望它工作，则需要启用它。

访问内容设置

由于 Chrome 有自己的内置 Flash 版本，因此你无需安装插件或任何东西。

进入 Chrome 设置的最简单方法是访问 chrome://settings/content。一旦你在那里，向下滚动，直到你看到 Flash 播放器的选项：

允许 Flash 运行

单击 “Flash”，然后在显示 “Block sites from running Flash (recommended) 阻止站点运行 Flash（推荐）”的位置打开开关，你会看到 “Ask first”：

现在，当你访问使用 Flash 的站点时，它会询问你是否要允许 Flash 执行其操作。仔细检查总是好的。

恭喜 - 你已经成功了一半。

如何授予特定站点运行 Flash 的权限

现在你已授予 Chrome 请求你允许使用 Flash 运行网站的权限（哇），你需要告诉它允许哪些网站。

转到你最喜欢的使用 Flash 的站点

让我们拥抱一个小孩子般的奇迹和魔法，好吗？迪士尼的魔法王国网站使用 Flash，我们希望看到所有闪闪发光的魔法善意。

导航到该站点后，在地址栏中查找小灰色锁：

更新其 Flash 设置

单击它，然后选择底部的 “Site settings 站点设置”：

这将带你进入一个包含多个选项的菜单，你会看到 Flash。在右侧，你会看到一个下拉菜单，上面写着 “Block 阻止”。

要允许 Flash，你必须单击该下拉菜单并选择 “Allow 允许”：

现在，如果你再次在 Chrome 中检查你的 Flash 设置，你将在 “allowed 允许”列表中看到该站点：

返回站点并重新加载页面，所有的 Flash 内容都会运行。

注意：如果你使用的是不认识的网站，Flash 容易出现安全漏洞，因此启用它时要小心。

最后一点：如果你关闭浏览器，下次要启用 Flash 时，你将不得不再次执行此过程。 Chrome 正在积极劝告用户不要启用 Flash，因此他们尽可能地让 Flash 变得烦人。

Chrome 已成为世界上最受欢迎的网络浏览器，其性能和功能优于其竞争对手。但是这种流行度的上升导致许多人在丢失或关闭 Chrome 标签页的情况下丢失重要的网页、搜索和会话。

想象一下，你正在为一个项目做研究，在点击了大量的链接之后，到达了完美的信息来源。你不知道你是如何到达那里的，但你现在就在那里，这就足够了。

你在做笔记、发邮件、切换标签，一切都很顺利......直到灾难降临：你不小心点击了错误的像素，你需要的标签页毫无征兆地消失了?

或者，不是你自己的错，Chrome 浏览器决定无缘无故地让你崩溃。

不必担心，你不是第一个发生这种情况的人，你也不会是最后一个。幸运的是，谷歌浏览器会记住你的网页浏览历史，无论出了什么问题，你都应该能够完全恢复。

如果你遇到这种情况，这里有几种方法可以轻松恢复 Chrome 浏览器中关闭的标签页。

意外关闭标签页

如果你只是单击了错误的像素并关闭了你无意关闭的标签页，则很容易恢复。你只需右键单击标签页栏部分中的空白区域，然后选择重新打开已关闭的标签页。

你也可以使用键盘快捷键——按下 Ctrl+Shift+T（或 Mac 上的 Command+Shift+T），你关闭的最后一个标签页将在新标签页中重新打开。

浏览器或电脑崩溃了

电脑崩溃从来不是一个令人愉快的经历，但你不必担心 Chrome 浏览器会丢失你当前的会话。

当你失去所有打开的标签页时，谷歌浏览器可以优雅地处理崩溃。通常当你重启 Chrome 时，它会显示一个“恢复标签页”按钮。这个选项将完全恢复你最后的浏览会话。点击它，你就会回到你离开的地方。

如果你没有看到这个选项，也没关系。点击 Chrome 菜单，将你的光标悬停在历史菜单项上。在那里你应该看到一个选项，上面写着“#标签”，例如“12个标签页”。你可以点击这个选项来恢复你之前的会话。

Ctrl+Shift+T 命令也可以重新打开崩溃的或关闭的 Chrome 窗口。你可以一直按这个快捷键，直到它完全恢复关闭的标签页和窗口。

恢复最近关闭的标签页

同样，你可以通过再次点击 Chrome 菜单，将光标悬停在历史菜单项上，来恢复最近关闭的标签页。那里也会列出你最近访问的页面的简短摘要。

如果你想恢复的页面被列在那里，你可以点击恢复它。如果它不在那里，你可以尝试下一个方法。

你前几天关闭的标签页

如果你还没有看到你想恢复的网页，点击历史记录子菜单项（Chrome 菜单>历史记录>历史记录）。或者你可以使用快捷键 Ctrl+H（Mac：Command+Y）。

这将显示你访问的全部历史页面。你应该能在那里找到你想要的页面。你甚至可以搜索你的网页历史记录，以方便你在关闭或丢失标签页后的一段时间内找回它们。

小心——如果你在无痕模式下浏览，丢失了你的标签页面，Chrome 将不会记住它们。

提示

通过点击地址栏右侧的 ⭐️ 图标，将你经常访问的网页加入书签。这将在 Chrome 浏览器中添加一个按钮——点击这个按钮将把当前标签重定向到这个网页。

可通过三种方式打开 Chrome 开发者工具：

• 在 Chrome 菜单中选择更多工具 > 开发者工具
• 在页面元素上右键点击，选择 “检查”
• 使用快捷键 Ctrl+Shift+I（Windows）或 Cmd+Opt+I（Mac）

本文将总结介绍 Chrome 开发者工具的一些前端实用功能。

1. 查看元素伪类 css 样式

例如我想查看元素触发 hover 时的 css 样式。先选中该元素，然后按下图操作：

2. 临时增删元素 class

3. document.body.contentEditable="true"

在控制台输入 document.body.contentEditable="true"，就可以对页面直接进行编辑。

4. 查看 placeholder 样式

现在可以查看元素的 placeholder 样式了：

5. 测试页面性能和 SEO

下面是测试报告：

参考资料：

• 使用 Lighthouse 审查网络应用

6. Network 显示资源的其他信息

一般 Network 会显示加载资源的详细信息，但它默认只显示部分信息。如果我想查询网页资源是通过 HTTP1.1 还是 HTTP2 加载的，要怎么做呢？

从 GIF 中可以看出，除了 HTTP 协议版本外，还可以查看其他信息，例如 HTTP 请求的方法、域名等等。

7. 查看元素绑定事件

鼠标移到 handler 上，可查看具体的函数代码。

8. 全局搜索代码

打开开发者工具，点击 Console 标签，按 ESC 弹出，点击左边竖形排列的三个小点，选择 Search：

点击搜索结果，会跳到具体的源码文件。它会搜索该网页下所有引入的文件。

9. 利用 Performance 检查运行时性能

打开开发者工具，点击 Performance 标签：

点击左上角的 Record 按钮开始记录，然后你模拟正常用户使用网页。测试完毕后，点击 Stop。

可以看到右上角分别有 FPS、CPU、NET、HEAP：

1. FPS 对应的是帧率，红色代表帧率低，可能会降低用户体验；绿色代表帧率正常，绿色条越高，FPS 越高。
2. CPU 部分上有黄色、紫色等色块，它们的释义请看图的左下角。谁的占比高，说明 CPU 主要的时间花在哪里。
3. HEAP 就是堆内存占用。

NET 最好点击下面的 Network 查看，可以看到具体的加载资源等。

一般根据这些信息就能判断出网页性能问题出在哪。

如果想了解更多，请查看下面的参考资料，需要翻 qiang。或者用搜索引擎搜索 chrome performance，也有很多讲解使用方法的文章。

参考资料

• Get Started With Analyzing Runtime Performance

10. Rendering 实时检测网页变化

打开开发者工具，点击 Console 标签，按 ESC 弹出：

点击左边竖形排列的三个小点，选择 Rendering：

下面是比较实用的功能：

1. Paint flashing，实时高亮重绘区域（绿色）。
2. Layout Shift Regions，实时高亮重排（重新布局）区域（蓝色）。
3. Layer borders，将合成层用边框标出来（橙色、橄榄色、青色）。
4. Frame Rendering Stats，显示 GPU 的信息，旧版本还有实时 FPS 显示，但新版本不知道为何没有（chrome 86）。

11. Application 查看应用信息

从图中看到，在 Application 标签下可以查到本页面很多信息。拿 localStorage 举例，现在我执行代码 localStorage.setItem('token', '123')，然后打开 Application：

不出意外，能看到新增的 localStorage 信息。

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

在这里我总结了一些特别有用的功能。要是你凑巧在 Chrome 里浏览这篇文章的话，现在就打开开发者工具，跟着随手试试吧！

1. 选取 DOM 元素

要是你用过两天 jQuery 的话，一定对 $('.className') 或者 $('#id') 这种选择器不会陌生。上面这俩货分别是 jQuery 的类选择器和 ID 选择器。

在一个网页没有引入 jQuery 的情况下，在控制台里你也可以通过类似的方法选取 DOM。

不管 $('tagName') /$('.class')/ $('#id') 还是 $('.class #id') 等类似的选择器，都相当于原生JS的document.querySelector('') 方法。这个方法返回第一个匹配选择规则的DOM元素。

在 Chrome 的控制台里，你可以通过 $$('tagName') 或者 $$('.className') 记得是两个 $$ 符号来选择所有匹配规则的 DOM 元素。选择返回的结果是一个数组，可以通过数组的方法来访问其中的单个元素。

举个栗子 $$('className') 会返回给你所有包含 className 类属性的元素，之后你可以通过 $$('className')[0] 和$$('className')[1] 来访问其中的某个元素。

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

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

你不需要再傻傻地右键审查元素，编辑源代码了。打开 Chrome 的开发者控制台，输入：

document.body.contentEditable=true

然后奇迹就发生啦！要是你正在用 Chrome 现在就可以试试！

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

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

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

要是你需要选择其中的某个事件，可以通过下面的方法来访问：

getEventListeners($('selector')).eventName[0].listener

这里的 eventName 表示某种事件类型，例如：

getEventListeners($('#firstName')).click[0].listener

上面的例子会返回 ID 为 firstName 元素绑定的 click 事件。

4. 监测事件

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

• monitorEvents($('selector')) 会监测某个元素上绑定的所有事件，一旦该元素的某个事件被触发就会在控制台里显示出来。
• monitorEvents($('selector'),'eventName') 可以监听某个元素上绑定的具体事件。第二个参数代表事件类型的名称。例如 monitorEvents($('#firstName'),'click') 只监测ID为firstName的元素上的click事件。
• monitorEvents($('selector'),['eventName1','eventName3',….]) 同上。可以同时检测具体指定的多个事件类型。
• unmonitorEvents($('selector')) 用来停止对某个元素的事件监测。

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

通过 console.time('labelName') 来设定一个计时器，其中的 labelName 是计时器的名称。通过console.timeEnd('labelName') 方法来停止并输出某个计时器的时间。例如：

console.time('myTime'); //设定计时器开始 - myTime
console.timeEnd('mytime'); //结束并输出计时时长 - myTime

//输出: myTime:123.00 ms

再举一个通过计时器来计算代码块运行时间的例子：

console.time('myTime'); //开始计时 - myTime

for(var i=0; i < 100000; i++){
  2+4+5;
}

console.timeEnd('mytime'); //结束并输出计时时长 - myTime

//输出 - 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}]

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

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

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

• inspect($('selector')) 会检查所有匹配选择器的 DOM 元素，并返回所有选择器选择的 DOM 对象。例如 inspect($('#firstName')) 选择所有 ID 是 firstName 的元素，inspect($('a')[3]) 检查并返回页面上第四个 p元素。
• $0, $1, $2 等等会返回你最近检查过的几个元素，例如 $0 会返回你最后检查的元素，$1 则返回倒数第二个。

8. 列出某个元素的所有属性

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

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

9. 获取最后计算结果的值

你可以把控制台当作计算器使用。当你在 Chrome 控制台里进行计算时，可以通过 $_来获取最后的计算结果值，还是直接看例子吧：

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 开发者工具的强大远远超出你的想象！这只是其中的一部分小技巧而已，希望能够帮到你！

感谢您的阅读，要是您有什么自己的独门小技巧，也希望您在评论区与大家分享！

原文链接：Things you probably didn’t know you could do with Chrome’s Developer Console，作者：Swagat Kumar Swain

DevTools 中的主要部分之一是 network（网络）面板。你可以在 network 面板中执行以下操作：

• 通过文本查找网络请求
• 通过正则表达式查找网络请求
• 过滤（排除）网络请求
• 使用属性过滤器查看特定域的网络请求
• 按资源类型查找网络请求

在本教程中，我使用的是 freeCodeCamp 的主页 freecodecamp.org/news。只需跳转到该页面并打开 network 面板。

你可以在 Mac 上按 cmd + opt + j，或在 Windows 电脑上按 ctrl + shift + j，查看 network 面板。默认情况下，它将在 DevTools 中打开 console（控制台）面板。

打开 console 面板之后，只需要点击 network，就可以切换到网络面板。

打开 network 面板了，我们的教程可以开始了。

开始吧

确保打开了正确的页面（freecodecamp.org/news），并且在 DevTools 中打开了 network 面板：

• 绿色框中的图标是可以隐藏/显示网络面板中的 filter（过滤器）区域的图标。
• 红色框显示 filter 区域。我们勾选这个区域的框，可以过滤出网络请求。

通过文本查找网络请求

在过滤器文本框中输入 analytics，只显示包含文本 analytics 的文件。

通过正则表达式查找网络请求

输入 /.*\min.[c]s+$/，DevTools 会过滤出文件名以 min.c 加上 1 个及以上 s 结尾的资源。

过滤（排除）网络请求

输入 -min.js，DevTools 会过滤掉包含 -min.js 的所有文件。如果任何其他文件与该模式匹配，它们也将被过滤掉，并且在网络面板中将不可见。

使用属性过滤器查看特定域的网络请求

在过滤区域输入 domain:code.jquery.com，将只显示 URL 为code.jquery.com 的网络请求。

按资源类型查找网络请求

如果你只想查看某个页面上正在使用哪种字体文件，请单击 Font：

或者，如果你只想查看特定页面上正在加载的 web socket 文件，请单击 WS：

你还可以更进一步，同时查看 Font 和 WS 文件。只需先单击 Font，然后按住 cmd单击 WS，打开多个面板。（如果你在 Windows 电脑上，则可以通过使用 ctrl 来进行多选）。

谢谢你阅读这篇教程。如果你觉得它有用，可以分享给你的同事。欢迎你在 twitter.com/adeelibr 联系我。

原文：Chrome DevTools: How to Filter Network Requests，作者：Adeel Imran

许多人可能觉得这只恐龙只是一个可爱的小图标，在断网的时候陪伴用户。但是后来有人按下空格键，小恐龙开始奔跑！

这个小彩蛋成为深受人们喜爱的小游戏，风靡至今。

有的人就问了：如果我的设备是在联网的，我想在休息的时候玩，怎么做呢？

这篇文章会介绍怎么在联网和断网状态下玩谷歌小恐龙游戏。小心，会上瘾哦^_^

断网时怎么玩

在未联网状态下直接打开 Chrome，在地址栏任意输入一个网址，你就会看到前面说的小恐龙啦。

只需按一下空格键（或者向上键），小恐龙就跑起来了。沿途遇到障碍（比如仙人掌🌵）的时候，按一下向上键，帮助小恐龙跨越障碍。持续按住向上键的时间越长，小恐龙就跳得越高。

坚持玩的时间越长，小恐龙就跑得越快。如果小恐龙撞上障碍，游戏就结束啦。你需要开启下一轮游戏（分数也会重置）。按一下空格键，就可以重新开始游戏。

联网时怎么玩

在等待网络恢复的片刻有小恐龙陪你娱乐，是不是感觉不错？联网之后怎么继续玩这个游戏呢？请看下方攻略。

访问 URL

最简单的方式就是访问这个地址： chrome://dino/。看，小恐龙又出现了。

这个时候你只需要按空格键，就可以带领小恐龙继续跨越仙人掌了。

还有一个小技巧

如果你的设备断网，页面没有显示前面说的 “No internet” 信息；或者你不想刻意关掉 wifi，那么你可以在设备联网状态下，点击 F12 键打开开发者工具，点击 Network，找到 Online/Offline 标签。

点击 online 旁边的下拉箭头，再点击 offline（切换成离线状态）。

然后，任意输入一个网址，小恐龙又出现了。接下来，退出开发者工具，按一下空格键，跨越吧，小恐龙！

以上就是在断网和联网状态下玩谷歌小恐龙游戏的方法，简单的乐趣^_^ 将手机设置成飞行模式，打开 Chrome，也可以玩。

最近大家都陆续复工了，好些公司因为要赶项目进度免不了让员工加班。不过，再怎么忙，大家也要注意放松啊，身体健康最重要。在工作间隙玩玩这款不怎么需要动脑筋的小游戏，也是不错的调节方式。

实际上，这款小游戏的热门程度可能超乎你的想象。世界各地的人们每个月玩这款游戏的次数高达两亿七千万次，大部分人是来自那些网络基础设施还不够普及的国家，比如印度、巴西、墨西哥和印度尼西亚，不管是成年人还是小朋友，都为之着迷！

灵感来源

这只可爱的小恐龙是设计师 Sebastien Gabriel 的作品。他在一次访谈中说，他觉得没有 wifi 的年代就像是史前时代，很多人都已经忘记那个只能在公司、学校或者网吧才能上网的年代，所以他就以史前时代的代表——恐龙，作为断网的图标。

一开始它只是一个单纯的小图标，一直到 2014 年 9 月，这个小游戏才正式上线。游戏设计师 Edward Jung 是第一次设计游戏，所以刚上线的时候，这款游戏难以在较旧的 Android 设备上运行，因此他们全部重写，并于当年 12 月大功告成。

游戏有哪些更新

随着时间过去，这款小游戏也在不断更新。

比如，加入了会飞过去的翼龙：

还加入了夜晚模式：

在 Chrome 浏览器十周年的时候，团队设计了周年纪念版，在游戏中加入了蛋糕，恐龙吃过蛋糕之后，头上会出现派对帽，很可爱！

游戏有没有尽头

设计师 Edward Jung 说，只要你坚持玩 1700 万年，游戏就会结束了。1700 万年正是暴龙在地球上存在的总的时间。

所以，游戏的尽头有没有什么大彩蛋，恐怕只有设计师本人才知道了。

你能玩到多少分

目前并没有做一个分数排行榜，所以大家也不知道全世界谁的分数最高。

不过，谷歌搜索显示最高分是 99,999 分。

如果你拿到 99,999 分，恭喜你，通关 Level 1，解锁 Level 2！

各国网友在 社交平台上分享自己的分数和攻略。

当然，可能还有一些机（shua）智（fen）的操作，好奇的朋友可以自己试试看。还有一些方法介绍如何将小恐龙图标改成自己喜欢的形象，这里就不一一介绍啦，大家可以在网络上搜索。

（附上代码，供大家参考。）

参考：

• https://www.freecodecamp.org/news/how-to-play-the-no-internet-google-chrome-dinosaur-game-both-online-and-offline/
• https://www.nerdiest.org/5-things-you-didnt-know-about-the-google-chrome-t-rex-game/
• https://zhuanlan.zhihu.com/p/64184738