谷歌浏览器前端调试技巧01——使用F12清除缓存

时间:2024-04-01 22:09:51

对于搞前端开发的人来说,前端调试是不可避免的,使用谷歌浏览器调试更是必备手段,今天主要是给大家分享一下清楚缓存的技巧。已经了解的朋友请移步。

为什么需要清理浏览器缓存?

我们通常说的WEB应用采用BS架构,会将服务器端的数据进行拉去,通过本地的浏览器内核进行处理解析。通俗的说就是,我们拿到了远端别人处理好的东西,当然浏览器内核不仅仅如此;

那么我们将服务器端的数据拉取到本地后,每次打开页面刷新页面是不是都要重新加载吗?当然不会,浏览器会将一些静态资源放在本地,避免重复的拉去服务器资源,造成网络上的堵塞;

谷歌浏览器前端调试技巧01——使用F12清除缓存

如上图浏览器会使用类似创建文件夹的方式将数据保存下来;我们甚至可以只管的看到保存了多少静态的js资源(因为这是最占用资源的)

谷歌浏览器前端调试技巧01——使用F12清除缓存

我们也可以通过刷新页面查看哪些数据是保存下载不再被重新获取的(状态为304的数据)

谷歌浏览器前端调试技巧01——使用F12清除缓存

所以如果我们本地积累缓存文件,而这些文件发生了改变的时候,就需要使用清理缓存进行重新加载;同时大量的缓存积累也会影响浏览器的响应速度。

如何清理缓存?

以谷歌浏览器清楚缓存为例

1、采用 ctrl + shift + del 方式

优点:深度清理浏览器缓存,清理为所有页面缓存;

缺点:有时候发现清理不够干净。

使用方式,①尽可能的关闭已经打开的网页。键盘同时按下ctrl + shift + del ②在打开的页面选择时间,如果长时间没有清理,选择时间不限,注意勾选 缓存的图片和文件  ③点击清除数据。

谷歌浏览器前端调试技巧01——使用F12清除缓存

2、采用管理类软件进行缓存清理

优点:非常干净。

缺点:慢;关闭浏览器。

使用方式:比如使用360进行全面清理,需要关闭浏览器

谷歌浏览器前端调试技巧01——使用F12清除缓存

 

3、采用清空缓存并硬性重新加载

优点:清理干净、速度快。

缺点:只能清除指定页面;

使用方式:①保持打开的网页,键盘按下F12。②无需管打开的页面,右键刷新按钮,点击清空缓存并硬性重新加载

谷歌浏览器前端调试技巧01——使用F12清除缓存

本篇内容到此结束,如果你有更好的方法,请给我留言