简介
本文主要记录部分web开发，一些浏览器devTools调试的常用的知识记录;
使用环境
- window10
- Google Chrome: 版本 105.0.5195.127（正式版本） （64 位）
DevTools 常用的面板介绍
在页面 按F12 或者 右键->检查，呼出 "devTools"面板；
Elements
DOM节点树形式查看页面的元素，能够对渲染出来的元素进行所见所得的操作；
Console
- 用来记录页面在执行过程中的信息(一般通过各种console语句来实现);
- 用来当作 shell 窗口来执行脚本以及页面文档，DevTools等进行交互;
Network
在面板中可以查看通过网络来请求来的资源的详细信息以及资源的耗时等;
Sources
主要用来调试页面中的javascript
Application
记录网页加载的所有资源，包括存储信息，缓存讯息以及页面用的图片，字体，脚本，样式等信息。
使用技巧
Elements
按住 alt + 左键点击展开后面所有节点
右键节点菜单介绍
在标签属性上双击，进入编辑状态
让节点的状态停留在(hover,focus,....等)方便调试样式：
Elements右侧的 Styles,Computed,layout,Event Listeners
styles：作用在节点上的样式；样式的优先级权重，从上到下作用的(最前面的权重优先级越高)存在样式覆盖；
computed: 元素的最终样式结果(包括样式属性，盒子模型)。
Event Listeners: 元素事件监听；
Properties: 所有属性集合；
常用的Elements操作：
强大的Elements 能非常方便的 操作以及获取到对应的元素，获取到选择器进行样式设置或者js交互操作。
Console
console分为log,info,error,warn,...等 error：错误，红色字体，如果log多了。error颜色醒目， warn：警告，黄色字体， log || info: 日志打印，常用输出看结果。
console输出的几种方式：
通过 console silderbar 查看过滤查看对应级别的输出;
有时候项目在开发的时候console特别多，通过查看对应级别的输出 + 设置明显的输出语句：
console还可以作为代码编辑器进行脚本执行：
在控制台 shift + enter 换行
可以输入location,window...等BOM相关的
在Console中导入CND库或者npm包。
有时候想在控制台尝试一下npm包或者库的api。可以到对应库的官网打开控制台尝试，这样很麻烦。
- 安装控制台导入插件;插件chrome地址： console-importer
github地址： github console-importer
github源码包使用方式：下载下来，执行npm i 和 npm run build,然后在浏览器上 更多工具--扩展程序 --- 然后导入加载已解压的扩展程序dist目录，即可!! - $i(name);安装包或者导入脚本；
由于部分网站有严格的内容安全策略限制(GitHub),会执行失败!
内容安全策略 (CSP);
PS: 要在http或https下执行，如果以资源方式file协议打开的控制台，会执行失败。
NetWork
网络请求相关的(包括，资源js,css,img,字体，媒体等资源)
使用 copy()，copy value, copy object 复制打印出来的数据；
在控制台中打印出来的数据结构很复杂，怎么复制出来？
Replay XHR 重新请求一次
复制request请求体信息和响应信息；
PS: ctrl + a 全选 ctrl + c复制下
Sources
webstorm断点调试 请看 -->>传送门： webstorm 断点
Sources面板调试
在代码中 debugger,代码运行到这里会进入断点模式
** 断点调试面板：Step Over Step Into的使用与其他debug一样的，具体可查看webstorm断点简单的使用：**
Application
平常我用来查看 Storage信息
