公众号网站开发用什么模板,韩国有哪些做潮牌的网站,网站建设 微信开发,图片数量 wordpress文章目录 Chrome实用命令笔记1、chrome基本介绍2. 打开开发者工具#xff08;DevTools#xff09;方法一#xff1a;快捷键方法二#xff1a;右键菜单方法三#xff1a;浏览器设置 2. 开发者工具面板Elements面板Console面板Sources面板Network面板Performance面板Memory面… 文章目录 Chrome实用命令笔记1、chrome基本介绍2. 打开开发者工具DevTools方法一快捷键方法二右键菜单方法三浏览器设置 2. 开发者工具面板Elements面板Console面板Sources面板Network面板Performance面板Memory面板Application面板Security面板 3. 实用命令和技巧3.1 控制台命令3.2 快捷键3.3 网络面板过滤器3.4 自定义开发者工具3.5 使用快捷键面板 4. 浏览器操作命令4.1 收藏网页4.2 开启无痕模式4.3 复原已关闭的网页4.4 清除缓存 5. 图片操作命令5.1 截取页面元素为图片 6. 书签栏操作6.1 快速访问书签6.2 书签搜索 7. 搜索引擎和地址栏操作7.1 设置默认搜索引擎7.2 快捷键搜索7.3 拖放下载文件 8. 标签页操作8.1 快速关闭标签页8.2 通过标签组织网页 Chrome实用命令笔记
1、chrome基本介绍 定义与起源 Chrome是一款由谷歌公司开发的免费网络浏览器是目前全球使用最广泛的浏览器之一。Chrome最初于2008年9月发布当时只支持Windows操作系统。随着时间的推移Chrome陆续推出了Mac、Linux、iOS和Android等版本逐渐成为跨平台使用的浏览器。 名称由来 “Chrome”一词源自英语单词“chromium”意为“铬”。这与谷歌其他产品命名方式相同如Android安卓和Gmail谷歌邮箱。 特点 界面简洁明了操作简单便捷Chrome浏览器的界面设计简洁同时常用的功能易于使用。快如闪电的页面打开速度Chrome浏览器拥有出色的页面加载速度无论是单个页面还是多个页面同时加载都能迅速完成。安全稳定Chrome基于强大的安全架构能够抵御各种网络攻击和恶意软件。同时Chrome支持多标签浏览每个标签页面都在独立的“沙箱”内运行提高了安全性。强大的扩展功能Chrome支持各种扩展程序用户可以根据自己的需求添加各种功能如广告屏蔽、密码管理、翻译等。 功能 地址栏Chrome的地址栏不仅用于输入网址还可以进行搜索、管理书签、查看历史记录等操作。深色模式用户可以根据自己的需求或心情选择深色模式降低屏幕亮度减轻眼睛疲劳。标签页Chrome的标签页功能可以帮助用户妥善整理、跟踪多个网页并处理多项任务。个人资料用户可以使用个人资料功能分隔不同的账号单独保存各自的书签、历史记录、密码等设置。 当然以下是一篇关于ChromeGoogle Chrome浏览器中一些实用命令的Markdown笔记。这些命令主要通过Chrome的开发者工具DevTools来使用它们可以帮助你更有效地调试、优化和分析你的网页。
2. 打开开发者工具DevTools
方法一快捷键
Windows/Linux: F12 或 Ctrl Shift I 或 Ctrl Alt IMac: Cmd Opt I 或 Cmd Shift I
方法二右键菜单
在页面任意元素上右键点击选择“检查”或“Inspect”。
方法三浏览器设置
前往浏览器设置三点菜单 - 更多工具 - 开发者工具。
2. 开发者工具面板
Elements面板
用于查看和编辑HTML和CSS。可以实时修改元素并查看效果。
Console面板
显示JavaScript的日志信息、错误和警告。可以执行JavaScript代码。
Sources面板
调试JavaScript代码。设置断点、步进代码等。
Network面板
监控网络请求和响应。分析网络性能。
Performance面板
捕获和分析页面的运行时性能。可以看到页面的加载时间、渲染时间等。
Memory面板
分析JavaScript的内存使用情况。查找内存泄漏等。
Application面板
查看和管理页面的应用状态如Cookies、Storage等。
Security面板
分析页面的安全性。查看证书信息、混合内容等。
3. 实用命令和技巧
3.1 控制台命令
$0引用当前在Elements面板中选中的元素。document.querySelector(selector)通过CSS选择器选择页面元素。console.log(object)在控制台输出对象信息。console.dir(object)以列表形式输出对象属性。console.time(label) 和 console.timeEnd(label)测量代码块的执行时间。
3.2 快捷键
Ctrl FWindows/Linux或 Cmd FMac在开发者工具中搜索。Ctrl PWindows/Linux或 Cmd PMac快速跳转到文件或符号。Ctrl [ 和 Ctrl ]在源代码中向前和向后导航。F8 或 Ctrl \暂停/恢复脚本执行在Sources面板中。F10 或 Ctrl ;步入函数在Sources面板中。F11 或 Ctrl 步出函数在Sources面板中。Shift F11 或 Ctrl Shift 步入下一个函数在Sources面板中。
3.3 网络面板过滤器
is:running只显示正在进行的请求。domain:example.com只显示来自特定域名的请求。has:responseheader只显示具有特定响应头的请求。method:POST只显示POST方法的请求。
3.4 自定义开发者工具
可以通过设置Settings面板自定义开发者工具的外观和行为。可以安装和管理DevTools扩展以扩展其功能。
3.5 使用快捷键面板
在开发者工具中按 ? 可以打开快捷键面板查看所有可用的快捷键。
当然以下是一些关于Google Chrome浏览器的更多实用命令和技巧的补充内容
4. 浏览器操作命令
4.1 收藏网页
按下Ctrl DWindows/Linux或Cmd DMac可以快速收藏当前页面。
4.2 开启无痕模式
按下Ctrl Shift NWindows/Linux或Cmd Shift NMac可以快速打开无痕模式的新窗口。
4.3 复原已关闭的网页
按下Ctrl Shift TWindows/Linux或Cmd Shift TMac可以恢复最近关闭的网页。
4.4 清除缓存
Chrome没有直接的快捷键来清除缓存但你可以通过“设置” - “隐私和安全” - “清除浏览数据”来选择清除缓存。
5. 图片操作命令
5.1 截取页面元素为图片
打开开发者工具F12或Cmd Opt I。在Elements面板中选中你想要截取的元素。打开命令面板Ctrl Shift P或Cmd Shift P。输入Capture node screenshot并回车图片会自动下载。
6. 书签栏操作
6.1 快速访问书签
将经常访问的网页添加到书签栏可以方便快速访问。点击地址栏右边的星星图标即可将当前网页添加到书签栏。
6.2 书签搜索
在书签栏上点击右键选择“显示书签栏”或Ctrl Shift BWindows/Linux或Cmd Shift BMac可以快速显示或隐藏书签栏。在书签栏中按下Ctrl FWindows/Linux或Cmd FMac可以搜索书签。
7. 搜索引擎和地址栏操作
7.1 设置默认搜索引擎
在设置中设置默认的搜索引擎这样在地址栏输入关键词后可以直接跳转到搜索结果页面。
7.2 快捷键搜索
在地址栏输入关键词后按下Tab键可以在当前页面快速搜索相关内容避免切换到搜索引擎页面。
7.3 拖放下载文件
将想要下载的文件从网页上直接拖放到Chrome的标签栏或书签栏中可以实现快速的下载。
8. 标签页操作
8.1 快速关闭标签页
按下Ctrl WWindows/Linux或Cmd WMac可以快速关闭当前标签页。
8.2 通过标签组织网页
将相关的网页放在一个标签组中可以方便地进行切换和管理。可以通过右键菜单或拖拽的方式实现。
