使用Chrome验证(开发人员工具)完成指南

“代码不会根据需要移动。每个人都解决了?”
“别然别忘了,但只有时间去。”

每个人都应该认为这发生了一次。它可能是由于阐明和解决了误差,即使它是一种不希望的常识。在这样的时间,可以缩短问题解决问题的“开发人员工具”对于前端工程师来说是必不可少的。

这次,它专门从事HTML的编码。例如,开发人员工具具有广泛的功能,可用于JS / jQuery中的开发,无法涵盖所有​​功能。我们将介绍众所周知的有用功能,以了解已将一步为前工程师迈出的人。当然,请根据需要跳过经验丰富的人。

什么是Chrome验证(开发人员工具)?

Chrome Devtools.所以,“Chrome DevTools是一组内置于Google Chrome中的网络创建和调试工具。” “调试”是“查找程序​​错误(错误)并修复它。”由于始终可能的错误,了解如何处理这是初学者的基本知识之一。

意外的行为总是发生

这是一个日常例程,设计假设和编辑器中的设计是不同的。而不是放弃这个并没有人才放弃,而是改善问题解决方法并积极解决问题的捷径。经验丰富的工程师解决了解决您想要解决的问题的问题,例如将解决方案记录到您自己或列出参考URL。让我们同时培养这种自我支持技能。它是解决QA网站和谷歌的手段,但在试图用老年人解决唯一之后,它是一个下一个工作。

您何时使用此验证工具?

验证工具功能强大,例如在问题发生时发生问题,或者在正式编码之前尝试代码。因此,它将“始终使用”。

即使存在问题,无论您如何尝试代码,即使您想要检查行为也是如此。很自然,有一些选择是拍摄的,而且尝试它是自然的。那时,在编辑器上写入或删除它是非常耗时的。这是一个很好的功能,您可以轻松地制作可以轻松更改代码的代码行为。甚至经验丰富的人没有没有开发人员工具的代码。如果您是刚刚开始编写代码的人,请添加始终检查的习惯。

Chrome验证(开发人员工具)

我说我可以做一些可以用开发人员工具完成的事情,但我将介绍一些典型的工具。

显示测试

您可以在不更改编辑器的符号的情况下更改开发人员工具中的符号。如果判断它很好,您实际上可以更改编辑器的符号。例如,有以下图像。 “[html]使用标题”[html]的google chrome开发人员工具,我想更改“如何使用标记”。

在这种情况下,打开开发人员工具并选择其中的相应代码。

让我们将代码直接更改为“如何使用[HTML]标记”。

结果,显示更改。按“更新”返回原件。以这种方式,可以测试显示器。

问题代码确认

通过在已成为问题的问题中使用光标,并使用开发人员工具,相应代码的HTML和CSS将立即显示。在显示屏中,您将经常测试CSS,当您希望新建添加HTML时,您也将使用它。

网站代码确认

如果您正在生成网站,您可能希望查看您喜欢的网站的代码。特别是,刚开始学习的人应该必须从经验丰富的代码中学习。此时,您可以复制该代码。

验证移动/平板电脑屏幕显示

非常有用的功能。您可以根据屏幕尺寸/移动类型(平板电脑类型)在创建响应的站点时检查设计。

确认错误发生

如果使用“控制台”功能,您将看到发生了哪些错误。

此“控制台”功能通常用于尝试JS。较低的“>这一点就像一个编辑器,尝试一个免费的JS代码很好。

JavaScript / jQuery检查

您可以检查文件的读取速度或在“netword”中重写问题和预期的JS文件。

方便的快捷方式

所以,我想看看如何在上面运行,但在此之前,检查如何显示开发人员工具。这是一条手术,所有手段都需要记住。如果您习惯了,工作效率会改善。下表是Mac用户的快捷方式。

目的 快捷键
打开开发人员工具(公开) 命令+ alt + i
选择要验证的元素(在特定位置打开) 命令+ shift + c
打开控制台(直接飞到控制台) 命令+ alt + j
移动到左侧选项卡(打开开发人员工具后启动) 命令+ [
移动到右侧选项卡(打开开发人员工具后) 命令+]
设备模式和正常显示切换 命令+ shift + m
整个搜索 命令+ Alt + F.

如何使用验证工具

然后,我们将在使用上述快捷键时学习如何使用。

按“Command + Alt + I”或右键单击浏览器的任何其他位置。如果您已经识别出问题并希望在相关零件处检查HTML / CSS,请按“命令+ Shift + C”。

查找并单击其中中间的“验证”的字符。所以将出现“开发人员工具”。

开发人员工具设计/显示更改

如上所述,基本显示颜色是白色的。但是,颜色变化是可能的。

例如,当您想要制作背景颜色黑色时,单击“黑暗”。

结果,背景颜色已发生变化。

