chrome切换前端模式_前端chrome浏览器调试（css）

今天在群里发现，好多刚入门的同学还不太清楚Chrome调试工具的强大之处，以至于调试页面非常的繁琐，没有效率。所以，小编我打算做一系列的文章来稍作讲解一下前端调试神器Chrome调试工具(大神请绕路)。

控制台如下图：

一.先来认识一下这些按钮的功能

先来看这张图最上头的一行是一个功能菜单，每一个菜单都有它相应的功能和使用方法，依次从左往右来看

1.箭头按钮：用于在页面选择一个元素来审查和查看它的相关信息，当我们在Elements这个按钮页面下点击某个Dom元素时，箭头按钮会变成选择状态

2.设备图标：点击它可以切换到不同的终端进行开发模式，移动端和pc端的一个切换，可以选择不同的移动终端设备，同时可以选择不同的尺寸比例，chrome浏览器的模拟移动设备和真实的设备相差不大，是非常好的选择

3.Elements 功能标签页：用来查看，修改页面上的元素，包括DOM标签，以及css样式的查看，修改，还有相关盒模型的图形信息，下图我们可以看到当我鼠标选择id 为lg_tar的div元素时，右侧的css样式对应的会展示出此id 的样式信息，此时可以在右侧进行一个修改，修改即可在页面上生效， 灰色的element.style样式同样可以进行添加和书写，唯一的区别是，在这里添加的样式是添加到了该元素内部，实现方式即：该div元素的style属性，这个页面的功能很强大，在我们做了相关的页面后，修改样式是一块很重要的工作，细微的差距都需要调整，但是不可能说做到每修改一点即编译一遍代码，再刷新浏览器查看效果，这样很低效，一次性在浏览器中修改之后，再到代码中进行修改

今天先来简单介绍一下“Elements”面板的常用功能。

在需要查看的元素上 右键——审查元素(新版本的为“检查”)，就会直接定位到响应的dom元素(这步没什么可说的，大家应该都知道)。

在相应的dom元素(div)上，右键，会出现一个菜单。

常用的有“Edit as HTML”，顾名思义，就是当做html来编辑，这个时候他跟我们在自己的编辑器中编辑一样，只是格式没有我们自己编辑器中那么清晰，在这里边我们可以添加一个标签，并在里面加上一句话“注意”，确定之后就会在页面中实时的出现我们自己添加的内容(PS：这只是在浏览器自己的内存中完成的，他并不会修改我们本地的代码，刷新之后会恢复之前的样式和内容)如下图。

功能很简单实用，具体怎么用，同学们自己去灵活运用啦。其他选项中，小编最常用的就是“Force element state”，如下图，小编我就常用“：hover”来调试鼠标划上的样式。

那到底怎样才能实时的调试样式不用来回切换代码，刷新页面呢？不废话，看下图。

在“style”选项里面，当前选中的元素的css代码就会显示在下边，这里的css代码是可以实时编辑的，可以增，删，改，同学们一定自己试试，就会感觉他的强大之处了(ps：这里如果没有设置workspace的话，他的修改也是在浏览器的内存中修改的，刷新页面后也会恢复)。

知道了这些，妈妈再也不用担心我调样式总是代码、浏览器来回切换了。把在浏览器调试好的样式直接复制到代码中就好了。

在后续的文章中，小编会给大家介绍workspace，有了workspace连复制、粘贴都省了，真的是所见即所得了，哈哈，卖个关子，敬请期待吧。

好了，今天就先介绍这些吧，最后吐槽一下，写文章真TMD(甜蜜的)费劲啊！希望小编写的，能帮到刚刚入门的你。

既然都看了，就加个关注呗，小编码字不易啊~~~~~你要是真不关注，我能怎样，哼！

分享到: