一、打开方式

1、打开调试工具

方法1：鼠标右击 + 检查

方法2：F12 快捷键

2、看哪里

（1）左边Element：显示当前页面的 html 结构

（2）右边style：显示当前标签的样式

二、选择元素

1、方法一：

在左侧 Element 中点击需要调试的元素

2、方法二：

点击左上角按钮后，直接在网页中点击需要调试的元素

三、功能

1、控制样式

（1）修改属性值

a、直接点击属性值，直接修改。既可以直接修改数值，也可以通过键盘上下箭头慢慢调试数值。

b、更改元素尺寸。双击值就可以修改

（2）添加属性

方法一：

在上一个属性的分号后点击一下，直接添加属性和属性值。

方法二：

点击属性 + ，就可以添加属性

（3）控制样式生效

点击属性前的小框即可。当属性前的小框选中时生效，不选中时不生效。

选中时生效

不选中时不生效

注意点：调试工具仅仅只是当前的调试效果，刷新之后无效，需要在代码中修改才能永久保留。

2、特殊情况：

（1）样式上有删除线

这种情况是指样式失效，导致这种原因主要有样式被注释了或者样式被覆盖了。

遇到这种情况要看看是不是选择器权重的问题。

（2）样式前有小三角

这种一般就是样式报错，原因有以下几种：第一属性后没写分号，第二出现中文标点，第三属性名或者属性值单词拼错。

Chrome调试工具调试CSS相关推荐

Chrome调试工具（CSS）
1.打开方式:按f12,或者右击鼠标点击检查 2.看哪里: (1)elements:显示当前页面的html结构: (2)styles:显示当前标签的样式 3.选择元素: (1)方法一:在左侧eleme ...
前端学习——CSS初学__5 CSS引入方式、新闻页面案例及Chrome调试工具
一.CSS引入方式按照CSS书写的位置(或者引入方式)的不同,CSS样式表可以分为三类: 1.行内样式表(行内式) 行内样式表是在元素标签内部的style属性中设定CSS样式,适用于修改简单样式. ...
前端笔记（7）css属性书写顺序，布局流程，chrome调试工具
css样式表/层叠样式表(5) css属性书写顺序布局流程 chrome调试工具 css属性书写顺序布局定位属性 display / position / float / clear / visi ...
前端~css~Chrome调试工具、元素显示模式、盒模型、flex弹性布局
文章目录 Chrome调试工具块级元素行内元素盒模型 flex布局(弹性布局) 常用属性 Chrome调试工具在浏览器任何一个网页中,鼠标右键单击,选择检查,可打开调试工具.或者f12键. 打 ...
CSS笔记二-选择器、背景相关属性、元素显示模式、CSS三大特性、chrome调试工具、PXcook使用
一.复合选择器 1.后代选择器根据HTML标签的嵌套关系,选择父元素后代中满足条件的子元素: 选择器语法:选择器1 选择器2 {css} 结果:在选择器1中所找到标签的后代(儿子.孙子.重孙子... ...
不常见但很有用的chrome调试工具使用方法
前面的话对于chrome调试工具,常用的是elements标签.console标签.sources标签和network标签.但实际上,还有一些不太常见但相当实用的方法可以提高网页调试效率.本文将 ...
chrome调试工具高级不完整使用指南（基础篇）
一.前言本文记录的是作者在工作上面对chrome的一些使用和情况的分析分享,内容仅代表个人的观点.转发请注明出处(http://www.cnblogs.com/st-leslie/),谢谢合作二. ...
Chrome 浏览器调试的日常使用总结
这篇文章对日常开发中使用 Chrome 浏览器进行调试的方法总结. 使用 F12 或右键"检查(Inspect Element)"即可打开浏览器的调试工具(笔者使用的 Mac,Wi ...
chrome浏览器调试总结
chrome浏览器调试总结 1.如何调出浏览器调试工具 2.开发者工具初步介绍 2.1 元素(Elements) 2.2 控制台(Console) 2.3 源代码(Source) 2.4Network ...

Chrome调试工具调试CSS