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

“代码无法按预期工作。你们如何解决它?”
“这不是您想要的设计,只有时间流逝。”

每个人都应该想到一次。即使我们知道该行为无法正常运行是很自然的,但澄清错误原因并解决该问题可能需要花费更多时间,这可能令人沮丧。在这种情况下,如果您知道前端工程师必不可少的“开发人员工具”,它们可以缩短解决问题的时间。

这次,我将特别关注HTML编码。毕竟,开发人员工具包含很多功能,包括也可以用于Js / jQuery开发的功能,并且不能穷尽所有功能。我们将主要介绍一些功能,这些功能对于已经成为前工程师的人们很有用。当然,有经验的人在必要时应该跳过它。

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

Chrome DevTools“ Chrome DevTools是内置在Google Chrome浏览器中的一组Web创建和调试工具。” “调试”是“查找程序​​错误(错误)并修复它”。错误几乎总是发生,因此知道如何处理错误是初学者的基本知识之一。

总是发生意想不到的行为

每天都会发生由编辑者假设的设计与实际显示的设计不同的情况。适应它并积极致力于解决问题,不是急于解决这个问题或放弃自己的才华,而是最快的改进方法。经验丰富的工程师可以通过记录自己的解决方案并列出参考URL来尽快解决问题。让我们同时开发这种自我支持技能。您也可以向质量检查网站或Google寻求解决方案,但这是您自己尝试解决方案后的第二件事。

何时使用此验证工具?

如果遇到问题,或者想要在正式编码之前在思想基础上尝试自己的代码,则验证工具非常有用。因此,它将“始终使用”。

即使您想尝试代码或查看其行为方式,无论有无问题,都可以使用它。如果您有几种选择,请尝试并选择其中一种是很自然的。那时,麻烦在编辑器中进行写入和删除非常麻烦。一个主要功能是您可以轻松检查代码的行为而没有任何麻烦。没有开发人员工具,即使是有经验的人也不会编码。如果您只是从代码开始,请养成始终检查的习惯。

Chrome验证可以做什么(开发人员工具)

我提到开发人员工具可以做很多事情,但是这里有一些典型的工具。

显示测试

您可以在开发人员工具中更改符号,而无需在编辑器中更改符号。如果您认为效果很好,则实际上可以更改编辑器的表示法。例如,有下面的图像。假设您想要将标题“如何使用[HTML] google chrome开发人员工具”更改为“如何使用[HTML]标签”。

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

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

结果,显示改变。按“更新”返回到原始。这样,它就可以测试显示。

检查问题代码

通过将光标放在有问题的部分上并使用那里的开发人员工具,将立即显示相应代码的HTML和CSS。在显示方面,您经常会测试CSS,并在想要添加新的HTML时使用它。

检查网站代码

创建网站时,有时需要查看自己喜欢的网站的代码。特别是如果您刚刚开始学习,那么您通常会从有经验的人的代码中学习。那时,您可以复制代码。

检查手机/平板电脑屏幕上的显示

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

确认错误原因

如果使用“控制台”功能,它将向您显示发生错误的位置和类型。

试用Js时也经常使用此“控制台”功能。较低的“>该部分就像一个编辑器,您可以自由尝试Js代码。

Javascript / jQuery检查

您可以使用“ netword”等检查文件的读取速度,然后重写应该是问题所在的js文件。

便捷的快捷方式

现在,让我们看一下上面的执行方法,但是在此之前,让我们检查一下如何显示开发人员工具。这是您绝对要记住的操作。如果您习惯了,工作效率将会提高。下表为Mac用户提供了快捷方式。

目的 快捷键
打开开发人员工具(只需打开) 命令+ Alt +我
选择一个元素并验证(在特定位置打开) Command + Shift + C
打开控制台(直接飞往控制台) 命令+ Alt + j
转到左侧标签(打开开发人员工具,然后运行) 命令+ [
转到右侧的标签(打开开发人员工具,然后运行) 命令+]
在设备模式和正常显示之间切换 命令+ Shift + m
整体搜寻 命令+ Alt + F

如何使用验证工具

现在,让我们学习在使用上述快捷键时如何使用它。

按“命令+ Alt + i”或在浏览器中的任意位置单击鼠标右键将其打开。如果已经确定了问题区域,并且您要检查该区域的HTML / CSS,请按“命令+ Shift + c”。

在其中找到单词“ verify”,然后单击它。然后将出现“开发人员工具”。

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

如上图所示,基本显示颜色为白色。但是,您可以更改颜色。

例如,如果您希望背景颜色为黑色,则单击“深色”。

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

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

我能够进行以下更改。

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在工作,则可以知道在哪里进行修复。
5 如果单击“:hov”,则元素将处于鼠标悬停状态。您可以通过单击“ .cls”来尝试添加课程。

让我们尝试一下。让我们更改标题的颜色。让我们将“颜色:#3E3E3E;”更改为另一种颜色“颜色:#F5A9BC;”。

经过检查,我发现标题颜色来自“ body”的名称。

之前更改

body {
    color: #3E3E3E;
}

在“ element.style”中将此颜色更改为“ color:#F5A9BC;”。此时,光标位于HTML面板中相应的“ h1”标签上。

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

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

添加颜色

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

添加文字阴影

添加背景色

添加框阴影

鼠标悬停时更改功能

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

新增班级

您可以通过按“ .cls”添加新类。在编写“添加新课程”的地方输入“示例标题”。

然后,您会看到“样本标题”已自动添加到“ h1”标签的类中。

检查问题代码

当出现问题代码时,“识别问题区域”和“处理”成为问题。这种情况下的对应关系与上述设计变更基本相同。将光标放在问题区域上,打开开发人员工具,然后找出哪个文件的CSS代码会影响设计显示。使用CSS面板中的蓝色“复选框”,并通过显示“ on / off”来确定原因。在大多数情况下,会调整宽度和距离规范,例如“宽度”,“填充”和“边距”,或者为一个属性指定多个规范,并且由于优先级问题,该指令无效。是。尝试一些选项,最后将它们正式反映在CSS文件中。

检查手机/平板电脑屏幕上的显示

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

然后,您将能够根据手机或平板电脑检查显示,如下所示。

这样做的好处是您可以在设备之间切换。换句话说,您可以为每个断点检查要在切换显示中应用的CSS。

如有必要,也请使用“缩放”。

同样,您可以根据需要显示/隐藏“标尺”。

最后,您可以增加设备的种类。单击“设置”,然后转到以下屏幕进行操作。

确认错误原因

“控制台”将向您显示发生错误的位置和类型。在实践中,通常情况是基于此来确定原因代码,或者在Google上搜索错误类型并将其链接到解决方案。

当然,此错误很好,但是如检查其他站点可以看到的那样,它可能会出现。如果明显影响行为,则需要调查原因并解决。但是,请编写正确的代码,以使其尽可能地适合10个以内。

概要

阅读本文后,您将了解开发人员工具对于创建网站至关重要。实际上,重复生产时,您自然会记住它,而不是先了解如何使用它。但是,应通过跟踪您首先可以做什么的范围和内容来改变工作效率。与其盲目搜索和寻找解决方案,不如使用开发人员工具找出原因然后检查解决方案,它更快。请积极使用开发人员工具。

撰写本文的人

田中 陽介

我在越南开展业务,并且从事与人事相关的咨询业务。我离开日本已经八年了,我享受着日本不可能发生的事情。最近,我正在使用Ruby on Rails进行Web服务。