chrome前端页面调试+手机WEB调试

1.前端调试工具：chrome浏览器
2.调试页面

3.调试方法：在要调试的页面右键，选择检查即可打开调试工具(F12)
4.调试功能
4.1 Element 标签页： 用于查看和编辑当前页面中的 HTML 和 CSS 元素。
4.2 Console 标签页：用于显示脚本中所输出的调试信息，或运行测试脚本
4.3 Source 标签页：用于查看和调试当前页面所加载的脚本的源文件。
4.4 Network 标签页：用于查看 HTTP 请求的详细信息，如请求头、响应头及返回内容等。
4.5 Application标签页：查看应用存储的数据;可以检查和修改IndexedDB与Web SQL数据库，本地和会话存储，cookie，应用程序缓存，图像，字体和样式表。 点击一次按钮即可清除所有存储、数据库、缓存和服务工作线程。
4.5.1 Local Storage : 如果你在开发过程中使用了local storage来存储键值对(KVPs)，那么你就可以通过Local Storage窗格来检查、新增、修改、删除这个键值对。
4.5.2 Application Cache : 你可以使用Application Cache窗格去查看通过Application Cache API创建的
资源。
5.手机web调试
Chrome DevTools模拟手机调试
微信web开发者工具

6.虚拟接口Fastmock
FastMock 是一个线上接口调试工具，它主要服务于开发者在接口开发、测试、文档编写等环节。通过 FastMock，开发者可以快速地搭建接口Mock环境，模拟各种接口调用，而无需搭建实际的后端服务。这为开发者提供了一个方便、快捷的接口开发和测试环境。
7.axios
cmd命令安装或者webstorm控制台安装：npm install axios
Axios是一个基于promise的HTTP库，可以用在浏览器和node.js 中。
7.1 特性:
7.1.1 从浏览器中创建 XMLHttpRequests
7.1.2 从 node.js 创建 http 请求
7.1.3 支持 Promise API
7.1.4 拦截请求和响应
7.1.5 转换请求数据和响应数据
7.1.6 取消请求
7.1.7 自动转换 JSON 数据
7.1.8 客户端支持防御 XSRF
8.本地会话存储
客户端数据存储
8.1 cookie
HTTP Cookie简称cookie,在HTTP请求发送Set-Cookie HTTP头作为响应的一部分。通过name=value的形式存储。
优点：兼容性最好，几乎所有的浏览器都支持
缺点：大小限制非常小，而且每次发送 HTTP 请求，请求头里会带着 Cookie 的信息，会带来安全问题
8.2 基于 HTML5 规范的 Web Storage
两种客户端存储方法
8.2.1 sessionStorage会话存储
优点：临时，关闭页面标签自动回收，不同的两个标签页面的 sessionStorage 是不共享的
缺点：临时，因为是临时所以不能存储持久化的东西
8.2.2localStorage本地存储
优点：兼容性中等，几乎现代的浏览器都支持，没有过期时间限制，永久存储，永不失效，即只要浏览器不卸载，数据就会一直存在，除非手动删除
缺点：存在大小限制，IE9,IE10 不支持
问题聚合
9.为什么需要调试?
9.1发现和修复错误：调试帮助您找到程序中的错误或bug，这些错误可能是由于语法错误、逻辑错误或其他类型的编程缺陷引起的。
9.2 理解程序行为：通过调试，您可以观察程序的执行流程和状态，这有助于理解程序为何以某种方式运行，以及为何不按预期运行。
9.3 性能优化：调试还可以帮助您识别并优化代码的性能问题，如内存泄漏、渲染阻塞或慢查询等。
9.4 用户体验改进：通过调试，您可以确保Web应用在不同的设备和浏览器上都能提供良好的用户体验。
Chrome提供了一套强大的调试工具，这些工具可以帮助开发者有效地进行调试：
5.开发者工具：Chrome的开发者工具是一个集成的工作区，提供了一个用于检查和调试网页的界面。它包括 Elements、Console、Network、Performance、Memory 等面板。
10.console.log和alert的区别?
console.log更适合开发者和调试器使用，而alert则更适合向最终用户展示关键信息。在实际的开发工作中，应当避免过度使用alert，因为它可能会对用户体验造成负面影响。
11.调用post请求接口和get请求接口在控制台Network 显示的不同?
11.1 请求方法：
POST请求通常用于提交数据到服务器，如表单数据或JSON对象。
GET请求通常用于从服务器检索数据，不会修改服务器上的资源。 Network面板中，每个请求的标题会显示其使用的HTTP方法，POST和GET请求的方法会被明确地列出。
11.2 请求内容
POST请求，请求体（即发送到服务器的数据）通常不会在Network面板的请求标题中显示，但可以在请求的Headers部分找到Content-Type，以及可能的内容长度等信息。要查看具体的数据，需要查看请求的Body部分，这里可能需要展开视图或查看 raw 视图。
GET请求，请求体通常不存在，因此不会在Network面板中显示请求体。
POST请求通常不会被浏览器缓存，每个请求都是独立的。
实践结果
创建虚拟接口

在cookie、sessionStorage、localStorage中分别存储自己姓名
控制台：

本地存储：

会话存储:

cookie: