Chrome 调试学习

打开命令菜单Menu

Windows：ctrl + shift + p
MAC：command + shift + p

命令

dock to under 控制台停靠的位置调到下面
undock 控制台独立出来
screenshot 截屏 全屏截屏
capture node screenshot节点截屏

查询Dom树

Windows：ctrl + f
MAC：command + f

查找节点，比如 div

复制样式

选中 右键 copy里有copy css样式

面板

Computed

点show all可以看到从父元素继承过来的属性

点group 可以按照 布局，文字样式 分

Layout

布局，什么 grid，flexbox
使用了弹性布局的都列了出来

点这个小方块，可以切换弹性布局 的 各个属性

Event Listeners

列出来了绑定的事件

Properties

节点的属性

DOM Breakpoints

中断代码的一种方式，
右击某个节点，点击Break on
subtree
这个节点里面的子节点被修改了 js运行暂停
attribute
这个节点的属性被修改了，暂停
node removel
这个节点被删除了，暂停

选择了之后就会出现在右边。

另外一种中断代码的方式：

选择下列监听，选哪个，遇到这个操作了就会中断。

如果用了框架，中断之后会调到框架代码里，不想跳到框架这里，
右边有个Call Stack 右击有个Add script to ignore list,点击可以把这个文件忽略掉。

Accessibility

构建无障碍页面，就是对盲人用的

$0
当前选择的元素
$1
上个选择的标签
console.clear()
把整个控制台清空
·console.time() 的后面写代码 console.timeEnd()
判断代码执行时间
console.table() 里面放对象
可以列成table

观测值变化的过程

在下面框里输入要观测的值

调试

1.在代码里加一个：debugger，然后就会暂停到那一行，然后就可以一步一步调试，后面会显示值。
2.点击行号 可以打断点（breakpoink），点击暂停播放按钮，就会跳转到下一个打断点的那一行。

折叠

如果不想看一部分内容，可以折叠起来。打开Meun，输入enable code folding

监测某个变量

Watch

Network

这里可以筛选资源
勾选Preserve log，可以保留历史记录，就可以显示上一个页面发送的请求
勾选Disable cache 去掉浏览器缓存。

No throtting 节流器， 模拟用户网络环境，3G还是其他。

可以自定义一个节流器。
这个可以设置网络

点击之后，可以选择User agent，不是更改内核，是更改发送的网页头部为下面那串，有时后端会根据前端发来的头部做特殊的处理。

点击这个按钮，下载浏览器和服务器交互数据，让客户下载下来file ，发过来，然后在自己的电脑上导入，就可以模拟客户当时客户访问这个页面的状态了。
网页请求梗概。

Application

Storage
localStorage.setItem(‘name’,‘jack’)
localStorage.getItem(‘name’)
localStorage.clear(‘name’)
document.cookie = ‘username=john’
设置一条cookie