澳门新浦京娱乐场网站-www.146.net-新浦京娱乐场官网
做最好的网站

澳门新浦京娱乐场网站必知必会的小技巧,chro

简单说 chrome 浏览器 必知必会的小技巧

2017/11/29 · JavaScript · 3 评论 · Chrome

原文出处: FEWY   

 姓名:丁英琦

澳门新浦京娱乐场网站 1

说明

这篇文章主要介绍的就是一些chrome浏览器的小技巧,很简单,希望对大家有所帮助。
这其中的一些小技巧在低版本中是没有的,所以建议大家用最新版的,目前最新版是62,版本很重要,如果发现有些技巧不起作用,请先查看浏览器的版本。

 学号:17101223408

Chrome

快捷键

快捷键比较多,这里挑出几个常用的说一下
最后会给出一张比较完整的快捷键的表

下列快捷键可以在所有 开发者工具 面板中可以使用

全局快捷键 window Mac
打开 开发者工具 F12、Ctrl Shift I Cmd Opt I
打开 开发者工具 并聚焦到控制台 Ctrl Shift J Cmd Shift C
刷新页面 F5、Ctrl R Cmd R
刷新忽略缓存内容的页面 Ctrl F5、Ctrl Shift R Cmd Shift R

在Elements 面板中使用的快捷键

Elements 面板

window

Mac

编辑属性

Enter、双击属性

Enter、双击属性

隐藏元素

H

H

切换为以HTML形式编辑

F2


在Styles 边栏中使用的快捷键

Styles 边栏 window Mac
转到源中属性值声明行 Ctrl 点击属性值 CMd 点击属性值
在颜色定义值之间循环 Shift 点击颜色选取器框 Shift 点击颜色选取器框
编辑下一个/上一个属性 Tab、Tab Shift Tab、Tab Shift

在控制台中使用的快捷键

控制台 window Mac
聚焦到控制台 Ctrl Ctrl
清除控制台 Ctrl L Cmd K、Opt L
多行输入 Shift Enter Ctrl Return

 转载自: 有改动

有一家神奇的公司叫做Google,有一个强大的浏览器称为chrome。从以前使用firefox的插件firebug转战chrome调试已有些日子,不得不说,chrome的调试简单、强大,当然如果知道以下的快捷键将会使前端开发事半功倍。

区域截屏

选取页面中的一部分,保存为图片
1、打开开发者工具
使用 快捷键 F12 (Windows) 或 Cmd Opt I (Mac)

澳门新浦京娱乐场网站 2

2、选择左上角的元素选择按钮,图标颜色变为蓝色即表示选中了
澳门新浦京娱乐场网站 3
3、Windows 下按住 Ctrl,Mac 就按住 Command,然后点击鼠标左键在页面选择区域即可,松开鼠标后,截图自动下载。

4、图片自动下载好后,点击图片后面的箭头,可以在文件夹中显示
澳门新浦京娱乐场网站 4

【嵌牛导读】这篇文章主要介绍的就是一些chrome浏览器的小技巧,很简单,希望对大家有所帮助。

快捷键

节点截图

选中页面中某一元素,保存为图片
1、打开开发者工具
使用 快捷键 F12 (Windows) 或 Cmd Opt I (Mac)澳门新浦京娱乐场网站 5

2、选中任意元素节点澳门新浦京娱乐场网站 6

3、打开命令工具
使用快捷键 Ctrl Shift p (Windows) 或 Cmd Shift p (Mac)澳门新浦京娱乐场网站 7

4、点击Capture node screenshot,或者输入这行中任意的关键字,比如输入node,也会出来这个选项,然后点击这个选项,图片会自动下载。澳门新浦京娱乐场网站 8

5、图片自动下载好后,点击图片后面的箭头,可以在文件夹中显示澳门新浦京娱乐场网站 9

【嵌牛鼻子】chrome浏览器的小技巧

