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

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Chrome浏览器调试模式是一种开发工具,它提供了一系列功能和选项,帮助开发人员调试和分析网页应用程序的问题。使用Chrome浏览器调试模式可以迅速查找并修复HTML、CSS和JavaScript的错误,并优化网页性能。 在Chrome浏览器中,打开调试模式的方式很简单。首先,打开Chrome浏览器并导航到你要调试的网页。然后点击浏览器右上方的菜单按钮,选择“更多工具”,再选择“开发者工具”。或者你可以使用快捷键F12来直接打开开发者工具。 一旦进入开发者工具,你会看到一个包含多个选项卡的窗口。其中最常用的选项卡是“元素”,它显示了当前网页的HTML结构。你可以查看和编辑HTML元素的属性、样式和内容。另外,还有“控制台”选项卡,它显示了网页应用程序的JavaScript错误和输出信息。通过“控制台”,你可以运行JavaScript代码,并查看其运行结果。 使用Chrome浏览器调试模式还可以进行网络分析。在“网络”选项卡中,你可以查看网页加载时的网络请求和响应信息。通过分析这些信息,你可以找到加载缓慢的资源并进行优化,提升网页的加载速度。 此外,调试模式还提供了性能分析工具。通过记录和分析网页的性能指标,如加载时间和渲染时间,你可以找到影响网页性能的瓶颈,并采取相应的优化措施。 总的来说,Chrome浏览器调试模式是一个非常强大的开发工具,提供了很多便捷的功能和选项,帮助开发人员调试和优化网页应用程序。无论你是前端开发人员还是网页设计师,掌握和使用Chrome调试模式都是非常有益的。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值