您的位置:新葡亰496net > 新葡亰官网 > 新葡亰496netchromeDev火速键总计,必知必会的小技

新葡亰496netchromeDev火速键总计,必知必会的小技

发布时间:2019-12-01 01:18编辑:新葡亰官网浏览(168)

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

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

    原文出处: FEWY   

     姓名:丁英琦

    新葡亰496net 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)

    新葡亰496net 2

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

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

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

    快捷键

    节点截图

    选中页面中某一元素,保存为图片
    1、打开开发者工具
    使用 快捷键 F12 (Windows) 或 Cmd Opt I (Mac)新葡亰496net 5

    2、选中任意元素节点新葡亰496net 6

    3、打开命令工具
    使用快捷键 Ctrl Shift p (Windows) 或 Cmd Shift p (Mac)新葡亰496net 7

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

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

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

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

    截全屏

    保存完整网页为图片
    第一种方式
    1、打开开发者工具
    使用 快捷键 F12 (Windows) 或 Cmd Opt I (Mac)新葡亰496net 10

    2、打开命令工具
    使用快捷键 Ctrl Shift p (Windows) 或 Cmd Shift p (Mac)新葡亰496net 11

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

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

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

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

    3、点右上方的三个 小点,点击Capture full size screenshot,图片会自动下载新葡亰496net 15

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

    打开DevTools

    拾色器

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

    【嵌牛正文】

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

    快速添加样式规则

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

    2、鼠标放在这三个小点上,会出现5个小图标,每个小图标都有作用新葡亰496net 19

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

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

    快捷键

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

    增加移动设备

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

    2、点击右上方的三个小点,然后选择Settings
    新葡亰496net 20

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

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

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

    总结

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

    Chrome 开发者工具

    新葡亰496net 22

    2 赞 5 收藏 3 评论

    新葡亰496net 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

    • 新葡亰496netchromeDev火速键总计,必知必会的小技艺。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 [

    新葡亰496netchromeDev火速键总计,必知必会的小技艺。在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

    新葡亰496net 24

    撤销改动Ctrl Z   

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

    恢复改动Ctrl Y        Cmd Shift Z

    新葡亰496net 25

    导航Up, DownUp, Down

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

    伸缩展开元素Right, LeftRight, Left

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

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

    新葡亰496net 26

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

    节点截图

    隐藏元素    H

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

    切换编辑为HTML     F2

    1、打开开发者工具

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

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

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

    新葡亰496net 27

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

    2、选中任意元素节点

    清除 console

    新葡亰496net 28

    样式(Styles) 侧边栏

    3、打开命令工具

    功能Windows / LinuxMac

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

    编辑规则单击单击

    新葡亰496net 29

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

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

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

    新葡亰496net 30

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

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

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

    新葡亰496net 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

    新葡亰496net 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样式规则

    新葡亰496net 33

    资源(Sources)面板

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

    功能Windows / LinuxMac

    新葡亰496net 34

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

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

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

    新葡亰496net 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

    新葡亰496net 36

    新葡亰496net,编辑断点调节右键单击行数右键单击行数

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

    Delete individual wordsAlt DeleteOpt Delete

    新葡亰496net 37

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

    拾色器

    保存本地的更改Ctrl S    Cmd S

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

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

    新葡亰496net 38

    跳转到某行Ctrl G    Ctrl G

    新葡亰496net 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 (正常情况下是你想要的那个)

    新葡亰496net 40

    Timeline Panel

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

    功能Windows / LinuxMac

    新葡亰496net 41

    开启/停止 记录Ctrl E    Cmd E

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

    保存时间轴数据Ctrl S   Cmd S

    添加 text-shadow

    加载时间轴数据Ctrl O   Cmd O

    添加 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

    新葡亰496net 42

    上一个命令/行Up            Up

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

    下一个命令/行Down        Down

    新葡亰496net 43

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

    总结

    多行输入Shift Enter                 Ctrl Return

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

    执行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

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:新葡亰496netchromeDev火速键总计,必知必会的小技

    关键词: