原文地址:https://www.keycdn.com/blog/chrome-devtoolschrome
如何打开?浏览器
1.从浏览器菜单打开安全
2.经过右键单击打开cookie
3.使用键盘快捷键打开网络
F12
or also Ctrl + Shift + I
Cmd + Opt + I
技巧和窍门ide
1.快速文件切换chrome-devtools
当Chrome DevTools打开并搜索名称时,您能够经过按Ctrl + P(Cmd + P)轻松访问当前项目或网页中的任何文件。工具
2.漂亮的打印{}性能
Chrome DevTools内置了漂亮的打印功能,您能够经过单击{}来轻松更改最小化代码的格式,这将返回到普通视图,以便您轻松完成。开发工具
3.编辑HTML元素
您能够经过选择任何元素,在面板中选择DOM元素,而后双击开始标记进行编辑来动态编辑HTML /预览更改。结束标记会自动为您更新。任何更改都将显示在您的浏览器中,就好像实际上已对源代码进行了更改同样。
4.编辑CSS属性
就像编辑HTML同样,您也能够在Chrome DevTools中更改CSS并预览结果的样子。这多是此工具最多见的用途之一。只需选择要编辑的元素,而后在样式面板下添加/更改所需的任何CSS属性便可。
5.在源代码中搜索
您能够按Ctrl + Shift + F(Cmd + Opt + F)快速搜索源代码。也能够是Ctrl + F(Cmd + F)。
6.JavaScript断点
调试JavaScript时,设置断点有时颇有用。您能够经过单击要中断的行号在Chrome DevTools中设置断点,而后按Ctrl + R(Cmd + R)刷新页面。而后该页面将直接运行到该断点。
7.跳到行号
您能够经过按Ctrl + O(Cmd + O)并使用行语法自动跳到代码中的一行。在下面的示例中,咱们键入“:200:10”并按Enter键转到第200行第10列。
8.多个光标
您须要添加多条线路吗?也许你想将font-size添加到几个类中。您能够经过按Ctrl +单击(Cmd +单击)并同时在多行上输入信息来轻松添加多个游标。这是一个很是方便的技巧。
9.更改DevTools停靠位置
您还能够更改Chrome DevTools的停靠位置。有三个选项可供选择:Bottom,Side和Undocked(浮动)。要在停靠位置之间切换,您能够按Ctrl + Shift + D(Cmd + Shift + D)。而后右上角还有一个对接面板。
10.清除Cookies
您还可使用Chrome DevTools轻松清除Cookie。在测试和调试第三方插件时,这尤为有用。只需单击“资源”选项卡,而后在Cookie下右键单击并删除当前存储在浏览器中的任何cookie。
11.设备模式
您能够测试您的网站和媒体查询,并经过进入设备模式查看您的响应式设计是否在任何地方破坏。或者您可能须要查看页面的分辨率,以便了解应用媒体查询的位置。要进入设备模式,请单击Chrome DevTools中的小手机图标,或者按Ctrl + Shift + M(Cmd + Shift + M)。而后,您能够选择要模拟的设备,方向,甚至分辨率。您还能够更改网络限制,以查看您的网站实际呈现如何按期2G链接。
12.自定义调色板和拾色器
在谷歌Chrome Canary中,他们推出了新的自定义调色板和材料调色板,这些调色板和材料调色板能够从您网站的CSS中获取。只需单击样式面板中的颜色块便可访问它们。您还可使用颜色选择器从网页中挑选颜色。
13.更改颜色格式
您能够经过按住Shift +单击颜色块在RGBA,HSL和十六进制格式之间切换。
14.设备仿真传感器
Chrome DevTools的一个很酷的功能是你甚至能够模拟触摸屏和加速器。要执行此操做,请单击“控制台”,“仿真”和“传感器”。
15.切换元素状态
您是否试图找出隐藏风格的来源,好比:hover属性?在Firefox中,他们的开发工具可以让您在选择元素时看到这一点,但在Chrome DevTools中却看不到。可是,有一些更好的东西,称为切换元素状态。这容许您强制元素状态:悬停,以便您可使用样式面板查看属性。
16.将图像复制为数据URI(base64编码)
您能够将任何图像从网页中保存为数据URI,或者更确切地说是base64编码。没有必要使用免费的在线转换器,由于它已经内置在Chrome DevTools中。要执行此操做,只需单击“网络”面板,单击图像,而后右键单击它并选择“将图像复制为数据URL”。而后,您将如下列格式获取图像:“URURIsdata:image / png; base64,iVBORw0KGgoAAAANSUhEUgAABAAAAAFt ......”
17.显示用户代理Shadow DOM
当您处理按钮和输入等内容时,Web浏览器一般会构建隐藏属性。要经过按F1(?)来查看这些单击设置,您能够启用“显示用户代理DOM”。正如您在示例中所看到的,咱们如今可以看到正在构造的#shadow-root div。您甚至能够更进一步,并将CSS样式应用于隐藏属性。
18.选择下一个出现次数
Chrome DevTools可以让您轻松选择下一个匹配项,而后同时应用更改。要执行此操做,只需双击要编辑的内容,而后对要选择的每一个事件按Ctrl + D(Cmd + D),而后在键入时将同时更改全部这些内容。
19.工做区
Chrome DevTools的一个很是强大的功能是工做空间。默认状况下,当您更改开发人员工具中的内容时,它们会在您刷新页面后消失。这适用于此处和那里的小调整,但工做区实际上容许您经过将这些更改保存到磁盘来保留这些更改。要执行此操做,请右键单击文件夹并选择“将文件夹添加到本地工做区”。而后使其保持不变,右键单击文件并选择“映射到文件系统资源...”
20.网络电影胶片
网络幻灯片功能容许您经过在整个加载过程当中抓取屏幕截图来查看页面从开始到结束的呈现方式。这能够是查看字体呈现方式以及处理FOIT或FOUT等问题的好方法。要执行此操做,请单击“网络”面板,单击相机图标,而后按Ctrl + R(Cmd + R)刷新页面。而后它会显示您的页面从开始到结束的呈现方式。
21.监控网络性能
经过最新的开发人员工具更新,他们在瀑布时间轴中添加了聚合详细信息面板。这使您能够更轻松地查看最耗费成本的时间,而后您能够按域,子域等细分。要运行此单击,请单击“时间轴”面板,而后按Ctrl + R(Cmd + R)刷新页面。而后,您能够单击“摘要”面板和“聚合”详细信息面板。
22.DOMContentLoaded
关于什么阻止DOM以及如何解决它,咱们有一个很好的帖子。在开发人员工具中,您能够准确地看到DOMContentLoaded时间和总加载时间。要运行此单击进入“网络”面板,请单击“显示概述”选项,而后按Ctrl + R(Cmd + R)刷新页面。将显示DOMContentLoaded的蓝线和总加载时间的红线。一般,留下或触及蓝线的全部内容都是阻塞DOM的资产,或者也称为渲染阻止资源。
23.网络限制配置文件
您如今还能够添加自定义网络限制配置文件。若是您想要以特定速度更准确地测试,这多是有益的。要添加自定义配置文件,请单击“网络”面板并进入“限制”下拉列表。而后,您能够单击“添加自定义配置文件...”并输入名称,吞吐量和延迟。
24.安全面板
Chrome在开发人员工具中添加了另外一个很棒的功能,称为安全面板。这对于调试HTTPS迁移和快速修复混合内容警告很是有用。要运行此单击,请单击“安全”面板,而后按Ctrl + R(Cmd + R)刷新页面。而后,它将以红色显示绿色和非安全脚本中的安全脚本。
25.在Google Chrome中使用Firefox开发人员工具
您是否知道能够在Google Chrome中运行Firefox开发者工具? Valence是Firefox团队的一个实验性附加组件,它使Firefox Developer Tools可以调试更多种类的浏览器。 Valence须要Chrome 37.0或更高版本。
—— 完 ——