From：https://blog.csdn.net/zgh0711/article/details/79083819
chromeShortcuts：https://github.com/dianjie/chromeShortcuts
Web 前端开发网：http://www.css88.com
Chrome 开发者工具中文文档：http://www.css88.com/doc/chrome-devtools
Chrome 开发者工具(DevTools)中所有快捷方式列表：https://www.w3cschool.cn/chromedevtools/awij1hjn.html
Chrome浏览器for mac实用快捷键大全：https://www.jb51.net/softjc/603407.html
Chrome浏览器快捷键，‘装逼’必会：http://www.360doc.com/content/17/1218/11/31784658_714160454.shtml
Google 快捷键（需要科学上网）：
https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/shortcuts
https://support.google.com/chrome/answer/157179
Vimium|谷歌浏览器快捷键扩展：www.egouz.com/topics/17168.html
Chrome cVim 快捷键速查表：https://guopuke.github.io/post/chrome-cvim-快捷键速查表
Chrome 天天都在用，但是基本都是用鼠标操作，最近感觉有些操作用鼠标非常不方便，所以就找了下它的快捷键，这些都是在官方文档上面找到的，因为看官方文档是需要翻墙的，大部分时候不太方便，所以就把它记录下来，下次有需要的时候好查。
1. 标签页和窗口快捷键
| 快捷键 | 说明 |
|---|---|
| Ctrl + n | 打开新窗口。 |
| Ctrl + shift + n | 在隐身模式下打开新窗口。 |
| Ctrl + t | 打开新的标签页，并跳转到该标签页。（常用） |
| Ctrl + Shift + t | 重新打开最后关闭的标签页，并跳转到该标签页 |
| Ctrl + Tab 或 Ctrl + Pgdn | 跳转到下一个打开的标签页，如果当前为最后一个标签页，则跳转到第一个标签页。 |
| Ctrl + Shift + Tab 或 Ctrl + Pgup |
跳转到上一个打开的标签页。（常用） |
| Alt + ← | 打开历史记录中的上一页。（常用） |
| Alt + → | 打开历史记录中的下一页。 |
| Ctrl + 1 到 Ctrl + 8 | 跳转到指定索引号的标签页（常用）。切换标签页1234678代表1234678页，9代表是最后一页面 |
| Ctrl + 9 | 跳转到最后一个标签页。（常用） |
| Alt + home | 在当前标签页中打开主页。 |
| Ctrl + w 或 Ctrl + F4 | 关闭当前标签页。（常用） |
| Ctrl + Shift + w | 关闭所有已打开的标签页并关闭当前 Chrome 浏览器（如果开多个浏览器则只关闭当前的浏览器）。 |
| Alt + 空格键 + n | 最小化当前窗口 |
| Alt + 空格键 + x | 最大化当前窗口 |
| Ctrl + Shift + q 或 Alt + F4 | 关闭所有 Chrome 浏览器。 |
2. 功能快捷键
| 快捷键 | 操作 |
|---|---|
| Alt + f、Alt + e 或 F10 | 打开右上角的菜单栏。F10 只是选择菜单栏的图标，还需要键入回车或空格后，才能完全打开。 |
| Ctrl + Shift + b | 显示或隐藏书签栏 |
| Ctrl + Shift + o | 打开书签管理器 |
| Ctrl + h | 在新标签页中打开”历史记录”页。（常用） |
| Ctrl + j | 在新标签页中打开”下载内容”页。（常用） |
| Shift + Esc | 打开 Chrome 任务管理器 |
| Shift + Alt + t | 将焦点放置在 Chrome 工具栏中的第一项上 |
| F6 | 在地址栏、书签栏（若显示）和页面内容之间向前切换焦点。（常用） |
| Shift + F6 | 在地址栏、书签栏（若显示）和页面内容之间向后切换焦点 |
| Ctrl + f 或 F3 | 打开查找栏搜索当前网页。（常用） |
| Ctrl + g | 跳转到与查找栏中搜索字词相匹配的下一条内容 |
| Ctrl + Shift + g | 跳转到与查找栏中搜索字词相匹配的上一条内容 |
| F12 或 Ctrl + Shift + j | 打开 “开发者工具”。（常用） |
| Ctrl + Shift + Delete | 打开“清除浏览数据”选项 |
| F1 | 在新标签页中打开 Chrome 帮助中心 |
| Ctrl + Shift + m | 打开 Chrome 账户登陆对话框，使用其他帐号登录或以访客身份浏览。 |
| Alt + Shift + i | 打开反馈表单 |
3. 地址栏快捷键
在地址栏中可使用以下快捷键：
| 快捷键 | 操作 |
|---|---|
| 输入搜索字词并按 Enter 键 | 使用默认搜索引擎进行搜索 |
| 输入搜索引擎名称并按 Tab 键 | 使用其他搜索引擎进行搜索 |
| 输入网站名称并按 Ctrl + Enter 键 | 为网站名称添加 www. 和 .com，并在当前标签页中打开该网站 |
| 输入搜索字词并按 Alt + Enter 键 | 打开新的标签页并执行 Google 搜索 |
| Ctrl + l、Alt + d 或 F6 | 跳转到地址栏 |
| Ctrl + k 或 Ctrl + e | 从页面中的任意位置搜索 |
| 按向下箭头键以突出显示相应内容，然后按 Shift + Delete | 从地址栏中移除联想查询内容 |
4. 网页快捷键
| 快捷键 | 操作 |
|---|---|
| Ctrl + p | 打开选项以打印当前网页 |
| Ctrl + s | 打开选项以保存当前网页 |
| F5 或 Ctrl + r | 重新加载当前网页。（常用） |
| Shift + F5 或 Ctrl + Shift + r | 重新加载当前网页（忽略缓存的内容） |
| Esc | 停止加载网页 |
| Tab | 浏览下一个可点击项 |
| Shift + Tab | 浏览上一个可点击项 |
| 按住 Ctrl + o 键并选择文件 | 使用 Chrome 打开计算机中的文件 |
| Ctrl + u | 显示当前网页的 HTML 源代码【不可修改】。（常用） |
| Ctrl + d | 打开【将当前网页保存为书签】的对话框。（常用） |
| Ctrl + Shift + d | 打开【将所有打开的标签页以书签的形式保存在新文件夹】的对话框。 |
| F11 | 开启或关闭全屏模式。（常用） |
| Ctrl 和 + | 放大网页上的所有内容 |
| Ctrl 和 - | 缩小网页上的所有内容 |
| Ctrl + 0 ( 数字0 ) | 将网页上的所有内容恢复到默认大小 |
| 空格键 或 PgDn | 向下滚动网页，一次一个屏幕。（常用） |
| Shift + 空格键 或 PgUp | 向上滚动网页，一次一个屏幕 |
| home | 转到网页顶部。（常用） |
| end | 转到网页底部。 |
| Ctrl + o | 打开选择文件框。（一般上传文件时用来选择文件） |
| 按住 Shift 并滚动鼠标滚轮 | 在网页上水平滚动。 |
| Ctrl + 向左箭头键 | 将光标移到文本字段中的上一个字词前面 |
| Ctrl + 向右箭头键 | 将光标移到文本字段中的上一个字词后面 |
| Ctrl + Backspace | 删除文本字段中的上一个字词 |
| Alt + n | 将焦点移到通知上 |
| Alt + Shift + a | 在通知中允许 |
| Alt + Shift + d | 在通知中拒绝 |
| Alt + Home | 在当前标签页中打开主页 |
5. 鼠标快捷键
以下快捷键要求您使用鼠标：
| 快捷键 | 操作 |
|---|---|
| 将网页链接拖拽到标签栏的空白位置 | 在当前标签页中打开链接（仅限鼠标） |
| 按住 Ctrl 并点击网页链接 | 在新的标签页中打开网页。（常用） |
| 按住 Alt 并点击网页链接 | 下载链接目前的网页。 |
| 按住 Shift 并点击网页链接 | 在新窗口中打开网页。 |
| 按住 Ctrl + Shift 键的同时点击链接 | 打开链接，并跳转到该链接 |
| （仅使用鼠标） | 打开链接，并跳转到该链接 |
| 按住 Shift 键的同时点击链接 | 在新窗口中打开链接 |
| 将标签页拖出标签栏 | 在新窗口中打开标签页（仅使用鼠标） |
| 将标签页拖到现有窗口中 | 将标签页移至当前窗口（仅限鼠标） |
| 拖动标签页的同时按 Esc | 将标签页移回其原始位置 |
| 将相应网址拖动到书签栏中 | 将当前网页保存为书签 |
| 右键点击“后退”箭头 返回 或“前进”箭头 下一个，或者左键点击（并按住鼠标左键不放）“后退”箭头 返回 或“前进”箭头 下一个 | 显示浏览记录 |
| 双击标签栏的空白区域 | 在最大化模式和窗口模式间切换 |
| 按住 Ctrl 键的同时向上滚动鼠标滚轮 | 放大网页上的所有内容 |
| 按住 Ctrl 键的同时向下滚动鼠标滚轮 | 缩小网页上的所有内容 |
以上就是 Chrome 中的所有快捷键，但其实有很多都是不怎么用的，只需要记住几个平时经常用的就行了。
6. Chrome 开发者工具(DevTools)中所有快捷方式列表
Chrome DevTools提供了一些内置的快捷键，开发者利用这些快捷键可以节省常工作中很多日的开发时间。下面列出了每个快捷键在Windows/Linux及Mac中的对应键。其中一些快捷键对于DevTools全局可用，而另一些则只能在单个面板中使用。
查看 开发者快捷键，可以 F12 -> 设置 -> shortcuts 查看。如图：
打开 DevTools
要访问 DevTools，在谷歌 Chrome 浏览器里的任何网页或应用程序，你可以使用这些选项之一：
- 打开 Chrome 菜单
，在浏览器窗口的右上角，然后选择工具 > 开发工具。 - 在任何页面元素右键单击并选择检查元素。
| Windows | Linux | Mac |
|---|---|---|
| 打开开发者工具 | F12, Ctrl + Shift + I | Cmd + Opt + I |
| 切换审查元素模式与浏览器窗口模式 | Ctrl + Shift + C | Cmd + Shift + C |
| 打开 DevTools 将面板放到控制台 | Ctrl + Shift + J | Cmd + Opt + J |
| 检查（取消停靠第一个，然后按） | Ctrl + Shift + I | Cmd + Opt + I |
所有面板
| Windows | Linux | Mac |
|---|---|---|
| 显示设置对话框 | ?, F1 | ? |
| 下一个面板 | Ctrl + ] | Cmd + ] |
| 前一个面板 | Ctrl + [ | Cmd + [ |
| 最后一个面板 | Ctrl + Alt + [ | Cmd + Opt+ [ |
| 第一个面板 | Ctrl + Alt + ] | Cmd + Opt+ ] |
| 更改停靠位置 | Ctrl + Shift + D | Cmd+ Shift + D |
| 打开设备(Device)模式 | Ctrl + Shift + M | Cmd + Shift + M |
| 切换控制台/关闭设置对话框 | Esc | Esc |
| 刷新页面 | F5, Ctrl + R | Cmd + R |
| 忽略缓存内容刷新页面 | Ctrl + F5, Ctrl + Shift + R | Cmd + Shift + R |
| 在选中文件或者面板中进行文字搜索 | Ctrl + F | Cmd +F |
| 在所有源中进行文字搜索 | Ctrl +Shift + F | Cmd + Opt + F |
| 根据文件名搜索（除了时间轴面板Timeline | Ctrl + O , Ctrl + O | Cmd + O , Cmd + O |
| 放大（当DevTools获得焦点时） | Ctrl + + | Shift + + |
| 缩小 | Ctrl + - | Shift + - |
| 恢复默认文字大小 | Ctrl + 0 | Shift + 0 |
Element 面板
| Windows | Linux | Mac |
|---|---|---|
| 撤销更改 | Ctrl + Z | Cmd +Z |
| 重做更改 | Ctrl + Y | Cmd + Y , Cmd + Shift + Z |
| 导航 | Up, Down | Up , Down |
| 展开/折叠节点 | Right , Left | Right , Left |
| 展开节点 | Single-click on arrow | Single-click on arrow |
| 展开/折叠节点及其所有子集 | Ctrl + Alt + Click on arrow icon | Opt + Click on arrow icon |
| 编辑属性 | Enter , Double-click on attribute | Enter , Double-click on attribute |
| 隐藏元素 | H | H |
| 切换编辑为HTML | F2 |
右击一个元素你可以：
- 改变元素状态(:active,:hover,:focus,:visited)；
- 在元素上设置断点:(修改子元素，修改属性，删除节点)
- 清空控制台
侧边栏样式
| Windows | Linux | Mac |
|---|---|---|
| 打开直尺 | 单击 | 单击 |
| 插入新的属性 | 在空白空间单击 | 在空白空间单击 |
| 转至样式规则属性声明中源行 | Ctrl + 点击属性 | Cmd + 点击属性 |
| 转制属性值声明源行 | Ctrl + 点击属性值 | Cmd + 点击属性值 |
| 获取颜色定义值 | Shift + 点击拾色器对话框 | Shift + 点击拾色器对话框 |
| 编辑前一个/后一个 | Tab ,Shift + Tab | Tab ,Shift + Tab |
| 增加/减小值 | Up , Down | Up , Down |
| 以间隔 10 增加/减小值 | Shift + Up , Shift + Down | Shift +Up , Shift + Down |
| 以间隔 10 增加/减小值 | PgUp , PgDown | PgUp , PgDown |
| 以间隔 100 增加/减小值 | Shift + PgUp , Shift + PgDown | Shift + PgUp , Shift + PgDown |
| 以间隔 0.1 增加/减小值 | Alt + Up , Alt + Down | Opt + Up , Opt + Down |
- 模拟元素的伪状态（:active, :hover, :focus, :visited）
- 添加新的样式选择
Source 面板
| Windows | Linux | Mac |
|---|---|---|
| 暂停/恢复脚本执行 | F8 , Ctrl + \ | F8 , Cmd + \ |
| 跳过下一个函数的调用 | F10 , Ctrl +' | F10 , Cmd + ' |
| 进入下一个函数的调用 | F11 , Ctrl +; | F11 , Cmd + ; |
| 跳出当前函数 | Shift + F11 , Ctrl + Shift + ; | Shift + F11 ,Cmd + Shift + ; |
| 选择下一个调用框架 | Ctrl + . | Opt + . |
| 选择之前的调用框架 | Ctrl + , | Opt + , |
| 切换断点条件 | 点击行号 , Ctrl +B | 点击行号 , Cmd + B |
| 编辑断点条件 | 右击行号 | 击行号 |
| 删除单组单词 | Alt + Delete | Opt + Delete |
| 注释一行或注释选定文本 | trl + / | Cmd + / |
| 保存本地修改 | Ctrl + S | Cmd + S |
| 跳转到行 | Ctrl +G | Ctrl + G |
| 以文件名搜索 | Ctrl +O | Cmd + O |
| 跳转至行号 | Ctrl +P + 行号 | Cmd + P + 行号 |
| 跳转至列 | Ctrl + O + 数字 + 数字 | Cmd + O +数字 + 数字 |
| 进入成员 | Ctrl + Shift + O | Cmd + Shift +O |
| 关闭活动的标签 | Alt + W | Opt + W |
| 运行代码片段 | Ctrl + Enter | Cmd + Enter |
不能暂停异常
暂停所有异常（包括那些被捕获 try / catch 块内）
暂停未捕获的异常（通常是你想要的那个）
代码编辑器快捷键
| Windows | Linux | Mac |
|---|---|---|
| 匹配括号 | Ctrl +M | |
| 跳转至某行 | Ctrl + P + 行号 | Cmd + P + 行号 |
| 跳转至某列 | Ctrl +O + 数字 + 数字 | Cmd + O + 数字 + 数字 |
| 修改为注释 | Ctrl + / | Cmd + / |
| 找到下一次出现的地方 | Ctrl + D | Cmd + D |
| 撤销最后的选择 | Ctrl + U | Cmd + U |
TimeLine (时间轴)面板
| Windows | Linux | Mac |
|---|---|---|
| 开始/停止记录 | Ctrl +E | Cmd + E |
| 保存时间线数据 | Ctrl +S | Cmd + S |
| 载入时间线数据 | Ctrl +O | Cmd + O |
Profiles 面板
| Windows | Linux | Mac |
|---|---|---|
| 开始/停止记录 | Ctrl + E | Cmd + E |
Console(控制台)
| Windows | Linux | Mac |
|---|---|---|
| 接受提示命令 | 键盘右 | 键盘右 |
| 前一条命令行 | 键盘上 | 键盘上 |
| 下一条命令行 | 键盘下 | 键盘下 |
| 聚焦控制台 | Ctrl +</kbd> | <kbd> Ctrl</kbd> +<kbd> |
|
| 清除控制台 | Ctrl + L | Cmd + K , Opt + L |
| 多行输入 | Shift + Enter | Ctrl +Return |
| 执行 | Enter | Return |
控制台右击：
- XMLHttpRequest logging: 打开查看 XHR 日志
- Preserve log 在导航栏上
- Filter: 隐藏或显示脚本文件的消息
- Clear console: 清除控制台
截屏
| Windows | Linux | Mac |
|---|---|---|
| 放大缩小 | Alt + Scroll ,Ctrl +Click and drag with two fingers | Opt + Scroll ,Cmd + Click and drag with two fingers |
| 检查元素的工具 | Ctrl + Shift + C | Cmd + Shift + C |
调试
Console(控制台)
| Windows | Linux | Mac |
|---|---|---|
| 放大缩小 | Shift + Scroll | Shift + Scroll |
Chrome 的其他快捷键
这里有一些其他的 Chrome 快捷键，这些都浏览器通用的快捷键，并不是 DevTools 内的特有的。查看适用于Windows，Mac 和 Linux的Chrome 的所有快捷键。
下面是一些浏览器中非常有用的额外的快捷方式(附：所有Windows/Linux/Mac快捷方式)
| Windows / Linux | Mac | |
|---|---|---|
| 查找下一个 | Ctrl + G | Cmd + G |
| 查找上一个 | Ctrl + Shift + G | Cmd + Shift + G |
| 打开一个隐身模式的新窗口 | Ctrl + Shift + N | Cmd + Shift + N |
| 切换是否显示书签栏 | Ctrl + Shift + B | Cmd + Shift + B |
| 打开历史记录页面 | Ctrl + H | Cmd + Y |
| 打开下载记录页面 | Ctrl + J | Cmd + Shift + J |
| 打开浏览器任务管理器 | Shift + ESC | Shift + ESC |
| 标签页历史下一页 | Alt + Right | Opt + Right |
| 标签页历史上一页 | Backspace, Alt + Left | Backspace, Opt + Left |
| 选中地址栏 | F6, Ctrl + L, Alt + D | Cmd + L, Opt + D |
| 地址栏放置一个?供你输入内容进行搜索(使用你设置的默认搜索引擎) | Ctrl + K, Ctrl + E | Cmd + K, Cmd + E |
Chrome 调试快捷键
From：https://blog.csdn.net/gogletech/article/details/78028119
Console()
- Ctrl + L : 清除控制台消息
- Enter: 执行代码或者命令
Debugger(调试面板)
- F8 or Ctrl + \: 暂停/继续
- F10 or Ctrl + ': 单步执行
- F11 or Ctrl +;: 单步进入
- Shift + F11 or Ctrl + Shift+;: 单步退出
- Ctrl +./Ctrl+, : 上一帧/下一帧(译为框架怪怪的)
- Ctrl +Shift+E: 被选中代码在控制台中打印出console信息(非常实用)
- Ctrl + Shift + A: 添加到debugger的watch里面,可以关注你选中内容的变化
- Ctrl + B: 打断点/取消断点(很实用)
Timeline Panel(时间轴面板)
- Ctrl + E:开始
- Ctrl + S:保存时间轴数据
- Ctrl + O:加载时间轴数据
一. 先来认识一下这些按钮
先来看这张图最上头的一行是一个功能菜单，每一个菜单都有它相应的功能和使用方法，依次从左往右来看
1.箭头按钮：用于在页面选择一个元素来审查和查看它的相关信息，当我们在Elements这个按钮页面下点击某个Dom元素时，箭头按钮会变成选择状态
2.设备图标：点击它可以切换到不同的终端进行开发模式，移动端和pc端的一个切换，可以选择不同的移动终端设备，同时可以选择不同的尺寸比例，chrome浏览器的模拟移动设备和真实的设备相差不大，是非常好的选择
3.Elements 功能标签页：用来查看，修改页面上的元素，包括DOM标签，以及css样式的查看，修改，还有相关盒模型的图形信息，下图我们可以看到当我鼠标选择id 为lg_tar的div元素时，右侧的css样式对应的会展示出此id 的样式信息，此时可以在右侧进行一个修改，修改即可在页面上生效， 灰色的element.style样式同样可以进行添加和书写，唯一的区别是，在这里添加的样式是添加到了该元素内部，实现方式即：该div元素的style属性，这个页面的功能很强大，在我们做了相关的页面后，修改样式是一块很重要的工作，细微的差距都需要调整，但是不可能说做到每修改一点即编译一遍代码，再刷新浏览器查看效果，这样很低效，一次性在浏览器中修改之后，再到代码中进行修改
- 对应的样式
- 盒模型信息
同时，当我们浏览网站看到某些特别炫酷的效果和难做的样式时候，打开这个功能，我们即可看到别人是如何实现的，学会它这知识就是你的了，仔细钻研也会有意想不到的收获
4.Console控制台：用于打印和输出相关的命令信息，其实console控制台除了我们熟知的报错，打印console.log信息外，还有很多相关的功能，下面简单介绍几个：
a: 一些对页面数据的指令操作，比如打断点正好执行到获取的数据上，由于数据都是层层嵌套的对象，这个时候查看里面的key/value不是很方便，即可用这个指令开查看，obj的json string 格式的key/value，我们对于数据里面有哪些字段和属性即可一目了然
其他功能
b: 除了console.log还有其他相关的指令可用
console也有相关的API
5.Sources js资源页面：这个页面内我们可以找到当然浏览器页面中的js 源文件，方便我们查看和调试，在我还没有走出校园时候，我经常看一些大站的js代码，那时候其实基本都看不懂，但是最起码可以看看人家的代码风格，人家的命名方式，所有的代码都是压缩之后的代码，我们可以点击下面的{}大括号按钮将代码转成可读格式
Sources Panel 的左侧分别是 Sources 和 Content scripts和Snippets
- 对应的源代码
- 格式化后的代码
关于打断点调试的内容，下面介绍，先来说一些，其他平时基本没人用但是很有用的小点，比如当我们想不起某个方法的具体使用时候，会打开控制台随意写一些测试代码，或者想测试一下刚刚写的方法是否会出现期待的样子，但是控制台一打回车本想换行但是却执行刚写的半截代码，所以推荐使用Sources下面的左侧的Sinppets代码片段按钮，这时候点击创建一个新的片段文件，写完测试代码后把鼠标放在新建文件上run，再结合控制台查看相关信息（新建了一个名叫：app.js的片段代码，在你的项目环境页面内，该片段可执行项目内的方法）
- 自己书写的片段
Content scripts 是 Chrome 的一种扩展程序，它是按照扩展的ID来组织的，这些文件也是嵌入在页面中的资源，这类文件可以读写和操作我们的资源，需要调试这些扩展文件，则可以在这个目录下打开相关文件调试，但是几乎我们的项目还没有相关的扩展文件，所以啥也看不到，平时也不需要关心这块
6.Network 网络请求标签页：可以看到所有的资源请求，包括网络请求，图片资源，html,css，js文件等请求，可以根据需求筛选请求项，一般多用于网络请求的查看和分析，分析后端接口是否正确传输，获取的数据是否准确，请求头，请求参数的查看
- 所有的资源
以上我选择了All，就会把该页面所有资源文件请求下来，如果只选择XHR 异步请求资源，则我们可以分析相关的请求信息
- 请求的相关信息
打开一个Ajax异步请求，可以看到它的请求头信息，是一个POST请求，参数有哪些，还可以预览它的返回的结果数据，这些数据的使用和查看有利于我们很好的和后端工程师们联调数据，也方便我们前端更直观的分析数据
- 预览请求的数据
7.Timeline标签页可以显示JS执行时间、页面元素渲染时间，不做过多介绍
8.Profiles标签页可以查看CPU执行时间与内存占用，不做过多介绍
9.Resources标签页会列出所有的资源，以及HTML5的Database和LocalStore等，你可以对存储的内容编辑和删除 不做过多介绍
10.Security标签页 可以告诉你这个网站的安全性，查看有效的证书等
11.Audits标签页 可以帮你分析页面性能，有助于优化前端页面，分析后得到的报告
- 分析结果
二.Sources资源页面的断点调试
1.如何调试：
调试js代码，肯定是我们常用的功能，那么如何打断点，找到要调试的文件，然后在内容源代码左侧的代码标记行处点击即可打上一个断点
2.断点与 js代码修改
看下面这张图，我在一个名为toggleTab的方法下打了两个断点，当开始执行我们的点击切换tab行为后，代码会在执行的断点出停下来，并把相关的数据展示一部分，此时可以在已经执行过得代码处，把鼠标放上去，即可查看相关的具体数据信息，同时我们可以使用右侧的功能键进行调试，右侧最上面一排分别是：暂停/继续、单步执行(F10快捷键)、单步跳入此执行块(F11快捷键)、单步跳出此执行块、禁用/启用所有断点。下面是各种具体的功能区
- 在代码中打断点
在当前的代码执行区域，在调试中如果发现需要修改的地方，也是可以立即修改的，修改后保存即可生效，这样就免去了再到代码中去书写，再刷新回看了
临时修改
3.快速进入调试的方法
当我们的代码执行到某个程序块方法处，这个方法上可能你并没有设置相关的断点，此时你可以F11进入此程序块，但是往往我们的项目都是经过很多源代码封装好的方法，有时候进入后，会走很多底层的封装方法，需要很多步骤才能真正进入这个函数块，此时将鼠标放在此函数上，会出现相关提示，会告诉你在该文件的哪一行代码处，点击即可直接看到这个函数，然后临时打上断点，按F10或者点击右上角的第二个按钮即可直接进入此函数的断点处
4.调试的功能区域
每一个功能区，都有它相关的左右，先来看一张图，它都有哪些功能
Call Stack调用栈：当断点执行到某一程序块处停下来后，右侧调试区的 Call Stack 会显示当前断点所处的方法调用栈，从上到下由最新调用处依次往下排列，Call Stack 列表的下方是Scope Variables列表可以查看此时局部变量和全局变量的值。图中可以看出，我们最先走了toggleTab这个方法，然后走到了一个更新对象的方法上，当前调用在哪里，箭头会帮你指向哪里，同时我们可以点击，调用栈列表上的任意一处，即可回头再去看看代码
但是若你想从新从某个调用方法出执行，可以右键Restart Frame， 断点就会跳到此处开头重新执行，Scope 中的变量值也会依据代码从新更改，这样就可以回退来从新调试，错过的调试也可以回过头来反复查看
Breakpoints关于断点：所有当前js的断点都会展示在这个区域，你可以点击按钮用来“去掉/加上”此处断点，也可以点击下方的代码表达式，调到相应的程序代码处，来查看
XHR Breakpoints
在XHR Breakpoints处，点击右侧的+号，可以添加请求的URL，一旦 XHR 调用触发时就会在 request.send() 的地方中断
DOM Breakpoints:
可以给你的DOM元素设置断点，有时候真的需要监听和查看某个元素的变化情况，赋值情况，但是我们并是不太关心哪一段代码对它做的修改，只想看看它的变化情况，那么可以给它来个监听事件，这个时候DOM Breakpoints中会如图
当要给DOM添加断点的时候，会出现选择项分别是如下三种修改1.子节点修改2.自身属性修改3.自身节点被删除。选中之后，Sources Panel 中右侧的 DOM Breakpoints 列表中就会出现该 DOM 断点。一旦执行到要对该 DOM 做相应修改时，代码就会在那里停下来
Event listener Breakpoints
最后Event Listener 列表，这里列出了各种可能的事件类型。勾选对应的事件类型，当触发了该类型的事件的 JavaScript 代码时就会自动中断
三.Post man你值得拥有的网络请求神器
在我们的开发过程中，后端的接口都是由发起AJAX请求而获取到的相关数据，但是很多情况是我们的业务还没有做到那块时，后端的同学接口都已经准备好了，但是为了便于后期的工作，将接口请求的数据模拟访问，然后对接口联调很重要，也很方便，因为我们不可能把每个请求代码都写到文件里编译好了再去浏览器内查看，这时候可以安装一个post man网络请求插件，在谷歌应用商店下载，需要翻墙
该扩展程序使用非常简单，功能同时也非常强大，输入你的请求，选择好请求的method，需要请求参数的挨个填好，send之后，就可以看到返回的数据，这个小工具很利于我们的开发
15 条实用命令，帮你打开 Chrome 浏览器的隐藏功能
作为主力浏览器，支持相当丰富的第三方扩展，其实浏览器本身也内置了大量实用的命令。通过下面整理的 Chrome 命令，将会让用户实现快速查询信息的目的，比如：查询浏览器的用户配置文件存储位置、实验阶段的功能选项，甚至是集中显示浏览器支持的所有的命令的详细列表。下面，我们甄选了几个实用的 Chrome 命令：
显示当前版本
浏览器地址栏输入并打开 chrome://version，页面显示了当前浏览器版本的详细信息（比如我安装的 v66.0.3359.45 Dev 版本），本地操作系统类型，JavaScript、Flash 软件的具体版本和文件存放位置。
chrome://version/
这一页面中有两处实用的信息：
命令行和个人资料路径
命令行。以我的显示信息为例子："C:UsersXXAppDataLocalGoogleChromeApplicationchrome.exe" --flag-switches-begin --disable-accelerated-video-decode --enable-features=MaterialDesignBookmarks,OverlayScrollbar --flag-switches-end，引号部分为 Chrome 本地安装的目标位置，引号后面的内容则显示用户在功能特性界面自定义修改过的内容，比如我开启了 Material Design 风格的书签页面、自定义修改了浏览器本身的滚动条样式表现。
个人资料路径，这个文件路径就是大家经常说的用户配置文件。下面截图显示的路径为 C:UsersXXAppDataLocalGoogleChromeUser DataDefault，Default 文件夹就是默认的 Chrome 配置文件夹，如果用户创建了多个 Chrome 用户，会有以 Profile N （N 代表从 1 开始的数字）为方式命名的文件夹。在重装电脑之前将个人资料路径的文件拷贝一份，下次重装电脑间接实现快速备份 Chrome 浏览器的个人配置信息。
实验项目
输入 chrome://flags，这个命令将打开 Chrome 浏览器的功能特性界面，我们可用来启用或者关闭某些 Chrome 的实验功能。flags 页面按照 Available、Unavailable 两种标签页显示项目，如果用户明确知道需要查找的实验项目，可以使用顶部的搜索栏，或者在地址栏直接输入 chrome://flags/# ( 项目名称 ) ，比如我要查找 overlay-scrollbars 项，那么只需要输入 chrome://flags/#overlay-scrollbars ，即可直接定位到目标选项。
chrome://flags
经过粗略统计，flags 实验项目拥有近 200 多项，里面包括了对滚动条、Omnibar 地址栏、书签管理器样式、导入 / 导出保存的密码信息等内容，大部分选项提供了 Disable 禁止、Enable 开启或者 Default 默认三种状态。
Disable、Enable、Default 三种状态
目前我对其中的三个选项手动进行了设置，分别是打开了 Overlay Scrollbars 和 Enable Material Design bookmarks（实现改变滚动条和书签的表现样式），关闭了 Hardware-accelerated video decode（为了解决与某个 Chrome 扩展有冲突的问题）。
设置页面
输入 chrome://settings 将快速打开 Chrome 浏览器的设置页面，页面的内容分类划分为基础和高级设置选项，基础项细分为其他人、外观、搜索引擎、默认浏览器、启动时，高级项有隐私设置和安全性、密码和表单、语言、下载内容、打印、无障碍、系统、重置并清理，最后一个就是「关于 Chrome」的选项。
chrome://settings
每个细分选项通过类似 chrome://settings/xx 命令来快速定位，下面是对应命令：
Chrome 设置页面的命令扩展程序页面
输入 chrome://extensions，这个命令方便取代以往进入两三级菜单才能打开浏览器已安装的扩展程序页面（需打开「菜单 - 更多工具 - 扩展程序」），扩展页面的常规功能包括了打开 / 关闭开发者模式、手动加载 / 更新扩展、搜索安装的扩展程序、手动关闭 / 打开 / 删除某个扩展。另外，页面侧边栏还隐藏了键盘快捷键的页面，用户同样可在地址栏输入 chrome://extensions/shortcuts 快速打开，集中管理用户为每个扩展设置的键盘快捷键组合，以及设置是否在全局或者只在 Chrome 本身激活快捷键。
chrome://extensions 显示网络事件信息
输入 chrome://net-internals 后打开一个显示网络相关信息的页面，这个命令主要用来捕获浏览器生成的网络事件，默认会显示当前连接的网络服务事件，可导出数据、查看 DNS 主机解析缓存。
chrome://net-internals 查看组件信息
输入 chrome://components，这个命令显示 Chrome 浏览器所有用到的组件，在这里可以查看常用的 Flash 组件的版本，并检查是否有更新。
chrome://components 查看哪些网页被禁止翻译
输入 chrome://translate-internals，打开浏览器内置翻译功能的页面，显示了页面是什么语言的情况下不提示翻译、哪些页面不再提示翻译、以及哪些语言组合是提示翻译，用户还可以手动关闭哪些以前设置过的翻译选项。
chrome://translate-internals 退出和重启浏览器
注意，首先这个不要着急输入这两条命令 chrome://quit、chrome://restart，它们分别可以实现退出和重启浏览器，其中重启命令间接实现了一键重启浏览器的目的。
查看所有的命令列表
用户如果还对如何找到这些浏览器命令感到困惑的话，输入 chrome://about 命令，将集中列出 Chrome 浏览器支持的所有的命令，分为了 Chrome URLs 以及 Debug 用途的命令。
chrome://about
其他常用的 Chrome 命令还包括了：
chrome://downloads：直接访问 Chrome 浏览器网页下载的文件。
chrome://history：直接访问 Chrome 浏览器访问的历史记录。
chrome://apps：访问 Chrome 浏览器中安装的应用的界面，可以对应用进行删除管理。
chrome://bookmarks：直接访问 Chrome 浏览器中我们收藏的标签。
chrome://dns：显示浏览器预抓取的主机名列表，让用户随时了解 DNS 状态。
chrome://devices：查看连接电脑的设备，比如传统打印机中，可设置添加打印机到 Google 云打印的入口。
另类的命令扩展：Steward
Steward 号称是 Chrome 浏览器里类 Alfred 启动器，用户可以使用 off |all（禁用所有扩展）、on 扩展名称（启用某个扩展）、bk 网址名称（屏蔽某个网站）、todo 内容（建立代办事项）等快捷命令来快速实现某些功能，甚至利用扩展内置的 workflow 设置来创建属于自己的工作流。在这里简要介绍 Steward 内置的 chrome 命令，在调用扩展的搜索栏输入 chrome，Steward 将会自动显示目前支持的命令，用户无需记住完整的浏览器命令。
Steward 支持打开 Chrome 命令
扩展阅读：在 Chrome 里用「Alfred」是什么体验？Steward 把效率启动器带进了浏览器
用好 Chrome 命令来提升效率
Chrome 内置的命令支持快速打开某些页面，无需繁琐地打开多级菜单（快捷键也能提升打开效率）才能进入诸如扩展、书签管理器等页面。同时，实用的命令可以实现一些隐藏的功能，比如查询个人配置文件的路径、打开仍处于实验阶段的新功能、记录页面的网络信息等。用户掌握好这些常用的浏览器命令，将有助于提升配置 Chrome 功能的效率。