浏览器常见调试方法
开始之前
B/S架构的重要一个构成部分，浏览器，也是前端开发人员最常接触的。知道如何进行浏览器调试是一环非常重要且必要的工作
开发过程中时长因为页面卡顿，白屏，加载慢，页面报错等问题而浪费大量时间，因此掌握浏览器调试技巧是前端开发人员必备技能之一。
# 打开开发者工具
在浏览器页面上
F12打开开发者工具Ctrl + Shift + I打开开发者工具- 右键选择 检查(N)
# 常用开发者工具介绍
开发者工具最常用的功能模块：
Elements元素Console控制台Sources源代码Network网络Application应用
# 1、Elements
Elements 标签页是开发者工具中最常用的标签页之一，它允许你查看和编辑页面的结构，
查看网页页面的所有元素，修改元素的代码与属性。用于查看修改元素的属性、CSS 属性、监听事件以及断点等等
# 查看元素的代码
点击左上角的箭头图标（或按快捷键 Ctrl+Shift+C）进入选择元素模式，从页面中选择需要查看的元素，可以在开发者工具元素（Elements）一栏中定位到该元素源代码的具体位置。
查看元素的属性：定位到元素的源代码之后，可以从源代码中读出改元素的属性。
# 修改元素的代码与属性
点击元素，然后查看右键菜单，可以看到 chrome 提供的可对元素进行的操作：包括编辑元素代码（Edit as HTML）、修改属性（Add attribute、Edit attribute）等。选择 Edit as HTML 选项时，元素进入编辑模式，可以对元素的代码进行任意的修改。
这个修改也仅对当前的页面渲染生效，不会修改服务器的源代码，故而这个功能也是作为调试页面效果而使用。
# 查看元素的监听事件
元素的右边栏的 Event Listener 页面，可以查看到该元素的所有监听事件。在开发中，尤其是维护其他人的代码时，会出现不了解元素对应的监听事件，这个时候，可以在这个页面中找到。这个页面不仅能看到对应的事件函数，还可以定位该函数所在的 JS 文件以及在该文件中的具体位置（行数）。
# 2、Console
Console 控制台主要用于调试代码，查看日志信息，以及执行一些调试任务。
# 执行 JS 语句
在控制台中，可以执行任意 JS 代码，包括浏览器的 API 以及自定义的 JS 代码。
# 查看控制台日志
当网页的 JS 代码中使用了 console.log()函数时，该函数输出的日志信息会在控制台中显示。日志信息一般在开发调试时启用，而当正式上线后，一般会将该函数去掉
在测试界面时，如果出现 Bug 问题，一般情况下会在这栏展示，查看调试日志信息或者异常错误信息，然后前端开发工程师根据具体问题来调试，进行解决问题。
在代码里面执行 console.log()，打印日志。
刷新页面进行相应操作即可看见打印的日志信息
console 除了 log 还有其他一些用法
- console.info 用于输出提示性信息
- console.error 用于输出错误信息
- console.warn 用于输出警示信息
- console.debug 用于输出调试信息
# 3、Sources（源代码）
# 查看源文件
在源代码（Source）页面可以查看到当前网页的所有源文件 包括：样式、css、图片、js 文件等。在左侧栏中可以看到源文件以树结构进行展示。
# 添加断点
在源代码左边有行号，点击对应行的行号，就好给改行添加上一个断点（再次点击可删除断点）。右键点击断点，在弹出的菜单中选择 Edit breakpoint 可以给该断的添加中断条件。
# 中断调试
添加断点后，当 JS 代码运行到断点时会中断（对于添加了中断条件的断点在符合条件时中断），此时可以将光标放在变量上查看变量的
也可以在右边的侧栏上查看：
在右侧变量上方，有继续运行、单步跳过等按钮，可以在当前断点后，逐行运行代码，或者直接让其继续运行。
进行断点调试可以清楚的知道上下文的代码执行情况
# 4、Network（网络）
该标签页下可以看见当前页面的所有网络请求
图片中第二排功能点
- 红色圆点：控制是否开启网络监控
- 带斜杠的圆圈：清楚网络请求列表
- 漏斗：控制请求查找和筛选区域的显示隐藏
- 放大镜：查找网络请求
- preserver log: 保留网络请求，如果在关闭的情况下，浏览器页面刷新，网络请求记录会丢失，勾选该选项，可以保留网络请求记录
- disable cache: 禁用缓存
- online: 模拟离线状态
# 5、Application（应用）
这里主要讲
Application下面的storage中的local storage和session storage和Cookie
# local storage
local storage 用于存储持久化的本地数据，只要不手动删除,这些数据在浏览器关闭后仍然存在。
# session storage
session storage 有效期是仅保持在当前页面，关闭当前会话页或者浏览器后就会失效
# Cookie
现在已经比较少用于当做本地缓存了
cookie 的有效期是可以设置的，默认的情况下是关闭浏览器后失效