学习笔记：谷歌浏览器开发者模式的使用
前言
没接触后台开发前，一直觉得浏览器的开发者模式就多就是看看网页的源代码。后来在实践中发现，它还有很多好用的地方。好笔记不如烂笔头，还是老老实实记录一波。鉴于目前接触得还比较少，本文将会持续更新。
下面这个是找资料的时候发现的，详细地介绍了开发者模式的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这个模块的主要功能如下所示：
个人使用记录：
- 观察前后端信息的信息交互，比如想模仿实现某个功能的时候，可以触发监听事件（鼠标点击、鼠标移动等），然后查看前端给后端发送的请求报文和服务器返回的信息，然后参照这些信息去仿写。
待续……
学习笔记：谷歌浏览器开发者模式的使用相关推荐
- 设计模式学习笔记——备忘录(Memento)模式
设计模式学习笔记--备忘录(Memento)模式 @(设计模式)[设计模式, 备忘录模式, memento] 设计模式学习笔记备忘录Memento模式 基本介绍 备忘录案例 类图 实现代码 Memen ...
- 设计模式学习笔记——解释器(Interpreter)模式
设计模式学习笔记--解释器(Interpreter)模式 @(设计模式)[设计模式, 解释器模式, Interpreter] 设计模式学习笔记解释器Interpreter模式 基本介绍 解释器案例 类 ...
- 设计模式学习笔记——命令(Command)模式
设计模式学习笔记--命令(Command)模式 @(设计模式)[设计模式, 命令模式, command] 设计模式学习笔记命令Command模式 基本介绍 命令案例 类图 实现代码 Command接口 ...
- 设计模式学习笔记——代理(Proxy)模式
设计模式学习笔记--代理(Proxy)模式 @(设计模式)[设计模式, 代理模式, proxy] 设计模式学习笔记代理Proxy模式 基本介绍 代理案例 类图 实现代码 Printable接口 Pri ...
- 设计模式学习笔记——状态(State)模式框架
设计模式学习笔记--状态(State)模式框架 @(设计模式)[设计模式, 状态模式, State] 设计模式学习笔记状态State模式框架 基本介绍 状态案例 类图 实现代码 State接口 Day ...
- 设计模式学习笔记——观察者(Observer)模式
设计模式学习笔记--观察者(Observer)模式 @(设计模式)[设计模式, 观察者模式, Observer] 设计模式学习笔记观察者Observer模式 基本介绍 观察者案例 类图 实现代码 Ob ...
- 设计模式学习笔记——外观(Facade)模式
设计模式学习笔记--外观(Facade)模式 @(设计模式)[设计模式, 外观模式, facade] 设计模式学习笔记外观Facade模式 基本介绍 外观案例 类图 实现代码 Database类 ma ...
- 设计模式学习笔记——访问者(Visitor)模式
设计模式学习笔记--访问者(Visitor)模式 @(设计模式)[设计模式, 访问者模式, visitor] 设计模式学习笔记访问者Visitor模式 基本介绍 访问者案例 类图 实现代码 Visit ...
- 设计模式学习笔记——装饰(Decorator)模式
设计模式学习笔记--装饰(Decorator)模式 @(设计模式)[设计模式, 装饰模式, decorator] 设计模式学习笔记装饰Decorator模式 基本介绍 装饰案例 类图 实现代码 Dis ...
- 设计模式学习笔记——组合(Composite)模式
设计模式学习笔记--组合(Composite)模式 @(设计模式)[设计模式, 组合模式, composite] 设计模式学习笔记组合Composite模式 基本介绍 组合案例 类图 实现代码 Ent ...
最新文章
- 反向代理post参数怎么传输_都9102年了，GET和POST的区别掌握了没有？
- rabbitmq Centos6.8安装及基础命令
- C++11 运行时变量类型判断
- 安装SQL2012出现[HKLM\Software\Microsoft\Fusion!EnableLog] (DWORD)设置为 1
- php打印出函数的内容吗,PHP打印函数集合详解以及PHP打印函数对比详解（精）
- Flume-ng 高可用搭建-与测试
- 你知道 Java 类是如何被加载的吗？
- win32_bios 的对象编辑器无法保存对象_怎样创建Femap对象
- php防撞库,叉车防撞预警系统的必要性
- 2018年网络规划设计师上午真题及答案解析
- mysql profiling详解_使用mysql profiling功能剖析单条查询
- java 重复代码优化_利用注解 + 反射消除重复代码（Java项目）
- 洛谷P3379 【模板】最近公共祖先（LCA）
- aws 部署python lambda_awslambda-为Lambda工具部署Python项目。-Philipp Gorczak Getting started Usage...
- VBA Mid()函数 截取字符串 - VBA函数学习笔记（一）
- 第六届“强网杯”全国网络安全挑战赛-青少年专项赛
- 安装office2013报安装程序找不到OneNote.zh-cn、安装源不存在
- php怎么实现收藏夹功能,前端--收藏功能的实现
- （股票，数字货币）年收益率，标准差和夏普率的计算
- 推荐一款专业制作手机铃声的音乐剪辑器？