search

FrankKai / FrankKai.github.io

FE blog
https://frankkai.github.io/
363 stars 39 forks source link

Chrome Devtool小技巧 #107

Open FrankKai opened 5 years ago

FrankKai commented 5 years ago

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

FrankKai commented 5 years ago

copy()函数

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

  1. 右键将输出值存储为一个temp变量 image image
  2. 复制变量中的值 
    copy(temp1);
  3. 在需要的地方ctrl + v
FrankKai commented 4 years ago

如何debug css的pseudo

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

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

具体步骤如下：

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

如何debug 元素的class列表

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

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

image

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

FrankKai commented 4 years ago

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

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

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

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

image