Chrome浏览器开发调试系列(一)

忘是亡心i 2021-11-11 07:20 489阅读 0赞

**1. 调试时如何禁用Chrome浏览器缓存**

Chrome默认是有缓存的, 调试的时候,可能需要每次都去获取最新的数据，所以禁用缓存很有必要。方法有三个：

1.1 清理 Chrome的缓存, 右上角菜单按钮 --> 更多工具  --> 清除浏览数据(Ctrl + Shift + Del); 这种方式的缺点是比较烦,而且可能会卡死一段时间。优点是很容易使用。

1.2 新打开隐身窗口 ( Ctrl + Shift + N ), 也可以从右上角菜单按钮那里选择打开。 优点是比较方便,缺点是只有关闭隐身窗口后再次重新打开才会没有缓存，也就是说，所有普通窗口共用一套缓存，且默认关闭后继续存在。 所有隐身窗口共用另一套缓存，某站点的窗口全部关闭以后其缓存就会被清空(也可能是所有隐身窗口被关闭后才清空,待查证。。。).

1.3 CTRL + F5 强制全部刷新. 很省事...

1.4 就是在 开发工具中， Console， 设置里面勾选  Disable cache (while DevTools is open)； 意思就是某个页面在开发者工具打开时，禁用缓存。很为开发者考虑，是不是?具体打开方式如下:

打开一个新标签页，然后:

*  在页面空白处点击右键，选择审查元素，即可进入开发者工具。
 *  按 F12 也可以进入开发者工具。
 *  选择 菜单按钮 --> 工具 --> 开发者工具/JavaScript控制台也可以。

开发者工具分很多个标签页, 其中 Element(页面元素)是第一个,其次是Network(网络请求), 等等等等,  控制台 (Console) 是最后面一个。

在开发者工具的标签页Tab那一排，最右边有一个小齿轮的图标，那就是设置按钮，点击即可进入设置:

![aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhBdmFXMW5MbUpzYjJjdVkzTmtiaTV1WlhRdk1qQXhOREEwTWpneE5UUXpNelkwTmpnL2QyRjBaWEp0WVhKckx6SXZkR1Y0ZEM5aFNGSXdZMFJ2ZGt3eVNuTmlNbU4xV1ROT2EySnBOWFZhV0ZGMlkyMVdkVnB1Vm0xYVYyczlMMlp2Ym5Rdk5XRTJURFZNTWxRdlptOXVkSE5wZW1Vdk5EQXdMMlpwYkd3dlNUQktRbEZyUmtOTlFUMDlMMlJwYzNOdmJIWmxMemN3TDJkeVlYWnBkSGt2VTI5MWRHaEZZWE4wLmpwZw][]

图1 Chrome 控制台示意图

当然，另一个保留日志的功能: Preserve log ;  在调试时也很有用，页面跳转后，控制台和网络控制台的内容暂时不清空，保留下来。

[aHR0cHM6Ly9iYnNtYXguaWthZmFuLmNvbS9zdGF0aWMvTDNCeWIzaDVMMmgwZEhBdmFXMW5MbUpzYjJjdVkzTmtiaTV1WlhRdk1qQXhOREEwTWpneE5UUXpNelkwTmpnL2QyRjBaWEp0WVhKckx6SXZkR1Y0ZEM5aFNGSXdZMFJ2ZGt3eVNuTmlNbU4xV1ROT2EySnBOWFZhV0ZGMlkyMVdkVnB1Vm0xYVYyczlMMlp2Ym5Rdk5XRTJURFZNTWxRdlptOXVkSE5wZW1Vdk5EQXdMMlpwYkd3dlNUQktRbEZyUmtOTlFUMDlMMlJwYzNOdmJIWmxMemN3TDJkeVlYWnBkSGt2VTI5MWRHaEZZWE4wLmpwZw]: /images/20211109/f447608316db4bceb81e520577d523ba.png