Chrome 浏览器常用快捷键
Google Chrome 浏览器提供了许多快捷键，以帮助用户更高效地浏览网页和使用浏览器功能。以下是一些常用的Chrome快捷键：
标签页和窗口管理
-
Ctrl + T(Windows/Linux) /Cmd + T(Mac): 打开新标签页 -
Ctrl + N(Windows/Linux) /Cmd + N(Mac): 打开新窗口 -
Ctrl + Shift + N(Windows/Linux) /Cmd + Shift + N(Mac): 打开隐身模式窗口 -
Ctrl + W(Windows/Linux) /Cmd + W(Mac): 关闭当前标签页 -
Ctrl + Shift + T(Windows/Linux) /Cmd + Shift + T(Mac): 重新打开最后关闭的标签页 -
Ctrl + Tab或Ctrl + PgDown(Windows/Linux) /Cmd + Option + Right Arrow(Mac): 切换到下一个标签页 -
Ctrl + Shift + Tab或Ctrl + PgUp(Windows/Linux) /Cmd + Option + Left Arrow(Mac): 切换到上一个标签页 -
Ctrl + 1到Ctrl + 8(Windows/Linux) /Cmd + 1到Cmd + 8(Mac): 跳转到指定位置的标签页 -
Ctrl + 9(Windows/Linux) /Cmd + 9(Mac): 跳转到最后一个标签页
网页浏览
-
Alt + Left Arrow(Windows/Linux) /Cmd + [(Mac): 后退 -
Alt + Right Arrow(Windows/Linux) /Cmd + ](Mac): 前进 -
F5或Ctrl + R(Windows/Linux) /Cmd + R(Mac): 刷新当前页面 -
Ctrl + F5或Ctrl + Shift + R(Windows/Linux) /Cmd + Shift + R(Mac): 强制刷新当前页面（忽略缓存） -
Esc: 停止加载当前页面 -
Ctrl + L(Windows/Linux) /Cmd + L(Mac): 聚焦到地址栏 -
Ctrl + D(Windows/Linux) /Cmd + D(Mac): 将当前网页添加到书签 -
Ctrl + J(Windows/Linux) /Cmd + J(Mac): 打开下载页面 -
Ctrl + H(Windows/Linux) /Cmd + H(Mac): 打开历史记录页面
Chrome工具
-
Ctrl + Shift + B(Windows/Linux) /Cmd + Shift + B(Mac): 显示或隐藏书签栏 -
Ctrl + Shift + J(Windows/Linux) /Cmd + Option + J(Mac): 打开开发者工具 -
Ctrl + Shift + Delete(Windows/Linux) /Cmd + Shift + Delete(Mac): 打开“清除浏览数据”对话框 -
F12: 打开开发者工具
文本编辑
- Ctrl + Shift + V (Windows/Linux) / Cmd + Shift + V (Mac): 粘贴为纯文本
检查元素
使用浏览器“检查”功能
-
使用右键菜单：
- 在页面上，将鼠标指针移动到你想要检查的元素上。
- 右键点击该元素，这将打开一个上下文菜单。
- 在菜单中选择“检查”或“Inspect Element”选项。这个选项的确切名称可能因浏览器而异。
- 查看开发者工具：
其他查询方式
- 文本查询
-
CTRL+F(Windows) -
***mand+F(MAC)
-
- css选择器
- Xpath
- Console
- inspect(element)
控制台
-
$_上一条语句 -
$0上一个选择的DOM节点（$1, $2…）
常用 Log 方法
- 级别
console.log(abc)
console.error(abc)
console.warn(abc)
- 分组
console.group('group A')
console.log(a)
console.log(b)
console.groupEnd('group A')
- 计时
console.time()
let sum 0;
for(let i=0; i<=999; i++){
sum +=i;}
console.timeEnd()
- 表格
console.table([{number:1,name:'John'},{number:2,name:'Sarah'}])
断点调试
如何设置断点
-
转到Sources面板：
在开发者工具中，切换到“Sources”面板。这里显示了网站的文件结构，包括所有加载的JavaScript文件。 -
找到要调试的代码文件：
在“Sources”面板中，浏览或搜索到你想要调试的JavaScript文件，并打开它。 -
设置断点：
在代码中找到你想要暂停执行的行。点击行号旁边的空白区域可以设置一个断点。设置断点后，该行号旁边会出现一个蓝色（或红色，具体颜色取决于浏览器）的标记。
断点调试过程
-
执行代码：
当你的网页运行并执行到断点所在的代码行时，浏览器会自动暂停执行。 -
检查变量和状态：
在代码暂停执行时，你可以查看和修改作用域中的变量值，检查调用栈，以及查看当前执行环境的状态。 -
控制执行流程：
使用开发者工具中的调试控制按钮来控制代码的执行。你可以逐行执行（Step Over），进入函数（Step Into），跳出函数（Step Out），或继续执行直到下一个断点（Resume）。 -
观察行为和输出：
在逐步执行代码时，观察应用的行为和控制台的输出，以帮助理解代码的执行流程和发现问题。
断点类型
- 普通断点：在特定的代码行上设置，当执行到该行时暂停。
- 条件断点：只有当满足特定条件时才会在代码行上暂停。
- DOM断点：当选定的DOM元素发生变化时暂停。
- XHR断点：当发起特定的XMLHttpRequest（或更广泛的网络请求）时暂停。
- 事件监听器断点：当特定事件被触发时暂停。
VSCode 调试
- 下载安装 VSCode 。
- 下载安装 node.js 。
node.js 用来执行 JS 代码 和 安装第三方库。 - VSCode 安装 Live Server 插件，右键点击 html 文件可以打开默认浏览器来调试。
- 也可以
Ctrl + Shift + P打开命令面板，输入Debug: Open Link，再输入地址如http://127.0.0.1:5500/index.html， 之后可以直接在 VSCode 中调试。
参考
chrome_dev_tools
