CSS调试学习总结

来源：互联网发布：全球鹰k12和知豆哪个好编辑：程序博客网时间：2024/06/05 22:39

Google浏览器开发者工具：CSSViewer（一个Css查看器）

http://blog.csdn.net/u014695532/article/details/50978278

CSSViewer的简介

CSSViewer是一款可以帮助用户快速查看当前的网页元素的CSS属性的谷歌浏览器插件，在Chrome中安装了CSSViewer插件以后，用户就可以在设计网页的时候，快速地模仿网页中某个元素的表现形式，这对于一些使用公共库的开发者来说会大大地节约开发时间(寻找api的时间)，用户只需要把鼠标放在元素上就可以快速地查看该元素的具体CSS属性。

CSSViewer的开发背景

网页的开发者在设计一个网页的时候，如果使用的CSS是一些公共库，比如jQuery UI，bootstrap等库的时候，需要大量的公共库CSS名称，如果用户只是参照API的话，在查看了大量API会浪费很多时间，如果给用户一个DEMO的页面，让用户自由查看该页面中的元素CSS，就可以让用户迅速地模仿和使用这些公共库，从而达到加快开发速度的目的。

CSSViewer的使用方法

在谷歌浏览器中安装CSSViewer插件，并在Chrome的扩展器中启动CSS查看器的功能，CSSViewer插件的下载地址可以在本文的下方找到，离线CSSViewer插件的安装方法可参考：怎么在谷歌浏览器中安装.crx扩展名的离线Chrome插件？最新谷歌浏览器离线安装版可以从这里下载：http://chromecj.com/chrome/2014-09/177.html。

点击Chrome右上角的CSSViewer插件按钮，这时候，用户就可以把鼠标在网页中进行浮动，从而找到需要看到的CSS属性，当用户浮动到一个元素上的时候，CSSViewer插件会自动以弹出窗口的形式，提醒用户该元素的详细CSS内容，包括字体大小、CSS类名、背景颜色、宽度、高度等，如图所示：

CSSViewer的注意事项

CSSViewer查看器只可以用来查看到当前网页元素的CSS元素属性，而对于网页中的JavaScript则是无法进行查看到，有脚本多元素进行CSS影响时，CSSViewer插件也无法检测到变化。

每次点击Chrome右上角的CSSViewer插件按钮，才能启动CSS的观察模式，再次点击就可以取消。
========

学习记录--使用 F12 开发人员工具调试 HTML 和 CSS

http://blog.csdn.net/gaoranfighting/article/details/51682338
怎样打开Chrome的开发者工具
Elements标签页
Resources标签页
Network标签页
Scripts标签页
Timeline标签页
Profiles标签页
Audits标签页
Console标签页
怎样打开Chrome的开发者工具？
你可以直接在页面上点击右键，然后选择审查元素：

或者在Chrome的工具中找到：

或者，你直接记住这个快捷方式： Ctrl+Shift+I (或者Ctrl+Shift+J直接打开控制台)，或者直接按F12。

打开的开发者工具就长下面的样子：

不过我一般习惯与点左下角的那个按钮，将开发者工具弹出作为一个独立的窗口：

下面来分别说下每个Tab的作用。

Elements标签页
这个就是查看、编辑页面上的元素，包括HTML和CSS：

左侧就是对页面HTML结构的查看与编辑，你可以直接在某个元素上双击修改元素的属性，或者你点右键选"Edit as Html"直接对元素的HTML进行编辑，或者删除某个元素，所有的修改都会即时在页面上得到呈现。（注：看到上面右键菜单的最后一个选项"审查元素"了么？这是不是说明这个开发者工具的页面也是HTML来的呢？你点一下就知道了哦，嘿嘿）
你还可以对某个元素进行监听，在js对元素的属性或者HTML进行修改的时候，直接触发断点，跳转到对改元素进行修改的JS代码处：

Elements标签页的右侧可以对元素的CSS进行查看与编辑修改：

你还可以通过这里看到各CSS选择器设置的CSS值的覆盖情况。
下面的Metrics可以看到元素占的空间情况（宽、高、Padding、Margin神马的）：

注意到上面的Properties没有？这个很有用哦，可以让你看到元素具有的方法与属性，比查API手册要方便得多哦（要注意某些方法和属性在IE、FireFox等其他浏览器下面的支持情况哦）。

Resources标签页

