Chrome Dev Tools使用方法

火车上闲来无事找了本计网的书读了一半多，之后想到浏览器调试工具这么有用的技能点居然至今还没有点，所以顺便去点了一下。都是很琐碎且不成体系的内容，当做工具书传到这里方便查阅。

• 涉及内容：
  Chrome Dev Tools （其实我使用的是Edge DevTools，但没有多少区别）和一点点Javascript
• 前置知识：
  默认读者点了HTML和CSS的技能点，但没点也没关系，毕竟下面不涉及
• 参考资料：
  Chrome Dev Tools精讲
  Web 全文档

重要快捷键

F12 打开浏览器调试 （相当于浏览器 菜单>更多工具>开发者工具）
Ctrl + Shift + P 打开命令框

> let a = 1
< undefined
> let b = 2
< undefined
> a + b
< 3
> $_
< 3

$_ 返回上一个语句的执行结果
$0 返回上一个选择的DOM节点 ($1, $2… )
shift + Enter 在控制台单次执行中换行
（下述控制台输出若需要多行，大部分是通过本快捷键换行再一次性执行的）

元素 (Elements)

显示html代码与样式、布局、时间侦听器等。
关于DOM，详见：
DOM 概述 - Web API | MDN (mozilla.org)

控制台 (Console)

• 几种输出样式
  console.log(233)
console.error(233)
console.warn(233)

• 清屏
  console.clear()

• 分组输出（中间需用 Shift + Enter 换行）

console.group('tg')
console.log(1)
console.log(2)
console.groupEnd('tg')

• 计时（中间需用 Shift + Enter 换行）

console.time()
let s = 0;
for (let i = 0; i <= 999; i++) {
	s += i;
}
console.timeEnd()

• 将宿主打印为table

console.table([{id:1, name:'java'},{id:2,name:'python'}])

调试

1. debug模式
   javascript代码：

debugger;

相当于在此处打断点，并启动DEBUG模式，触发断点时暂停。
DEBUG模式中可以逐步执行等操作，类似于其他常见的调试器。还可以“监视”某个对象的值。

2. DOM断点
   还有右键DOM节点之后，设置“在更改时”等条件触发端点的功能，在“元素 (Elements)”选项卡中通过右键相应节点等方法进行设置，在此省略。

网络 (Network)

在网络选项卡中，红色按钮（红点）行：

• （红点）记录或停止记录网络日志
• 清除网络日志
• 筛选栏开关
• 搜索
• 保留日志：在刷新、跳转到其他网页后保留跳转前的日志（eg. 表单提交字段？返回值？）
• 节流器（无限制，…）：模拟用户网络状态，对请求的速率做限制，而非一直是网络很顺畅的状态；可自定义（下行速率、上行速率、延迟）
• Wifi图标：其他网络设置（如user agent(android, ie, …）
• import/export HAR file：类似于日志，可以用于导出或导入某个访问过程

应用程序 (Application)

如Local Storage, Session Storage, Cookie等都在这里显示

localStorage.setItem('name', 'jack')
localStorage.getItem('name')
localStorage.clear('name')
document.cookie = "username=john"