使用Chrome浏览器调试PHP+CSS,出现新的CSS样式无法选中的问题

今天用Chrome浏览正在调整的PHP页面时,突然发现我新添加进去的div对应的CSS样式完全没有应用上去。
调试过程:
一.新建该PHP文件的副本并打开,仍无法应用新的CSS样式。
二.猜测新的div的id与某些变量或者其它id有冲突,于是将id改为绝对没有用过的名字,仍然不行。
三.单独将该div及对应CSS提取出来,且改div存为html形式,存于另一个文件夹打开,样式应用成功!
四.使用Edge浏览器打开改PHP文件,样式应用成功!将css文件内容全部清除并保存,分别用Chrome和Edge打开,Chrome中页面正常而Edge中页面完全没有应用css样式。终于找到原因了!清除chrome最近24小时缓存,再次打开页面,与Edge保持一致!
结论:
Chrome自动保存css文件,导致新修改的css样式无法应用。
解决方法:
打开浏览器调试页面,切换到Network面板,点击 勾选 “Disable cache” 来禁用缓存,这样浏览器就不会自动缓存css、JS之类的文件了,可以大幅改善调试体验。

发表评论

电子邮件地址不会被公开。 必填项已用*标注