Resources标签页可以查看到请求的资源情况，包括CSS、JS、图片等的内容，同时还可以查看到存储相关的如Cookies、HTML5的Database和LocalStore等，你可以对存储的内容编辑和删除。
这里的CSS文件有一个好玩的特性，你可以直接修改CSS文件，并且修改即时生效哦：

Network标签页

Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用，特别是在查看Ajax类请求的时候，非常有帮助。注意是在你打开Chrome开发者工具后发起的请求，才会在这里显示的哦。
点击左侧某一个具体去请求URL，可以看到该请求的详细HTTP请求情况：

我们可以在这里看到HTTP请求头、HTTP响应头、HTTP返回的内容等信息，对于开发、调试，都是很有用的。

Scripts标签页
很明显，这个标签页就是查看JS文件、调试JS代码的，直接看下图的说明：

还有你可以打开JavaScript控制台，做一些其他的查看或者修改：

你甚至还可以为某一XHR请求或者某一事件设置断点：

Timeline标签页
注意这个Timeline的标签页不是指网络请求的时间响应情况哦（这个在Network标签页里查看），这个Timeline指的JS执行时间、页面元素渲染时间：

点击底部的Record就可以开始录制页面上执行的内容。（这个不熟悉，请参考文末链接）

Profiles标签页
这个主要是做性能优化的，包括查看CPU执行时间与内存占用：

这个也不熟悉，不多说，还是请参考文末链接吧。

Audits标签页
这个对于优化前端页面、加速网页加载速度很有用哦（相当与Yslow）：

点击run按钮，就可以开始分析页面，分析完了就可以看到分析结果了：

它甚至可以分析出页面上样式表中有哪些CSS是没有被使用的哦：

Console标签页
就是javascript控制台了：

这个除了查看错误信息、打印调试信息（console.log()）、写一些测试脚本以外，还可以当作Javascript API查看用。
例如我想查看console都有哪些方法和属性，我可以直接在Console中输入"console"并执行：

怎么样，一目了然了吧？再例如我想查看日期函数都有哪些方法：

（注：注意在这里看到的某些方法和属性是ES5新增的，记得兼容其他浏览器的支持情况哦）

结语

Google Chrome除了简洁、快速，现在的Chrome的插件也非常的丰富了。而对于web开发者来说，Chrome对于html5、CSS3等一些新标准的支持也是比较完善的，而且Chrome的开发者工具我个人认为真的非常好用，这就是为什么我向web开发者推荐使用Chrome的原因。

注1：本文截图的Chrome版本为：13.0.782.215 m
注2：Chrome开发者工具更详细的说明请参考：http://code.google.com/intl/zh-CN/chrome/devtools/docs/overview.html
注3：本文原来想定的标题是：给那些因为Firebug而舍不得FireFox的朋友
========

怎么用浏览器调试CSS

作为前端工程师，必须学会调试CSS，怎么很方便的调试呢？可以用浏览器的调试工具。下面的大概讲一下。

工具/原料
电脑
浏览器
方法/步骤
1
我们以谷歌浏览器为例，来讲讲怎么调试CSS。先打开谷歌浏览器，看截图里的红色箭头，点击“工具”，点击“开发者工具”，就打开调试工具了，也可以按下快捷键F12来打开调试工具。

2
打开的调试工具如下图所示

3
我们就以百度的首页为例，看看调试效果。看截图，点击那个“抓取元素”的按钮，来获取要审查的元素。

4
看截图，出现下面的界面后，点击“style”，单击那个对勾，就可以看到效果了，

5
我去掉一些样式之后，就出现了下面的效果，看截图。

6
作为前端工程师，一定要学会使用浏览器的调试工具，各个浏览器的调试工具不一样，各有千秋，我们可以用不同的浏览器来做不同的工作
========

调试 CSS 的方法

http://web.jobbole.com/87818/

我经历过许多 CSS 代码的调试工作，有别人写的也有自己写的，有移动端平台的也有标准桌面浏览器的，从陈旧的 IE 到最新的基于 Webkit 的每日构建。经验告诉我，很多人并没有一个标准的 CSS 调试流程。

我发现在大多数情况下，拥有专业的解决问题的方法，能够节省花在 bug 上的时间。

下面是我总结的经验。

我不保证这是最适合的调试 CSS 的方法，但是确实对我很有效。如何 CSS 不是你的主要编程语言，调试它可能就像暗黑艺术一样；遵循下面的指南能够帮助你更有效地定位和解决 bug。

