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

简介: // 计划写一个 Chrome 浏览器以及 调试器的系列文章,我慢慢写. 边写边改,发觉博客真是个打草稿的好地方。// 本文针对的是当前最新的浏览器Chrome34,如果你的版本不够新,希望你能够更新为最新版(到 Chrome 官网 去下载,在国内很多网站下载的 Chrome不能更新, 可能被篡改了...)1. 调试时如何禁用Chrome浏览器缓存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

目录
相关文章
|
23天前
|
JavaScript 前端开发 开发工具
TypeScript的介绍,let age:number = xxx,可以直接看出数据类型,Type由微软开发,可以在任何浏览器和系统中运行,比较适合大型项目,TypeScript的安装
TypeScript的介绍,let age:number = xxx,可以直接看出数据类型,Type由微软开发,可以在任何浏览器和系统中运行,比较适合大型项目,TypeScript的安装
|
29天前
|
Web App开发 前端开发 JavaScript
Chrome 浏览器中执行 JavaScript
Chrome 浏览器中执行 JavaScript
62 0
|
5天前
|
Web App开发 JavaScript 前端开发
最新的 Chrome 浏览器架构有什么新的改变吗
最新的 Chrome 浏览器架构有什么新的改变吗
|
8天前
|
Web App开发 前端开发 JavaScript
前端必备的浏览器调试技巧
【7月更文挑战第18天】 Chrome开发者工具是前端调试的关键,包括快捷键Ctrl+Shift+I/Cmd+Option+I打开它,DOM和CSS调试如编辑元素、样式,JS调试如断点、条件断点和监视变量,网络请求分析,性能评估如Lighthouse和性能面板,及截图、模拟设备等实用技巧,助力开发者提升效率。
19 1
|
17天前
|
Web App开发 存储 监控
如何使用 Chrome DevTools 进行前端性能监控和调试?
如何使用 Chrome DevTools 进行前端性能监控和调试?
|
21天前
|
前端开发 JavaScript
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
26 0
|
22天前
|
Web App开发
软件开发常见流程之移动端调试方法,利用Chrome(谷歌浏览器)的模拟手机调试,搭建本地Web服务器,手机和服务器在一个局域网,通过手机访问服务器,使用服务器,利用ip实现域名访问
软件开发常见流程之移动端调试方法,利用Chrome(谷歌浏览器)的模拟手机调试,搭建本地Web服务器,手机和服务器在一个局域网,通过手机访问服务器,使用服务器,利用ip实现域名访问
|
22天前
|
Web App开发 编解码
软件开发常见流程之兼容性和手机屏页面设计,PC端和移动端常见浏览器,国内的UC都是根据Webkit修改过来的内核,开发重点关注尺寸,常见移动端尺寸汇总,移动端,理想视口根据你设别的样式进行修改
软件开发常见流程之兼容性和手机屏页面设计,PC端和移动端常见浏览器,国内的UC都是根据Webkit修改过来的内核,开发重点关注尺寸,常见移动端尺寸汇总,移动端,理想视口根据你设别的样式进行修改
|
23天前
|
Web App开发 前端开发
canvas保存图片时,谷歌浏览器Chrome报错【解决方案】Not allowed to navigate top frame to data URL
canvas保存图片时,谷歌浏览器Chrome报错【解决方案】Not allowed to navigate top frame to data URL
14 0
|
25天前
|
Web App开发 JavaScript 开发者
谷歌浏览器chrome安装vue调试插件Vue-Devtools
谷歌浏览器chrome安装vue调试插件Vue-Devtools
27 0

热门文章

最新文章