本地调试 HTML 和 CSS 的方法

更新于20180612:

最好用的居然是Microsoft Edge,太好用了。后台修改过CSS,在Microsoft Edge浏览器上刷新一下马上看到效果。

以前写的文字都可以不用看了。

最近在学习写一个 PHP 小项目,其中用到 CSS 去控制项目界面的布局。

虽然有一点点了解,但并未进行过深入的学习,因此只能算是完全不懂,从头去学。边做边学。

在进行层叠样式表的编写时发现,如果对样式表进行了微调,重新加载页面,是不能马上看到修改的效果的。

经过搜索才知道,原来浏览器是有缓存,每次更改样式表都需要清除浏览器缓存,才能看到效果,否则就是修改不起作用一样。

查询并尝试后,找到两种方法:一、谷歌浏览器开发者模式;二、使用小工具。

先说第一种方法。

一、使用 CHROME 的开发者模式去帮助更改 CSS。

具体方法如下:
1、用 CHROME 打开对应网页,按 F12 打开开发者调试模式。

image.png

2、在 elements 选项卡中显示的是 HTML 代码,页面下方显示的就是 CSS 代码。


image.png

3、在这里修改 CSS 代码,会实时反应到页面。在这时修改为自己满意的效果,然后把代码复制到 CSS 样式表文件中即可。

二、使用小工具

有网友推荐了两个小工具 cssfresh 和 live.js , 但还未进行试用,暂且留着试用过后再作记录补充。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容