概括地说，我把调试流程分为 3 个阶段：

评估并快速修复
还原和重现
定位根源并修复
我们挨个解释每个阶段并实践一个例子。

评估并快速修复

如果 CSS 是你的主要工作语言，或者你对 CSS 有一定的理解和实践经验的话，解决 CSS 问题就有很多简单的方法，否则的话，方法就少一些。

有经验的 CSS 开发者可能都知道的一些 CSS 陷阱：

图片周边存在有趣的空白？设置 display: block（图片默认是内联的，因此会有空白）。
元素排列不正确？你可能有浮动的元素。
绝对定位元素不显示、位置错误或者被遮挡？你可能没有设置父元素的 position 属性或者用 transform 及 opacity 创建一个 z-index 上下文。
伪元素不显示？你可能忘记了设置 ‘content’的值。
这样的 “bug” 有一大堆。实际上根本没有 bug，更多的是开发者缺少对浏览器行为的理解。更准确地说，是 CSS 代码让浏览器怎么做。

对这些 CSS 特性熟悉的开发者能够快速定位到问题并且修复。他们对 bug 的认识与那些对 CSS 不了解的人会产生分歧。这样在解决 CSS bug 中对‘工作流’需求的重要性的认识就会因人而异。

对于‘快速修复’中没有覆盖的陌生问题，在开发者工具中靠猜来解决问题的方式已经没什么价值。即使运气好问题被解决了，也很难判断出问题到底是怎样被解决的。

如果出现的问题不能被轻易解决，先确定问题区域的范围，抓取 HTML 标签（也就是拷贝 DOM），进入下一个调试阶段：还原和重现。

专业提示：大多数浏览器的开发者工具会让你选择包裹元素并拷贝 HTML 区块。在 Chrome 的开发者工具中，要连同包裹元素一起拷贝，需要点击 ‘Copy > Copy OuterHTML’。

还原和重现

本阶段的 CSS bug 修复在类似 Codepen 的帮助下异常简单。我们目的主要是复现出此问题 – 也就是引起 bug 的代码。这能让我们快速定位 bug，直捣黄龙。

为清晰起见，只把相关的 HTML 和 CSS 提取出来复现问题。你既可以手打 HTML 对应的 CSS，也可以复制真实的代码。如果可能的话，不用把所有 CSS 代码一股脑拷贝过去重现问题，保证最精简的要素即可。保持逐步增加 CSS 的习惯，问题就会自己找到你。

在快要接近真相时，往往只需要一个特殊的 CSS 属性的改变就能让 bug 暴露出来。

相对应的做法是，把所有 CSS 都扔进入复现问题，然后每次移除一点，直到问题出现。在实践中，我发现这略笨，不用也因人而异，你可能有不同的见解。

逐步地增加或删除 CSS 代码已经是重现问题和定位故障的固定套路了。

那么 HTML 标签呢？

假设使用最少 CSS 代码复现问题时，效果有如原始代码一样。这也是有用的，我们现在看 HTML 标签。

第一件事要做的，也是不能跳过的，就是检查标签的有效性。即使报告出我们不关心的问题（比如 meta），至少能保证它不会以某种方式破坏美感。我们希望能发现未闭合的标签、没有引号的属性，以及其它任何可能影响浏览器解析的问题。建议你使用 W3C validator。

一旦标签检查通过，将有助于消除浏览器引入意外样式的可能性。这样做：

首先，把所有元素改成 div（块级元素）和 span（行内元素），保证它们只被 CSS 的类选择器选中。也许有必要把额外的选择器移除，如把 a.link 改为 .link。

通过使用固定的标签我们消除了浏览器针对特定元素引入默认样式的可能性。表单元素是个特例（马上会在例子中见到）。

如果把所有元素改成 div 和 span，问题消失了，那么浏览器引入默认样式的嫌疑就被确定了。现在在 computed styles 面板中寻找浏览器增加了什么样式，想办法覆盖它。总之就是要看计算后的样式。

定位根源并修复

如果简化 HTML 标签也没有找到问题，并且是可稳定复现的，那么就该换个浏览器试一试。是否同样的问题出现在 Chrome，IE，Safari 和 Firefox 上？如果不是，哪个的表现是正确的？如果只有一个浏览器是错的，那么就值得去搜索一下对应的 bug 跟踪系统了：