DevTools具有一些内建的快捷键,开发者可以在日常的开发过程中使用它们以节约时间。以下列举的是每个快捷方式在Windows / Linux和Mac下相应的快捷键。有些快捷键是在全局有效的,而有些只是在某一个面板生效,and are broken up based on where it can be used.

截全屏

保存完整网页为图片
第一种方式
1、打开开发者工具
使用 快捷键 F12 (Windows) 或 Cmd Opt I (Mac)澳门新浦京娱乐场网站 10

2、打开命令工具
使用快捷键 Ctrl Shift p (Windows) 或 Cmd Shift p (Mac)澳门新浦京娱乐场网站 11

3、点击Capture full size screenshot,或者输入这行中任意的关键字,比如输入full,也会出来这个选项澳门新浦京娱乐场网站 12

4、图片自动下载好后,点击图片后面的箭头,可以在文件夹中显示澳门新浦京娱乐场网站 13

第二种方式
1、打开开发者工具
使用 快捷键 F12 (Windows) 或 Cmd Opt I (Mac)

2、选中 切换开发模式按钮,图标颜色变为蓝色即表示选中了澳门新浦京娱乐场网站 14

3、点右上方的三个 小点,点击Capture full size screenshot,图片会自动下载澳门新浦京娱乐场网站 15

【嵌牛提问】chrome浏览器的小技巧你知道多少?

打开DevTools

拾色器

在Styles边栏 点击任意颜色的小色块,就可以弹出颜色选择器澳门新浦京娱乐场网站 16澳门新浦京娱乐场网站 17
1、颜色选择区域。
2、吸管。
3、复制到剪贴板。将显示值复制到剪贴板。
4、显示值。颜色的RGBA,HSLA或十六进制表示。
5、调色板。单击其中一个方块将颜色更改为该方块。
6、色相。
7、透明度。
8、显示值切换器。在当前颜色的RGBA,HSLA和Hex表示之间切换。
9、调色板切换器。

【嵌牛正文】

在Google Chrome的任何页面或者应用中,你可以通过以下的方式打开 DevTools:

快速添加样式规则

1、在Styles 边栏,鼠标放在每一小块样式规则上,右下方都会有三个小点
澳门新浦京娱乐场网站 18

2、鼠标放在这三个小点上,会出现5个小图标,每个小图标都有作用澳门新浦京娱乐场网站 19

3、他们从左到右分别代表

  • 添加 text-shadow
  • 添加 box-shadow
  • 添加 color
  • 添加 background-color
  • 插入样式规则

快捷键

打开浏览器窗口右上方的 Chrome 菜单 img,选择工具 > 开发者工具(Tools > Developer Tools).

增加移动设备

1、打开开发者工具
使用 快捷键 F12 (Windows) 或 Cmd Opt I (Mac)

2、点击右上方的三个小点,然后选择Settings
澳门新浦京娱乐场网站 20

3、选择Devices,然后在需要添加的设备前面打上勾就可以了澳门新浦京娱乐场网站 21

快捷键比较多,这里挑出几个常用的说一下

在任意的页面元素中鼠标右键,选择审查元素(Inspect Element).

总结

这些小技巧,很简单,希望对大家有所帮助,不过对于有办法,有时间的朋友还是建议去官网看看吧,毕竟那里才更加全面。

Chrome 开发者工具

澳门新浦京娱乐场网站 22

2 赞 5 收藏 3 评论

澳门新浦京娱乐场网站 23

最后会给出一张比较完整的快捷键的表

功能Windows / LinuxMac

下列快捷键可以在所有 开发者工具 面板中可以使用

打开 Chrome DevToolsF12, Ctrl Shift I     Cmd Opt I

全局快捷键windowMac

打开/切换 审查元素模式和浏览模式Ctrl Shift C     Cmd Shift C

打开 开发者工具F12、Ctrl Shift ICmd Opt I

打开 Chrome DevTools ,并聚焦在 console 上Ctrl Shift J    Cmd Opt J

打开 开发者工具 并聚焦到控制台Ctrl Shift JCmd Shift C

审查审查器 (取消第一个审查器的停靠后再按键)Ctrl Shift J    Cmd Opt

