chrome快捷键

打开新的标签页，并跳转到该标签页 Ctrl + t
重新打开最后关闭的标签页，并跳转到该标签页 Ctrl + Shift + t
打开浏览器console控制台 Ctrl + Shift + j
跳转到特定标签页 Ctrl + 1 到 Ctrl + 8
跳转到最后一个标签页 Ctrl + 9
打开"菜单" Alt + e 或 F10
在新标签页中打开"历史记录"页 Ctrl + h
在新标签页中打开"下载内容"页 Ctrl + j
将焦点放置在 Chrome 工具栏中的第一项上 Shift + Alt + t
在地址栏、书签栏（若显示）和页面内容之间向（前）后切换焦点 (Shift) + F6
使用默认搜索引擎进行搜索输入搜索字词并按 Enter 键
使用其他搜索引擎进行搜索输入搜索引擎名称并按 Tab 键
开启或关闭全屏模式 F11
向下滚动网页，一次一个屏幕空格键或 PgDn
向上滚动网页，一次一个屏幕 Shift + 空格键或 PgUp
先打开控制台网页截屏 Ctrl + shift + p 执行Command命令截取全屏输入Capture full size screenshot 按下回车截取选中的部分元素 Capture node screenshot
一键展开所有DOM元素按住opt键 + click（需要展开的最外层元素）

chrome断点调试

快捷键

F8 Pause/Resume script execution 认可说法二

说法一：下一个断点
说法二：暂停/恢复脚本执行 程序执行到下一断点停止
说法三：普通调试，又叫单步调试。F12找到Sources后，在左侧文件夹中找到你想运行的文件，然后点击pause script execution按钮再刷新页面（F5），就可以进入单步调试**断点调试**

Ctrl + ' 或 F10 Step over next function call 认可说法三和五

说法一：执行到下一步的函数调用
说法二：执行当前断点所在行，跳到下一行
说法三：步过函数，实际表现是不遇到函数时，执行下一步。遇到函数时，不进入函数直接执行下一步。即把函数当做一条语句执行不向内展开
说法四：程序逐步调试，每点击一次，就会按照代码执行顺序，向下执行一句代码。
说法五：单步执行，遇到子函数并不进去，将子函数执行完并将其作为一个单步

Ctrl + ;或 F11 Step into next function call 认可说法二和四

说法一：进入当前函数
说法二：步入函数，表现是不遇到函数时，执行下一步。遇到到函数时，进入函数执行上下文。
说法三：我们就可以进入函数体内，在单步调试过程中，当经过函数调用时，点击Step into就可以进入该函数体内
说法四：单步执行，遇到子函数就进去继续单步执行（和step一样）

Ctrl + Shift + ;或 Shift + F11 Step out of current function 直接跳出当前的函数，返回父级函数

F9 step 单步执行注意：遇到子函数会进去继续单步执行

Ctrl +F8 deactivate breakpoints 关闭/开启所有断点（不会取消）

Pause on exceptions：开启（关闭）异常情况自动断点设置。

JavaScript Debugging 各面板功能

Breakpoints 存储所有断点
call stack（调用栈）里查看历史断点调用栈
Threads 在网站有 web workers 或者 service workers 线程的时候，需要分别查看主线程和这两个线程的 context ，可以在 Threads 面板切换。

XHR/fetch breakpoints 请求断点 Event listener breakpoints 事件断点
Exception breakpoints 异常断点在你希望捕捉到报异常的代码的时候
Scope 查看断点内部的作用范围

在断点暂停时，可以在 Scope 面板里查看和编辑局部、闭包和全局范围内的属性和变量的值。不会显示不可枚举的属性。
双击一个属性值可以输入新的值。

Watch

在 debug 过程中，如果希望重点观察某些变量的值（而不是在 Scope 面板里层层点开），可以加入 Watch 面板。Watch 面板里的值会在执行代码时自动刷新。
'+' 图标创建新的 expression；右边是刷新图标，手动刷新变量的值；鼠标移动到变量上，在右侧会出现删除图标。

其他断点和调试技巧

code debugger

在需要断点的位置输入debugger刷新浏览器运行的项目

Function breakpoints

在你希望 debug 一个具体的函数时使用。功能与在此函数的第一行代码出打断点是一样的。

操作：在代码里插入 debug(functionName) 或者在浏览器控制台调用。

代码里插入：

function sum(a,b){

     let result = a+b;  // 浏览器在这里暂停

     return result;

 };

 debug  (sum);  // 参数是一个函数，不是字符串

 sum();

控制台调用：

控制台输入debug(sum)，点击 enter，再触发一次 sum 操作，就进入断点页面。

要注意确保目标函数与 debug 函数在同一个作用域里面，否则会报 ReferenceError：

Conditional line-of-code breakpoints

在你希望有条件地打点的时候使用 conditional line-of-code 方法。

操作： f12 -> Sources Tab -> 双击打开需要打点的文件 -> 找到需要打点的那行代码 -> 右键行数，选择 Add conditional breakpoint -> 在出现的对话框中输入条件 -> 点击 enter，出现橙色标志，打点完成。

DOM change breakpoints

在文档节点发生变化的时候暂停。

操作： f12 -> Elements Tab -> 点击希望监测的节点 -> 右击节点 -> 在出现的菜单上选择 Break on -> 按需要选择 Subtree modifications,Attribute modifications, Node removal。

dom 改变断点类型：

● Subtree modifications ，在当前节点的子节点发生增加、移除、内容改变、交换顺序的情况的时候生效。其他情况例如当前节点发生了变化，或者子节点的属性发生了变化都不会触发。

● **Attributes modifications ，在当前节点的属性发生变化，例如增加属性、移除属性、属性值改变的时候触发。****
**

● Node Removal ，在当前节点被移除的时候触发。

Run all code up to a certain line

如果你在 debug 一个很长的函数，里面包含了很多与问题无关的代码，需要区分出来。

首先在函数里设置第一个断点，执行至暂停，然后，有三种方法 debug ：

1、使用 step into function 逐行解析查看结果，会浪费不少时间；

2、根据结果判断哪些是无用的代码，越过它们再设置下一个断点，使用 resume script 执行到下一个断点；

3、根据结果判断哪些是无用的代码，在下一个需要暂停的地方，右键行数，选择 “continue to here”，浏览器会直接解析到那一行并暂停，推荐的方法。

暂时弃用功能期待后续完善后补充。。。。。

Restart Frame
在调试函数的过程中，想回到函数的开头重新 debug 的时候，可以在 Call Stack 面板中对应的函数上右键，选择 Restart Frame 而无需在开头打断点 。Call Stack 面板里是断点函数以及所涉及到的其他函数，最顶端的函数是当前的断点函数。
Blackbox script
在 debug 过程中，可以选择忽略部分脚本，不在 Call Stack 中显示，在 step into function 的时候也不会进入被忽略的脚本

chrome高级调试技巧

juejin.cn/post/708513…

为何有一些请求右键没有Replay XHR？因为发起的类型不是XHR

chrome探索记录