Chrome Devtool小技巧

[FrankKai]

当我们在console里console.log(object)后，我们很难复制这个对象打印的结果，但是chrome devtool的copy()为我们提供了这样一个方法，它可以直接将内容复制到操作系统的剪贴板，但是这远远不够，于是有了这篇博客。

• copy()函数
• 如何debug css的pseudo
• 如何debug 元素的class列表
• 如何快速提取一个网站的文字信息

[FrankKai]

copy()函数

copy(object)，将指定对象的字符串表示形式复制到剪贴板。 我们一般不会在代码里写入copy这种开发工具的api，因此需要在当前session的context新建一个变量，然后再复制，所以可以像下面这样操作。

1. 右键将输出值存储为一个temp变量
2. 复制变量中的值

copy(temp1);

3. 在需要的地方ctrl + v

[FrankKai]

如何debug css的pseudo

做前端开发的同学应该都曾遇到过这样的烦恼：我想查看一个元素hover时是什么样的css属性，但是每当我移开时，我就找不到这个设置了，好苦恼，我该怎么办？

很简单，打开chrome的devtool，它可以强制更改伪元素状态，让你开开心心的debug pseudo元素。

具体步骤如下：

1. 选中需要进行debug的元素
2. 点击:hov调出伪元素列表，强制更新状态即可

[FrankKai]

如何debug 元素的class列表

比如一个标签上面有很多class同时作用，看列表往往令人捉急，一个inherit另一个，移除了自定义的属性，还有框架定义的属性；移除了框架定义的属性，还有浏览器自带的属性。

但其实我们一般只关心那些class就好了，怎样才能快一点在一个元素上toggle一个class呢？右键edit attribute可以，但是不够快。

class列表会列举出来，可以快速的debug元素的class列表。

[FrankKai]

如何快速提取一个网站的文字信息

女票最近需要查港澳台地区的食品法规资料。 我们知道，正常情况下文本节点都是被<div><p><span>等等标签包裹的。 那么该如何快速获得网站的纯文本内容呢？

爬虫解析HTML？？？ 作为一名前端开发，费这劲干嘛。 看我的骚操作就完事了。

• 找到最上层DOM节点并且store as a global variable，例如temp1
• 之后调用temp1.innerText 或 temp1.textContent即可获得

比如提取这个tw食品网站的文本信息：https://www.fda.gov.tw/TC/newsContent.aspx?cid=3&id=25047