接下来,面板的显示当前正在向上和向下划分浏览器。这很难使用。在这种情况下,将显示屏显示在左右部门。选择要更改的方向并更改显示方向。

如下更改。

CSS设计变化

这是刚开始学习的最常用功能。从开发人员工具顶部的面板中选择“元素”。

然后,将显示与HTML区域和CSS区域分离的面板。这是初始显示。如果要更改设计,

如果要更改设计,请单击相应的HTML代码。此时,元素关闭。 “▶它应该显示。如果元素打开,它将是“▼”。

很常见的是,该结构也在层次结构中,因此在点击时逐一打开是麻烦的。如果您想立即打开您要查看的代码,请按住“ALT”▶请点击。然后扩展所有子元素。

然后,如下所示,可选地选择代码。部分是蓝色和影响右侧的CSS代码。特别是,控制CSS的右图有许多您知道的功能,所以我们将叙述。

数字 描述
1 “样式”显示与相应的HTML对应的CSS代码。同一行中还有其他JS,但学习HTML / CSS的人最用于使用。下一个“计算机”显示指定CSS的列表。
2 有“Element.Style”,但在那里写下您要应用的CSS代码。代码专门显示为测试。如果要删除它,可以按“更新”重置您。
3 这是已应用的CSS代码。如果要更改此设计,请直接更改代码。与Element.Style一样,HTML设计更改。顺便问一下,有时可能是时候看到取消线。这意味着CSS是“未应用”。这意味着有多种规格的相同属性。在这种情况下,如果指定的优先级低,则代码被取消行删除。例如,取消上述图像的“字体家庭”属性,但这是一个例子。
4 表示来自哪个文件CSS代码来自。由于顶部显示的CSS代码是高度优先考虑的代码,因此如果您知道哪个CSS正在运行,您可以看到哪些CSS正在工作,并且您知道应该在哪里纠正。
5 单击“:hov”时,元素将鼠标键。单击“.cls”以添加测试的类。

让我们实际尝试一下。让我们改变标题的颜色。让我们改变“颜色:#3e3e3e;”到另一种颜色“颜色:#f5a9bc;”。

确认后,标题的颜色来自指定到“身体”。

之前改变

body {
    color: #3E3E3E;
}

将此颜色更改为“颜色:#f5a9bc;”。此时,光标应用于HTML面板的相应的“H1”标签。

然后显示更改。如果您一遍又一遍地切换,请使用蓝色复选框。

有一个更方便的设计变更功能。

添加颜色

可以在此面板上完成颜色选择。

添加文本阴影

添加背景颜色

添加盒子阴影

鼠标过度条件变化功能

按“:HOV”。然后,显示“伪类”。如果选择一个,则可以创建应用伪类的状态。

添加一个新课程

您可以通过按“.cls”添加新类来添加新类。将“示例标题”附加到写入“添加新类”的点。

然后,您可以在“H1”标记的类中自动发现“示例标题”。

问题代码确认

当问题代码出现时,“识别问题”和“动作”将是一个问题。在这种情况下的对应关系基本上与上述设计变化基本相同。光标应用于问题区域,打开开发人员工具并检查哪些文件的CSS代码会影响设计显示。使用CSS面板的蓝色“复选框”以识别显示屏的原因“开/关”。作为常见的情况,宽度和距离规格的调整,例如“宽度”填充“和”边缘“,或一个属性中的多个规格,而不是由优先级问题指示。尝试某些选择,最终将其反映为CSS文件。

验证移动/平板电脑屏幕显示

如果您创建了启用响应的站点,则会使用响应性设计验证工具。开发人员工具也有此功能。要使用此功能,请单击左边缘的第二个标记。

然后,您将能够检查为移动和平板电脑定制的显示器如下:

这很好,可以为每个设备切换它。换句话说,您可以通过断点检查要在断点中应用的CSS。

根据需要使用“缩放”。

同样,您还可以根据需要显示/隐藏“统治者”。

最后,您可以增加设备的类型。单击“设置”并转到以下屏幕并运行。

确认错误发生

“控制台”显示发生任何错误的情况。实际工作,有很多方法可以检查代码,或者搜索Google的错误类型并将其绑定到解决方案。

此错误尚未超过,但可能出现,但您可能会发现您可以查看您是否查看其他网站。如果它显然会影响行为,有必要追求和解决原因。但是写下正确的代码适合10罐。

概括

如果您阅读本文,我认为开发者工具对网站的生产至关重要。实际上,它将在一遍又一遍地而不是最初理解的同时自然地记住。但是,工作效率应通过持有您可以做的范围和内容来改变。您可以使用Developer工具来识别原因,而不是寻求解决方案,而是检查速度以检查。通过所有方法,务必使用开发人员工具。

给这篇文章的人

田中 陽介

越南的企业家和人力资源相关咨询。七年已经过去了日本,但我享受了一个不能在日本完成的驼峰。最近我在铁路上用Ruby制作网络服务。