学习笔记：谷歌浏览器开发者模式的使用

前言

没接触后台开发前，一直觉得浏览器的开发者模式就多就是看看网页的源代码。后来在实践中发现，它还有很多好用的地方。好笔记不如烂笔头，还是老老实实记录一波。鉴于目前接触得还比较少，本文将会持续更新。

下面这个是找资料的时候发现的，详细地介绍了开发者模式的Element，Console，Sources，Network四个模块，推荐去看看。
Chrome浏览器F12开发者工具简单使用

笔记正文

1. 开发者模式的打开

开发者模式可以通过以下方式打开：

• 按F12键
• 快捷键Ctrl+Shift+I
• 点鼠标右键，选择”检查“

操作完成后，我们就可以的到以下的界面：

2.开发者工具简介

• Elements：用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。css可以即时修改，即时显示。大大方便了开发者调试页面

• Console：控制台一般用于执行一次性代码，查看JavaScript对象，查看调试日志信息或异常信息。还可以当作Javascript API查看用。例如我想查看console都有哪些方法和属性，我可以直接在Console中输入"console"并执行~

• Sources：该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码，此外最重要的是可以调试JavaScript源代码，可以给JS代码添加断点等。

• Network：网络页面主要用于查看header等与网络连接相关的信息，可以看到前后端交互的一些信息。

2.4 Network

Network这个模块的主要功能如下所示：

个人使用记录：

• 观察前后端信息的信息交互，比如想模仿实现某个功能的时候，可以触发监听事件（鼠标点击、鼠标移动等），然后查看前端给后端发送的请求报文和服务器返回的信息，然后参照这些信息去仿写。

待续……