简易修复：Chrome开发者工具调试、JavaScript代码调试与Console日志管理
一、Chrome调试
1、一键重新发起请求
选中NetWork ===> 点击Fetch/XHR ===> 选择要重新发送的请求 ===> 右键选择Replay XHR
2、在控制台快速发起请求
联调或修BUG的场景，针对同样的请求，有时候需要修改入参 重新发起
选中NetWork => Fetch/XHR => CopyAsFetch => 控制台粘贴代码 => 修改参数回车搞定
3、复制JavaScript变量
使用copy函数，将对象作为入参执行即可
4、控制台获取Elements面板选中的元素
通过Elements选择要调试的元素 ===> 控制台直接用 **$0** 访问
5、截取一张全屏的网页
将超出一屏的内容也截下来（准备好要截屏的内容 ===> cmd+shift+p执行command命令 ===> 输入 capture full size screenshot按下回车）
要截取选中的部分元素 ===> 只需要输入 capture node screenshot回车
6、一键展开所有DOM元素
按住option键 + click，用于展开所有的DOM元素，点击到展开的最外层元素
7、控制台引用上一次执行的结果
对某个字符串进行了各种工序，如下，想要知道每一步执行的结果，可能的做法如下：
'fatfish'.split('').reverse().join('') ; // ==> hsiftaf
// 第1步
'fatfish'.split('') // ['f', 'a', 't', 'f', 'i', 's', 'h']
// 第2步
['f', 'a', 't', 'f', 'i', 's', 'h'].reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
// 第3步
['h', 's', 'i', 'f', 't', 'a', 'f'].join('') // hsiftaf
使用$_引用上一次操作的结果，不用每次都复制一遍
// 第1步
'fatfish'.split('') // ['f', 'a', 't', 'f', 'i', 's', 'h']
// 第2步
$_.reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
// 第3步
$_.join('') // hsiftaf
8、$ 和 $$ 选择器
在控制台使用```document.querySelector和document。querySelectorAll选择当前页面的元素是最常见的需求，可以用$和$$替代`
9、$i直接在控制台安装npm包
使用比如dayjs或者Lodash的某个API，又不想去查，可以在控制台测试出来`
1. 安装Console Importer插件（Console Importer就是这么一个插件，用来控制直接安装npm包）
- $i('name')安装npm包
10、Add conditional breakpoint条件断点的妙用
大量数据下，想对符合条件时打断点条件。右键选择Add conditional breakpoint，输入条件
const foods = [
{
name: '????',
price: 10
},
{
name: '????',
price: 15
},
{
name: '????',
price: 20
},
]
foods.forEach((v) => {
console.log(v.name, v.price)
})
二、Debugger断点调试
1. Chrome Devtools 支持的（普通、条件、DOM、URL、Event Listener)，VSCode Debugger 支持的（普通、条件、异常），Debugger 打断点的方式一共有六种
-
普通断点：运行到该处就断住
-
条件断点：运行到该处且表达式为真就断住，比普通断点更灵活；===> 右键单击代码所在行左侧，会出现一个下拉框，可以添加一个条件断点，通过输入条件表达式来断住实现调试
-
DOM 断点：DOM 的子树变动、属性变动、节点删除时断住，可以用来调试引起 DOM 变化的代码 ===> 在 Chrome Devtools 的 Elements 面板的对应元素上右键，选择 break on，可以添加一个 dom 断点
-
URL 断点：URL 匹配某个模式的时候断住，可以用来调试请求相关代码 ===> 在 Chrome Devtools 的 Sources 面板可以添加 XHR 的 url 断点，当 ajax 请求对应 url 时就会断住
-
Event Listener 断点：触发某个事件监听器的时候断住，可以用来调试事件相关代码
-
异常断点：抛出异常被捕获或者未被捕获的时候断住，可以用来调试发生异常的代码 ===> VSCode 的 Debugger 面板勾选 Uncaught Exceptions 和 Caught Exceptions 可以添加异常断点
三、Console打印
1. 常用打印方式
console.log("log"); // ==> 打印内容的通用方法
console.info("info"); // ==> 打印资讯类说明信息
console.debug("debug"); // ==> 在控制台打印一条 "debug" 级别的消息。
console.warn("warn"); // ==> 打印一个警告信息。
console.error("error"); // ==> 打印一条错误信息。
console.clear(); // ==> 用于清除控制台信息
console.dir(); // ==> 打印对象的属性，在控制台中逐级查看对象的详细信息
2. 打印对象属性
打印对象的属性，在控制台中逐级查看对象的详细信息
console.dir();
console.dir(window);
3. 检查内存信息
console.memory ===> 一个属性，而不是方法，使用memory属性用来检查内存信息
4. 其余console属性
// 使用输入参数的名称启动计时器。在给定页面上最多可以同时运行10,000个计时器。
console.time();
// 停止指定的计时器并记录自启动以来经过的时间（以毫秒为单位）
console.timeEnd();
// 如果断言为假，将错误信息写入控制台，如果为真，无显示。
console.assert(true); // undefined
console.assert(false); // 断言失败
// 方法将堆栈跟踪输出到控制台
console.trace();
// console中还可以打印表格
const fruit = ["apples", "oranges", "bananas"];
console.table(fruit);
// 打印Html元素
console.log(document.body);
// console.group()在控制台上创建一个新的分组，随后输出到控制台上的内容都会被添加到一个锁进，表示该内容属于当前分组
// 调用console.groupEnd()之后，当前分组结束
console.group();
console.groupEnd();
// example
console.log("This is the outer level");
console.group();
console.log("Level 2");
console.group();
console.log("Level 3");
console.warn("More of Level 3");
console.groupEnd();
console.log("Back to Level 2");
console.groupEnd();
console.log("Back to the outer Level");