Chrome bugs
Firefox bugs
Safari bugs
Microsoft bugs
是某浏览器的问题吗？或者是某浏览器的特定版本的问题？问题是否在修复中？有没有不影响其它浏览器的解决方案？实在不行你可以为特定的浏览器编写修复代码吗？

过去我曾详细描述过如何向浏览器提 bug，在 2011 年 Lea Verou 也写过一份描述提 bug 流程的文章。

另一种情况是可能需要‘无害的’hack。例如，我最近遇到的一个场景是在一个块级元素后面的元素必须是绝对定位的才能显示出来。 left: 100% 只有在 IE 浏览器（移动端是Windows Phone 8，8.1 和 10）中不生效。IE 中在两个元素之间总有一个空隙。看起来像是一个亚像素渲染问题，因此 left: 99.99% 就能解决问题而不会影响其它浏览器。这是个 hack 手段，但我们知道原理（有的浏览器会舍入，其它则不会），标注在 CSS 的注释中，没有任何危害。

微软的 Greg Whitworth 告诉我了关于亚像素舍入的更多细节。WebKit 和 Blink 内核舍入 1/64，Gecko 内核舍入 1/60，Edge 舍入 1/100（感谢 Webkit 开发者 ‘smfr’）。

计算后样式

开发者工具中比较容易被忽视的是 computed styles 面板。如果你对 computed styles 不熟悉的话，顾名思义，就是真正应用到元素上的样式。这很重要，因为你写的样式不一定会生效。同样，你写的样式也不是所有生效的样式。下面的例子将解释我的意思：

XHTML

<fieldset class="outer">
<div class="inner">
<label for="" class="item">hello</label>
<label for="" class="item">hello</label>
<label for="" class="item">hello</label>
<label for="" class="item">hello</label>
<label for="" class="item">hello</label>
<label for="" class="item">hello</label>
<label for="" class="item">hello</label>
<label for="" class="item">hello</label>
<label for="" class="item">hello</label>
<label for="" class="item">hello</label>
</div>
</fieldset>

<fieldset class="outer">
<div class="inner">
<label for="" class="item">hello</label>
<label for="" class="item">hello</label>
<label for="" class="item">hello</label>
<label for="" class="item">hello</label>
<label for="" class="item">hello</label>
<label for="" class="item">hello</label>
<label for="" class="item">hello</label>
<label for="" class="item">hello</label>
<label for="" class="item">hello</label>
<label for="" class="item">hello</label>
</div>
</fieldset>
对应的 CSS 是：

CSS

.outer {
max-width: 400px;
}

.inner {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}

.item {
display: inline-block;
width: 100px;
}

.outer {
max-width: 400px;
}

.inner {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}

.item {
display: inline-block;
width: 100px;
}
outer 的宽度会是多少？如果你认为是 max-width 的 400px，我会原谅你的。但是不是我们看到的宽度，看 Ben Frain 编写的 codepen。

什么情况？为什么不是 max-width 的值？给你个思路，打开 Computed Styles 面板。

找到问题的根源了吗？

我来给你解释下。默认地，fieldset 元素的宽度会等于其内容的宽度。在 Chrome 的Computed Styles 面板中，min-width 的值是一个新的 min-content。

给 min-width 设置一个新值来“修复”它。这个例子中，min-width: 0 就会让 max-width 按照我们期望的那样进行工作。

这正是开发者工具的 Computed Styles 面板中看到的值。记住你写的代码不一定是浏览器计算后的。

讨论

页面出现异常的原因可能很多并且不尽相同。不同浏览器对规范的实现存在差异是普遍存在的现象。相比于编写一个疯狂的浏览器 bug 目录，解决问题的最有效流程还是始终保持条理性。总结来看有效的措施包括：

评估 bug，执行快速修复
使用最少的代码重现问题
利用工具和 bug 追踪描述原因
使用更灵活的代码修复问题，或者使用注释过的hack手段，亦或拷贝副本修复
如果有人让你推荐前端技术书，请让他看这个列表 ->《经典前端技术书籍》
========

CSS调试技巧五则，兼谈“提问的艺术”

http://www.cnblogs.com/lzhdim/archive/2009/08/04/1532817.html

CSS开始进入布局领域，并逐渐开始广泛地被使用，越来越多的设计师转向CSS，然而随着使用的逐步深入，会发现使用CSS的一个问题是，懂得越多，遇到的问题就越多。在实际制做网站的时候，总会遇到以前没有碰到过的新问题。就好像我们学了十几年的英语，单词、语法都背了一大堆，但是真到用的时候，还是总遇到不会说的东西。