刷新页面F5、Ctrl RCmd R

  • J

刷新忽略缓存内容的页面Ctrl F5、Ctrl Shift RCmd Shift R

在Chrome DevTools 窗口是打开时,按下“?”或者“F1”键可以打开设置对话(General Settings)框。按下“Esc”可以关闭设置对话框。

在Elements 面板中使用的快捷键

全部面板

Elements 面板windowMac

功能Windows / LinuxMac

编辑属性Enter、双击属性Enter、双击属性

打开 General Settings 对话框?, F1?

隐藏元素HH

下一个面板Ctrl ]    Cmd ]

切换为以HTML形式编辑F2

上一个面板Ctrl [    Cmd [

在Styles 边栏中使用的快捷键

标签历史中后退Ctrl Alt [    Cmd Alt [

Styles 边栏windowMac

标签历史中前进Ctrl Alt ]    Cmd Alt ]

转到源中属性值声明行Ctrl 点击属性值CMd 点击属性值

跳转至标签页 1-9 (需要在设置对话框中开启服务)Ctrl 1-9     Cmd 1-9

在颜色定义值之间循环Shift 点击颜色选取器框Shift 点击颜色选取器框

打开/关闭 Console 或 关闭设置对话框EscEsc

编辑下一个/上一个属性Tab、Tab ShiftTab、Tab Shift

刷新页面F5, Ctrl R    Cmd R

在控制台中使用的快捷键

强制刷新页面,清除缓存内容Ctrl F5, Ctrl Shift R    Cmd Shift R

控制台windowMac

当前文件或标签页搜索文字Ctrl F    Cmd F

聚焦到控制台Ctrl Ctrl

所有资源中搜索文字Ctrl Shift F    Cmd Alt F

清除控制台Ctrl LCmd K、Opt L

搜索文件(除了 Timeline面板)Ctrl O,   Cmd O

多行输入Shift EnterCtrl Return

恢复默认字体大小Ctrl 0   Shift 0

区域截屏

放大Ctrl Shift

选取页面中的一部分,保存为图片

缩小Ctrl -Shift -

1、打开开发者工具

元素(Elements) 面板

使用 快捷键 F12 (Windows) 或 Cmd Opt I (Mac)

功能Windows / LinuxMac

澳门新浦京娱乐场网站 24

撤销改动Ctrl Z   

2、选择左上角的元素选择按钮,图标颜色变为蓝色即表示选中了

恢复改动Ctrl Y        Cmd Shift Z

澳门新浦京娱乐场网站 25

导航Up, DownUp, Down

3、Windows 下按住 Ctrl,Mac 就按住 Command,然后点击鼠标左键在页面选择区域即可,松开鼠标后,截图自动下载。

伸缩展开元素Right, LeftRight, Left

4、图片自动下载好后,点击图片后面的箭头,可以在文件夹中显示

展开元素单击某个html标签单击某个html标签

澳门新浦京娱乐场网站 26

编辑元素属性Enter, 双击属性Enter, 双击属性

节点截图

隐藏元素    H

选中页面中某一元素,保存为图片

切换编辑为HTML     F2

1、打开开发者工具

右键单击某个元素时你可以做:

使用 快捷键 F12 (Windows) 或 Cmd Opt I (Mac)

强制元素在某个伪类状态: (:active, :hover, :focus, :visited)

澳门新浦京娱乐场网站 27

为元素设置断点(子元素修改,属性更改,元素删除)

2、选中任意元素节点

清除 console

澳门新浦京娱乐场网站 28

样式(Styles) 侧边栏

3、打开命令工具

功能Windows / LinuxMac

使用快捷键 Ctrl Shift p (Windows) 或 Cmd Shift p (Mac)

编辑规则单击单击

澳门新浦京娱乐场网站 29

添加新属性空白处单击空白处单击

4、点击Capture node screenshot,或者输入这行中任意的关键字,比如输入node,也会出来这个选项,然后点击这个选项,图片会自动下载。

跳转到样式规则属性在样式表的行数Ctrl 单击某个CSS属性Cmd 单击某个CSS属性

澳门新浦京娱乐场网站 30

跳转到属性值在样式表的行数Ctrl 单击某个CSS属性值Cmd 单击某个CSS属性值

5、图片自动下载好后,点击图片后面的箭头,可以在文件夹中显示

循环颜色定义值Shift 单击颜色选择器Shift 单击颜色选择器

澳门新浦京娱乐场网站 31

查看自动填充建议Ctrl 空格Cmd 空格

截全屏

编辑下一个 / 上一个属性Tab,    Shift TabTab,    Shift Tab

保存完整网页为图片

增大 / 减小属性值Up, DownUp, Down

第一种方式

增大 / 减小属性值 (最小单位 10 )Shift Up,   Shift DownShift Up,   Shift Down

1、打开开发者工具

增大 / 减小属性值 (最小单位 10 )PgUp,  PgDownPgUp, PgDown

使用 快捷键 F12 (Windows) 或 Cmd Opt I (Mac)

增大 / 减小属性值 (最小单位 100)Shift PgUp,    Shift PgDown    Shift PgUp,    Shift PgDown

澳门新浦京娱乐场网站 32

增大 / 减小属性值 (最小单位 0.1)Alt Up,    Alt Down   Opt Up,    Opt Down

2、打开命令工具

(img)[img]仿真元素伪类 (:active, :hover, :focus, :visited)

使用快捷键 Ctrl Shift p (Windows) 或 Cmd Shift p (Mac)

(img)[img]添加新的CSS样式规则

澳门新浦京娱乐场网站 33

资源(Sources)面板

3、点击Capture full size screenshot,或者输入这行中任意的关键字,比如输入full,也会出来这个选项

功能Windows / LinuxMac

澳门新浦京娱乐场网站 34

中断/恢复脚本执行F8, Ctrl F8, Cmd

4、图片自动下载好后,点击图片后面的箭头,可以在文件夹中显示

跳过下一个函数F10, Ctrl 'F10, Cmd '

澳门新浦京娱乐场网站 35

跳入下一个函数F11, Ctrl ;F11, Cmd ;

第二种方式

跳出当前函数Shift F11,  Ctrl Shift ;  Shift F11,  Cmd Shift ;

1、打开开发者工具

Select next call frameCtrl .Opt .

使用 快捷键 F12 (Windows) 或 Cmd Opt I (Mac)

Select previous call frameCtrl ,Opt ,

2、选中 切换开发模式按钮,图标颜色变为蓝色即表示选中了

切换断点状态单击行数, Ctrl B单击行数, Cmd B

澳门新浦京娱乐场网站 36

编辑断点调节右键单击行数右键单击行数

3、点右上方的三个 小点,点击Capture full size screenshot,图片会自动下载

Delete individual wordsAlt DeleteOpt Delete

澳门新浦京娱乐场网站 37

注释某行或选择文字Ctrl /Cmd /

拾色器

保存本地的更改Ctrl S    Cmd S

在Styles边栏 点击任意颜色的小色块,就可以弹出颜色选择器

保存所有的更改Ctrl Shift S    Cmd Shift S

澳门新浦京娱乐场网站 38

跳转到某行Ctrl G    Ctrl G

澳门新浦京娱乐场网站 39

按文件名搜索文件Ctrl O   Cmd O

1、颜色选择区域。

跳转到某行(Jump to line number)Ctrl P :     Cmd P :

2、吸管。

跳转到某列Ctrl O : :         Cmd O : :

3、复制到剪贴板。将显示值复制到剪贴板。

打开 member    Ctrl Shift O      Cmd Shift O

4、显示值。颜色的RGBA,HSLA或十六进制表示。

切换 console 并评估( evaluate?) Sources 面板中选中的代码Ctrl Shift

5、调色板。单击其中一个方块将颜色更改为该方块。

  • ECmd Shift E

6、色相。

关闭当前激活的标签Alt WOpt W

7、透明度。

运行代码片段Ctrl Enter     Cmd Enter

8、显示值切换器。在当前颜色的RGBA,HSLA和Hex表示之间切换。

切换注释Ctrl /    Cmd /

9、调色板切换器。

(img)[IMG] Don't 暂停 on exceptions

快速添加样式规则

(img)[IMG] 暂停 on All Exceptions (包括那些在try/catch块中被捕获的)

1、在Styles 边栏,鼠标放在每一小块样式规则上,右下方都会有三个小点

(img)[IMG] 暂停 on Uncaught Exceptions (正常情况下是你想要的那个)

澳门新浦京娱乐场网站 40

Timeline Panel

2、鼠标放在这三个小点上,会出现5个小图标,每个小图标都有作用

功能Windows / LinuxMac

澳门新浦京娱乐场网站 41

开启/停止 记录Ctrl E    Cmd E

3、他们从左到右分别代表

保存时间轴数据Ctrl S   Cmd S

添加 text-shadow

加载时间轴数据Ctrl O   Cmd O

澳门新浦京娱乐场网站必知必会的小技巧,chromeDev快捷键总结。添加 box-shadow

Profiles Panel

添加 color

功能Windows / LinuxMac

添加 background-color

开启/停止 记录Ctrl E   Cmd E

插入样式规则

Console

增加移动设备

功能Windows / LinuxMac

1、打开开发者工具

下一个建议TabTab

使用 快捷键 F12 (Windows) 或 Cmd Opt I (Mac)

上一个建议Shift Tab                    Shift Tab

2、点击右上方的三个小点,然后选择Settings

接受建议RightRight

澳门新浦京娱乐场网站 42

上一个命令/行Up            Up

3、选择Devices,然后在需要添加的设备前面打上勾就可以了

下一个命令/行Down        Down

澳门新浦京娱乐场网站 43

清除控制台记录Ctrl L                       Cmd K,                    Opt L

总结

多行输入Shift Enter                 Ctrl Return

澳门新浦京娱乐场网站必知必会的小技巧,chromeDev快捷键总结。这些小技巧,很简单,希望对大家有所帮助,不过对于有办法,有时间的朋友还是建议去官网看看吧,毕竟那里才更加全面。

执行Enter      Return

console 中右键单击:

XMLHTTPRequest 记录: 打开后可查看 XHR 记录

Preserve log upon navigation

过滤: 隐藏或显示所有来自脚本文件的消息

清除 console: 清除所有的 console 消息

Screencasting

功能Windows / LinuxMac

视图微调 放大或缩小Alt Scroll,Ctrl Cick and drag with two fingersOpt

  • Scroll, Cmd Cick and drag with two fingers

审查元素工具Ctrl Shift CCmd Shift C

模拟

功能Windows / LinuxMac

视图微调 放大或缩小Shift Scroll                Shift Scroll

其他 Chrome 快捷键

以下的 Chrome 快捷键在日常使用中非常有用,它并不是特意为 DevTools开发的,

功能Windows / LinuxMac

寻找下一个Ctrl G    Cmd G

寻找前一个Ctrl Shift G    Cmd Shift G

在隐身模式下打开一个新窗口Ctrl Shift N    Cmd Shift N

开启或关闭书签栏Ctrl Shift B    Cmd Shift B

查看历史记录Ctrl H      Cmd Y

查看下载记录Ctrl J               Cmd Shift J

查看任务管理器Shift ESC             Shift ESC

标签浏览历史中的下一个页面Alt Right                Alt Right

标签浏览历史中的上一个页面Backspace, Alt Left                 Backspace,   Alt Left

高亮地址栏内容F6, Ctrl L, Alt D                  Cmd L, Alt D

在地址栏输入一个 ? 后可以将它作为你的默认搜索引擎使用Ctrl K, Ctrl E                        Cmd K, Cmd E

本文由澳门新浦京娱乐场网站发布于新浦京娱乐场官网,转载请注明出处:澳门新浦京娱乐场网站必知必会的小技巧,chro