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

// 计划写一个 Chrome 浏览器以及调试器的系列文章,我慢慢写. 边写边改，发觉博客真是个打草稿的好地方。

// 本文针对的是当前最新的浏览器Chrome34,如果你的版本不够新,希望你能够更新为最新版(到 Chrome 官网去下载,在国内很多网站下载的 Chrome不能更新, 可能被篡改了...)

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那一排，最右边有一个小齿轮的图标，那就是设置按钮，点击即可进入设置:

图1 Chrome 控制台示意图

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

2. 如何强行让Chrome控制台在弹出窗口和嵌入界面中切换。

首先，需要明白Chrome控制台有三种显示状态：下方，右边，以及弹出窗口。

其中切换的方式是点击右上角的切换按钮，或者是一直按住切换按钮并向下拉：如下图所示：

如上图所示,在各种状态之中切换

Preserve log

转载于:https://www.cnblogs.com/lanzhi/p/6467018.html

Chrome浏览器开发调试系列(一)相关推荐

Chrome浏览器及调试教程
==>(微信公众号:IT知更鸟)欢迎关注<^>@<^> Chrome浏览器及调试教程在web开发过程中,我们在写JavaScript脚本时难免会遇到各种bug,这时,我 ...
PC端chrome浏览器如何调试多点触控事件/chrome浏览器远程调试手机上的网页
PC端chrome浏览器如何调试多点触控事件/chrome浏览器远程调试手机上的网页最近学习移动端网页开发的时候,遇到了一个问题,如何在真机上看到控制台输出的内容. 虽然现在的桌面浏览器提供了模拟手 ...
Chrome 浏览器客户端调试
Chrome 浏览器客户端调试在开发者界面中,你可以使用打开快捷输入Ctrl + Shift +P运行常用命令. 一.Elements 1.箭头按钮:用于在页面选择一个元素来审查和查看它的相关信息, ...
【Chrome浏览器开发工具笔记】
Chrome浏览器开发工具笔记前言一.打开浏览器开发者工具二.浏览器开发者工具界面介绍 2.1 Element(元素) 2.2 network(网络) 2.3 Sources(资源面板) 2.4 ...
HaaS100开发调试系列之使用AliOS Things诊断调试组件定位Bug
1.背景在嵌入式开发中,我们经常遇到的一个问题是:写代码一个不小心,就制造了一个bug,C语言中bug的威力大家也心知肚明--可以直接把系统搞挂! 即大家常见的系统死机.系统重启等等:而问题的来源或 ...
超完整的 Chrome 浏览器客户端调试大全
2019独角兽企业重金招聘Python工程师标准>>> 引言 "工欲善其事,必先利其器" 没错,这句话个人觉得说的特别有道理,举个例子来说吧,厉害的化妆师都有一套 ...
Chrome浏览器怎么调试网页标题字体大小和颜色？
出于兴趣了解了一下,在此记录一下,可以供web开发初学者看看哦! Chrome因为其十分好用的DevTools受广大开发者的喜好,下面一步一步教大家怎么用Chrome调试网页标题的和字体大小和颜色. ...
超完整的Chrome浏览器客户端调试大全
引言 "工欲善其事,必先利其器" 没错,这句话个人觉得说的特别有道理,举个例子来说吧,厉害的化妆师都有一套非常专业的刷子,散粉刷负责定妆,眼影刷负责打眼影,各司其职,有了专业的工具 ...
Chrome浏览器客户端调试大全
引言 "工欲善其事,必先利其器" 没错,这句话个人觉得说的特别有道理,举个例子来说吧,厉害的化妆师都有一套非常专业的刷子,散粉刷负责定妆,眼影刷负责打眼影,各司其职,有了专业的工具 ...

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

Chrome浏览器开发调试系列(一)相关推荐

最新文章

热门文章