实际上这还是学习途中的一个阶段，算是成长的烦恼。毕竟每解决一个问题，功力就会精进一层。因此，除了彻底把CSS的原理搞清楚之外，就要尽可能多地实践，解决实际问题，这样终归是可以把问题都解决的。

在实践中，最关键的问题就是如何调试，也就是在遇到页面表现和预想的不一样的时候，怎么找到问题的关键。当然，前提是你对你写的代码基本上是清楚的，否则谈不上调试。

对于CSS而言，本质就是大大小小的盒子在页面上摆放，你不是设计师，而是排字工人，你眼中看到的不是文字，不是图像，就是一堆盒子！你要考虑的就是盒子与盒子之间的关系！标准流？并列？上下？嵌套？间隔？背景？浮动？绝对？相对？定位基准？等等等等……

技巧1：设置背景色或者边框，确认错误范围

归根到底，任何排版上的错误，都是由于你认为某个盒子应该在的位置和浏览器认为的位置不同，所以如果你本身就是浏览器，一切错误都不会出现。

因此，每当你发现表现页面不如你意的时候，比如希望在左边跑到右边了，希望在一行的变成两行了等等，都首先明确每个盒子的范围，这时你可以通过临时给盒子设置背景色，或者设置一个1像素边框的方法，清楚地了解浏览器认为和盒子范围和你认为的盒子范围是否一致。如果可以设置背景色最好使用背景色，因为设置边框会改变布局，这就好像我们使用温度表测量温度，前提是认为温度表本身不会影响被测物体的温度，实际上物理学告诉我们，任何两个物体都是相互影响的，即所谓测不准原理。但有时对于复杂的页面，背景色可能无法看出范围，还是需要使用边框来完成这项任务，但你要排除增加的临时边框引入新的问题的可能性。

当某个盒子的范围不是你所希望的，恭喜你，你已经找到错误所在了，接下来就是分析为什么浏览器要把它放在这里，而不是按照你的意愿去放置？你经过这一步仔细计算，你的所有代码都是符合CSS规范的，那么你需要确认这是浏览器错了，而不是你错了。不过你应该相信，99%的可能是你粗心算错了，1%的可能是浏览器有错误。就好像你回忆一下，上学时参加过的所有考试，老师确实有时会把你答对的题目判错，但是这种概率很低。

技巧2：删除无关代码，暴露核心矛盾

经过上一步的排查，你已经怀疑浏览器有问题了，那么就需要确认这一点。而这时你的网页很可能很复杂，内容很多，各种因素互相影响，都会干扰你的判断。解决方法就是把仅和你有问题的部分相关的代码提取出来，或者把无关代码全部删除，总之目的就是尽可能找到出现问题的最小代码集合，这样你才能找到问题的本质原因。事实上，很多情况下，从一个复杂的网页一点点删除代码的过程中，你的问题就解决了，这样你一定要注意，删了哪些代码，你的问题就解决了，这就是问题的原因，如果你是个聪明人，一定要把这个问题真正搞懂，不要只管结果，不问为什么。遇事多问几个为什么，你的提高会快得多。

事实上，调试能力是非常重要的，任何人在实际工作中，肯定都会遇到做出来的效果和自己希望的不一致的情况，这时就要看调试能力了。

就好像，家里停电了，你一定会首先出门看看邻居家的是不是有电，这样就判断出问题出在自己家里，还是整个楼停电了。如果整个楼都停电了，那就只有等了；如果只是自己家停电了，那就要再分析一下是不是哪里短路了（比如水洒在电线上了），或者有什么电器过载了（比如你把家里的所有空调、热水器、电火锅这些东西都打开了），等等，这实际上就是在确定故障点，道理和作页面是完全类似的，第一步就是缩小范围，只是你可能没有意识到。因此，你可以把生活中的一些道理，移植过来，很多问题就好解决了。（如果一出问题，就找物业的人来修，应该是比较适合做领导的人，呵呵。）

技巧3：先用Firefox调试，然后使它兼容IE

关于Firefox和IE的差异问题，已经谈过很多了，这里不再细说，总之原则就是，Firefox对CSS规范遵守的最好，调试的时候先用Firefox调试，然后再使网页兼容IE；其次，不要在一种浏览器完全做好以后，再用浏览器调试，而是每一步都保证在各浏览器中这个正确显示。

