标签 Chrome 下的文章

如何快速摘取页面中某个元素的CSS样式

前端开发切图仔常常遇到这样的场景:

  1. 看到别人页面上某个按钮的样式很酷炫,想把它的样式复制下来研究一下
  2. 做新项目的时候,某个版块在以前的项目中出现过

对于这样的情况,HTML部分是很好复制的,打开F12,选中那个dom元素ctrl+c就好了;

但样式的复制就稍稍要麻烦一点了,对于样式写得整齐的情况,直接去CSS文件里面,那个元素相关的CSS都在一块儿,复制起来很方便,但是要是分散到不同地方的呢?这样复制很容易漏掉,或者把不相关的样式也复制了进来。

当然还有一种做法是,在Chrome开发者工具左侧依次点击相关的Dom元素,然后观察右侧的样式关联情况,手动复制下来。这样不会复制多余,但手累呀。最重要的是,一些伪类的情况还得手动去处理,比如::after伪元素在父元素:hover的情况下如果有样式,得去手动给父元素固定个hover状态,想想都麻烦。

- 阅读剩余部分 -

Chrome小技巧:临时标记当前的阅读位置

情景:正在阅读一篇很长的网页,看到中间的时候,想临时看一下后面还有多少,或者想回到开头找某一句话,通常的做法是,滚动条拉回去,再拉回来,但是也不是总能很精确地回到之前的位置。

下面两个简单的小技巧帮助快速精确回到当前阅读的位置。

方法一:书签法

chrome的书签不仅仅是书签,还可以是一段Javascript代码,点击之后就在当前的页面环境执行。

于是可以实现:我们设置两个书签,一个“Mark”用来标记当前的位置,另一个“Go”用来回到开始标记的位置。

- 阅读剩余部分 -

[译]GoogleChrome开发者工具快捷键

开发者工具有一些内置的快捷键,可以帮助大家在日常工作中节省时间。下面是一些快捷方式已以及对应的快捷键(Windows/Linux/Mac),有一些快捷键是全局的,有一些是特定面板才有的。

打开开发者工具

在谷歌浏览器里面你可以使用以下的方式打开:

  • 浏览器右上角的菜单里面选择--更多工具--开发者工具
  • 在任何页面当中右击选择--审查元素
XWindows / LinuxMac
打开开发者工具F12, Ctrl + Shift + ICmd + Opt + I
在审查窗口和浏览窗口之间切换Ctrl + Shift + CCmd + Shift + C
打开开发者工具并且切换到控制台Ctrl + Shift + JCmd + Opt + J
审查审查器(需要先脱离浏览窗口)Ctrl + Shift + ICmd + Opt + I

当开发者工具窗口打开的时候,键入 ? or F1 打开常规设置; Esc 关闭设置对话框。

所有面板

- 阅读剩余部分 -