fn+f12:打开开发者模式
Ctrl+Shift+D 将开发者工具切换到底部
可以在console里用console.log进行代码调试
可以输出一些内容，第二种方式就是打断点，
英文 中文
Elements 查看器
Console 控制台
Sourse 源代码/调试器
Network 网络
Performance 性能
Memory 内存
Application 应用
查看器：主要用来做元素的定位
控制台：调试错误等
源代码：前端代码的调试，断点等
网络：测试用来抓包、进行分析进行一些测试问题的定位
性能：前端页面的性能
应用：存储cookie缓存等
恢复，下一步，进入，步出，
ctrl+shift+p:打开命令面板
切换为白色主题
打开命令面板：screenshot—-截图（直接将图片下载到电脑）
- Capture area screenshot（捕获区域截图）：手动框选屏幕上任意矩形区域，只截取该区域内容，常用于精准截取局部界面 。
- Capture full size screenshot（捕获全尺寸截图）：针对可滚动网页，会截取网页完整内容（包括滚动隐藏部分 ），生成一张长图，方便保存网页全貌 。
- Capture node screenshot（捕获节点截图）：需先在 “元素” 面板选中 DOM 节点，截取该节点对应的界面部分（比如某个按钮、某块布局 ），用于聚焦特定网页元素截图 。
- Capture screenshot（捕获截图）：默认截取当前浏览器可视区域（即当前显示的页面部分 ），是最基础的 “所见即所得” 截图 。
一般用Capture area screenshot，捕获一定区域的图片
Capture full size screenshot(长截图)
Elements:
左边这个箭头是选择工具，可以选择一个node节点，配合Capture node screenshot就可以截取这个节点的图片,比如登录
这个按钮是可以切换界面的规格，比如手机端，还是电脑端
查询dom树快捷键：ctrl+f
可以在Console中通过一个函数根据id来查找对应节点
回车之后就会查找到这个节点
有半部分就可以增加一些样式
styles:做样式区分
Computed:不做样式区分
Console:快捷键 ctrl+shift+j 直接打开Console
在这一开始我们定义一个变量 let a=1
我们再输入a 的时候a 就
$_:返回上一次返回的结果
测试：
经常用到的调试语句：console.log()
console.lerror()
console.warn()
console.clear()
console.group()
这个地方可以对错误-警告等进行过滤
js中，想要调试代码可以用debugger来进行debug,或者直接打短点
点击这个可以进入下一个断点