技巧4：善于利用工具，提高调试效率

这里要说的是两个非常方便的工具，他们都是以Firefox的插件形式存在的，分别是“Web Developer Toobar”和“Firebug”。当然，他们都不能向傻瓜相机一样，只要按一下快门，就告诉你问题出在哪里。他们的作用都是可以帮助你尽可能方便地了解浏览器是如何看待你的代码的。比如，通过他们，可以方便地查看每一个盒子的范围，不需要你在人为地设置边框了，通过Firebug，可以实时动态地修改CSS属性设置，这都可以大大提高你调试的效率。这里暂时没有篇幅来讲解这两个工具的用法了，有兴趣的读者可以先查一查相关的介绍。

技巧5：善于提问，寻求帮助

互联网出现了，这个伟大的家伙给我们带来了太多的方便。有了Google，我们可以寻找答案，有了各种网站论坛，我们可以去向别人请教，这都是我们学习的最好途径。但是有一点，这也需要一些提问的技巧和艺术。这里给您的建议就是，在提问之前，一定要按照前面说的几点，自己亲自研究过你的问题，你的问题可以用一两句话很具体地说明，可以配有简洁的代码，使看到你的问题的人，可以很容易理解你的问题，并“重现”你的问题。这一点非常重要，千万不要把大段大段的代码，贴到某个论坛上，那样你得到帮助的机会会变得小得多。你要相信，热心人固然是很多的，但是热心到能够花很多时间一点点分析你的大段大段代码，然后大海捞针一样地找出某个地方存在问题的热心人就不多了。事实上，这些功课是你应该提前做好的，你至少应该尽可能缩小问题的范围，到一个合理的程度。互联网、Google、论坛都是工具，也仅仅是一个工具，谁能用得好，谁就能获得更快的提高，关键还是要看使用工具的主人。
========

css 调试方法总结

http://blog.csdn.net/coslay/article/details/30487493

本总结不断更新，主要记录本人调试过程中所终结的经验与方法。
毕竟本人不是做浏览器前端的，所以如有不详敬请见谅。

css关系到界面的美观，有时候功能实现了。界面确丑到没人用，终归还是一件失败的产品，所有好的产品不仅需要实用的功能，更加需要贴心美观的外观。

1.如果遇到整体布局工整，个别布局偏移的。
可以使用浏览器取道偏移的组件（放大镜），然后得到应用到这个组件的css文件中的css效果进行修改即可，如下图所示：

可以再右边获取到css样式，以及css详细信息：
查看到样式后，还可以看到对应样式所属于的文件，找到这个文件再进行样式修改即可。

以及css详细信息：

如上右图所示：
这里可以观测到这个组件的大小：宽：177+10＋10＋1+1，高：18+8+8+1+1
组件的内边距：padding：10
组件的边框：border：组件的边框表示这里外边就不是这个组件的组成部分了。
如上左图：
在边界外边还可以有外边界：margin：表示这个组件空出的长和宽
========

使用Chrom调试css样式

http://blog.csdn.net/u012028371/article/details/52910882
在写css的过程中，难免要遇到对样式进行微调的情况，比如一个间距稍微向某个方向调整多少才好，或者是在选颜色时候可能要改一次代码，刷新一次页面查看效果，也可以浏览器的开发者工具调试出合适的颜色，但是这个修改后的颜色并不会同步到代码中，还要自己去源码中改掉。最近在慕课网上学到了如何用Chrom来调试css样式，简单实用！

1.打开Chrom开发者工具(F12)，切换到Sources，你会发现sources是这样的:

2.在sources的空白处右键，将自己的项目文件夹添加到工作目录，之后你的项目文件夹就会出现在这个Sources中，添加后是这样的(我的项目文件夹就叫blog):

3.这里有两种方法，结果是一样的:

在你自己添加的项目文件夹(blog)中，找到你想要调试的css文件，右键，选择map to network resource...
在服务器的代码(localhost:3000)中找到你要调试的css文件，右键，选择map to file system resource...
这时工具会自动地帮你匹配到相应的css文件，点击确定，映射成功。

4.大功告成，之后就可以在Chrom中直接调试css，调试好之后直接ctrl+c保存，不用再切回到编辑器里再改一遍了！
========

阅读全文

0 0