浏览器的调试与开发
💡 前言： 网页主要是运行在浏览器上， 主要由HTML、CSS、JS三部分组成， 比作一个人的话，HTML是身体、CSS是衣服、JS是动作， 下面主要介绍通过浏览器的调试工具，了解前端在开发过程中，是如何通过浏览器的调试工具进行开发与分析解决问题的
一、从 Chrome 浏览器说起
浏览器的市场天下三分，Chrome，Safari和FireFox，从 2008 年 Chrome 横空出世以来，如今已经一家独大占据了半壁江山
对于大部分人来说，Chrome 可能只是个浏览器，但是对于开发人员来说，它更是一个强大无比的工具，为了方便开发人员调试代码，主流的浏览器都内置了 DevTools， 所以无论你是前端还是后端，掌握 Chrome 的调试技巧意味着效率直接的提高。 Chrome-DevTools 的使用技巧。
1、 打开 Chrome 开发者工具 DevTools
- 在
Chrome菜单中选择更多工具>开发者工具 - 在页面元素上右键点击，选择 “
检查” - 使用 快捷键
Ctrl+Shift+I(Windows) 或Cmd+Opt+I(Mac)
Chrome DevTools - Chrome Developers
2、了解面板
💡 打开 devtool 后，如图，面板上主要有八个主要面板构成， 分别是元素面板、控制台面板、源代码面板、网络面板、应用面板、性能面板、内存面板、安全面板， 下面将会逐一进行介绍
二、学习浏览器面板
- 快速过一下快捷键及Command命令 ( 虽然没什么卵用，但是真的可以起作用 )
- ctrl+shift+D (
⌘ + shift + DMac) 来实现位置的切换 ctrl + [和ctrl + ]可以从当前面板的分别向左和向右切换面板DevTools中的前4个主要的面板，每一个都支持[ctrl] + [f]快捷方式，来进行查询- 元素面板下， 可以通过 h 键隐藏元素、delete删除元素、
[ctrl]+[c]复制元素、[ctrl]+[v]粘贴元素、[ctrl]+[z]撤销操作、按住 control + 箭头移动元素位置、拖动元素到任意位置 - 在
Chrome的调试打开的情况下 按下 [Ctrl]+[P](Mac：[⌘]+[P]) 打开搜索文件、输入 > 进行命令输入， 可以在这里输入 主题 切换面板主题、 输入 screen 进行截图等等
1、 元素面板
使用元素面板可以自由的操作 DOM 和 CSS 来迭代布局和设计页面。
- 检查和调整页面
- 编辑样式
- 编辑
DOM
如图： Elements 面板中有html 整个文档结构， 可以通过点击左上角第一个小鼠标图标，然后移到网页中点击任何你想审查的元素，然后可以在该元素上进行任何属性、HTML的修改、复制、删除、隐藏等等操作、 还可以对该元素进行节点截图、 还可以给DOM添加断点
 查看当前日志 - console调试
- 通过 Live expression 实时表达
- jsx
- 复制代码
var currentWidth
window.addEventListener('scroll',()=>{
currentWidth = window.innerWidth})将如上代码的 currentWidth 输入到小眼睛的里面，再缩放页面，将实时计算 currentWidth 的值，不需要在打印log- 通过 i使用npm插件i 使用npm插件 i使用npm插件i('lodash') $i('moment') , 只需要安装一个 Chrome插件:Console Importer
- 给 console.log 前面加上%c 那么第二个可以加上css样式 ， 如console.log('%c这是红色的打印','color:#f00;')
3、源代码面板
💡 源代码面板下存在 网页、文件系统、替换、内容脚本、代码段几个tab栏。 网页中存放着当前页面的代码、及一些依赖 文件系统和替换中可以添加本地的文件使用浏览器的 Workspaces 进行持久化保存代码、连接本地文件来使用开发者工具实时进行编辑 内容脚本： 存放着浏览器插件的一些执行脚本 代码段： 可以通过添加代码段，存储一些常用的代码、 可以双击执行run、或者command + p 输入 > + ! 快速查找执行
source 面板下主要进行
- 断点调试、调试混淆代码、线上断点调试、可以对网络请求、DOM、JS代码进行断点
- 使用开发者工具的
Workspaces（工作区）进行持久化保存，即时修改代码
💡 正常开发时，我们修改一个样式，经常是找到元素，修改完后， 复制样式，在放回代码中，保存。 使用workspaces 可以直接找到该类，修改样式，自动完成同步，非常理想化的开发体验
4、网络面板
💡 网路面板内常用的有过滤网络请求、控制网速、设置是否缓存、屏蔽网络请求
- 过滤请求 如输入method:GET 、 status-code:200
- 重新发送 XHR 请求 、 就不需要整个页面刷新、需要网络请求类型是 xhr
- 网络接口屏蔽、可以对单一的接口进行屏蔽，如网站中的权限接口屏蔽后， 将可以无权限下，仍然可以浏览网页中部分信息
- 网络请求速度的设置、可以预设网速，可以模拟优化网速慢的情况下的一些开发体验问题
5、应用面板
使用资源面板检查加载的所有资源，包括 IndexedDB 与 Web SQL 数据库，本地和会话存储，cookie ，应用程序缓存，图像，字体和样式表。
管理数据
💡 应用面板中主要是前端的管理数据，包括本地存储 (Local Storage)、会话存储(Session Strorage)、Cookie、Web SQL 、IndexedDB 等、 主要常用的前三个
浏览器提供了三种主要的存储机制，分别是cookie、localStorage和sessionStorage。它们各自有不同的用法和限制，下面对它们进行简要介绍：
- Cookie是一种在客户端存储数据的小型文件，可以在Web服务器和浏览器之间传递。它们最初被设计用于记录用户的会话状态和其他相关数据，并且只能存储少量的数据（通常不超过4KB）。Cookie可以在浏览器关闭后仍然存在，并且可以设置过期时间。Cookie通常用于跟踪用户身份认证信息，例如用户名、密码等。
- localStorage是HTML5提供的新功能，可用于在浏览器中存储持久化数据。与Cookie不同，localStorage存储的数据不会随着每次HTTP请求而被发送到服务器。localStorage可以存储大量的数据（通常限制在5MB左右）并且可以长期保存。它们通常用于存储应用程序的配置信息、用户首选项和其他需要长期存储的数据。可以手动移除或者退出登录时，执行移除操作、 如我们网站中的，判断弹窗只弹一次的操作等（同一主机名关联的所有标签页之间共享）
- sessionStorage也是类似于localStorage的存储机制，但是与之不同的是，sessionStorage只在浏览器会话期间存在。也就是说，一旦用户关闭浏览器窗口或标签页，sessionStorage中保存的数据就会被清除。和localStorage一样，sessionStorage也可以存储大量的数据（通常限制在5MB左右），并且它们在与同一主机名关联的所有标签页之间共享(通过点击新开页面共享，直接新开不共享) ， 我们网站中，路由地址切换的埋点追踪就是通过sessionStorage进行记录
6、性能面板
使用时间轴面板可以通过记录和查看网站声明周期内发生的各种时间来提高页面的运行性能。
7、内存面板
如果需要比时间轴面板提供的更多信息，可以使用“配置”面板，例如跟踪内存泄漏。
JavaScriptCPU 分析器- 内存堆区分析器
8、安全面板
使用安全面板调试混合内容问题，证书问题等等。
