Chrome调试工具（CSS）

1.打开方式：按f12,或者右击鼠标点击检查

2.看哪里：

(1)elements：显示当前页面的html结构；

(2)styles：显示当前标签的样式

3.选择元素：

(1)方法一：在左侧elements中点击需要调试的元素

(2)方法二：点击左上角按钮后，直接在网页中点击需要调试的元素

4.控制样式：

（1）修改属性值：直接点击属性值，直接修改

（2）添加属性：在上一个属性的分号后点击一下，直接添加

（3）控制样式生效：点击属性前的小框即可

（5）调试工具仅仅只是当前的调试效果，需要在代码中修改才能永久保留

5.特殊情况

（1）若是样式上有删除线，代表样式失效，检查一下代码，要么被注释了，要么被覆盖了

（2）样式前有小三角形，代表样式有错误，检查一下代码，常见问题是有三种，要么是属性值后没写分号，要么是代码中出现中文标点，要么是属性名或者属性值单词拼错

Chrome调试工具（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中所找到标签的后代(儿子.孙子.重孙子... ...
前端学习——CSS初学__5 CSS引入方式、新闻页面案例及Chrome调试工具
一.CSS引入方式按照CSS书写的位置(或者引入方式)的不同,CSS样式表可以分为三类: 1.行内样式表(行内式) 行内样式表是在元素标签内部的style属性中设定CSS样式,适用于修改简单样式. ...
不常见但很有用的chrome调试工具使用方法
前面的话对于chrome调试工具,常用的是elements标签.console标签.sources标签和network标签.但实际上,还有一些不太常见但相当实用的方法可以提高网页调试效率.本文将 ...
chrome调试工具高级不完整使用指南（基础篇）
一.前言本文记录的是作者在工作上面对chrome的一些使用和情况的分析分享,内容仅代表个人的观点.转发请注明出处(http://www.cnblogs.com/st-leslie/),谢谢合作二. ...
【译】你不知道的 Chrome 调试工具技巧第二十天：Workspace的黑魔法
特别声明本文是作者 Tomek Sułkowski 发布在 medium 上的一个系列.据作者透露一共有 24 篇,一直更新到 12 月 24 日版权归原作者所有. 作者在 Twitter 上推荐 ...
chrome调试工具的使用
chrome调试工具 1.调试工具的打开方式: 打开浏览器,按下F12或者右击鼠标选择检查选择元素即Elements,当我们把调试框放在屏幕下沿时,左边是html,右边是css (我们可以选择屏幕右 ...
java的调试工具_[Java教程]chrome调试工具
[Java教程]chrome调试工具 0 2017-11-01 12:00:20 今天在调试bug的时候有一个需求,我需要知道我的代码中有哪些地方在修改body的style,然后我想到了DOM节点监听 ...
【译】你不知道的Chrome调试工具技巧第七天：异步console的趣味小窍门
特别声明本文是作者 Tomek Sułkowski 发布在 medium 上的一个系列.据作者透露一共有24篇,一直更新到12月24日版权归原作者所有. 前两篇的翻译链接我已经给到了作者本人,虽然 ...

Chrome调试工具（CSS）

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

最新文章

热门文章