前端Chrome浏览器调试（css）

我今天在小组中发现，许多刚入门的学生尚不清楚Chrome调试工具的功能，因此调试页面非常麻烦且效率低下. 因此，我将做一系列文章来解释用于前端调试工件（请跳过）的Chrome调试工具.

控制台如下:

一个. 首先让我们了解这些按钮的功能

让我们首先看这张图片的第一行是一个功能菜单，每个菜单都有其相应的功能和使用方法，依次从左向右看

1. 箭头按钮: 用于选择页面上的元素以查看和查看其相关信息. 当我们单击“元素”按钮页面下的Dom元素时，箭头按钮将更改为选定状态

2. 设备图标: 单击此图标可切换到不同的终端进行开发模式，在移动设备和PC之间进行切换，可以选择不同的移动终端设备，还可以选择不同的尺寸比例，Chrome浏览器模拟的移动设备与真正的设备，这是一个很好的选择

3.Elements功能选项卡页面: 用于查看和修改页面上的元素，包括DOM标签，以及相关盒模型的css样式查看，修改和图形信息，我们可以在下图看到我的鼠标当您选择ID为lg_tar的div元素时，右侧的CSS样式将显示此ID的样式信息. 此时，您可以在右侧进行修改，该修改将在页面上生效. 灰色的element.style样式也相同可以添加和编写，唯一的区别是，此处添加的样式被添加到元素的内部，实现是: div元素的style属性，此功能页面非常强大，制作完相关页面后，修改样式是非常重要的任务. 微小的差异需要调整，但是不能说每次修改都会编译代码谷歌浏览器 css样式，然后刷新浏览器以查看效果. 在浏览器中进行了一次修改之后，然后在代码中对其进行编辑，这是非常低效的

今天，让我们简要介绍“元素”面板的常见功能.

右键单击需要查看的元素-查看该元素（新版本为“ check”），您将直接找到response dom元素（此步骤无话可说，每个人都应该知道）.

右键单击相应的dom元素（div），将显示一个菜单.

常用的名称是“ Edit as HTML”，顾名思义，它被编辑为html. 此时，他在我们自己的编辑器中对其进行了编辑，但是格式不如我们自己的编辑器中清晰. 在这里，我们可以添加标签，并在其中添加单词“ Note”. 确认后，我们添加的内容将实时显示在页面上（PS: 这仅在浏览器自己的内存中完成，他将不会对其进行修改，我们的本地代码，刷新后将还原以前的样式和内容），如下所示

该功能非常简单实用，如何使用，学生可以灵活使用. 在其他选项中，最常用的编辑器是“强制元素状态”. 如下图所示，我经常使用“: hover”来调试鼠标笔触的样式.

那么如何不使用实时调试样式来切换回代码并刷新页面呢？废话，请看下面的图片.

在“样式”选项中，当前所选元素的CSS代码将显示在下面. 此处的CSS代码可以实时编辑，也可以添加，删除或更改. 学生必须自己尝试一下谷歌浏览器 css样式，他们会感觉到他的力量（ps: 如果这里没有设置工作区，他的修改也会在浏览器的内存中进行修改，并且刷新页面后将会恢复）.

知道这一点，我的母亲不再需要担心我总是更改代码并且浏览器来回切换. 只需将在浏览器中调试的样式直接复制到代码中即可.

在后续文章中，编辑器将向所有人介绍工作区. 使用工作空间，您甚至可以保存复制和粘贴. 实际上，您所看到的就是所得到的. 哈哈，卖掉，请期待它.

好的，让我们今天介绍这些，最后呕吐，写TMD（甜）真的很辛苦！我希望这个小家伙能为刚开始的人提供帮助.

阅读完后，请注意. 小编码字符~~~~~如果您不注意，那我该怎么办，呵呵！

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-164517-1.html