Google浏览器开发者工具组件使用详解（五）

Google浏览器开发者工具组件使用详解

前言

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考

一、Elements(元素)

二、Network(网络)

一条http请求，发起来有以下几种
1、浏览器发起的
可以在Initiator看到Other，或者JS文件以及相应的请求步骤
2、开发者自己发起的

右键https包名可以选择
1.在资源面板打开，进行js文件重写
2.选择一个新的窗口打开该请求
3.清空浏览器缓存
4.清空浏览器cookie
5.将包另存为本地

三、Sources(资源)

Overrides重写
可以对当前网站的js文件进行本地替换并且继续运行；
Snippets
可以添加JS文件，并且影响到当前网站，也可以接触当前网站的浏览器环境进行JS代码
Pause on caught execptions：捕获异常，出错则断在异常处，提示某处异常
Watch，监听变量的值，可以添加局部和全局变量，进行监听
监听当前作用域变量，windows是全局变量，
Call Stack 堆栈 - 重点
Breakpoints 断点列表，存放显示所有文件的打断点处

通过Snippets 添加了新的脚本，Ctrl+entry运行之后，可以在控制台调用JS的function

四、Application(本地网站缓存)

Storage 数据库
可以看到本地的 local storage
Session storage
Web SQL
Cookies，当前网站的cookie变化，也可编辑

Cache 缓存

五、断点

DOM断点，浏览器对象断点，当渲染时浏览器对象/元素属性发生改变则断住；

DOM事件断点，在Elements面板/事件监听/click or mousemove等等 事件触发，可以点进去看源代码；

XHR请求断点：sources/XHR fetch 断点
复制xhr包的部分url(路径名称)，在sources面板添加XHR/fetch断点，根据url的部分路径进行添加

代码行断点

全局事件断点(浏览器事件)：sources/事件监听断点/各种断点

异常捕获断点

六、方法栈

Call Stack方法栈是记录/显示一个方法的调用流程，当前方法会显示在最上层，从哪开始调用则会显示在下层；
栈是一个数据结构，遵循先进后出；

七、跟值技巧

1、如何判断某个值处于哪个方法
2、如何判断某个方法的结尾以及开头
解决方案：按下ctrl键会出现变量/对象属性的智能提示，当提示结束则意味着方法的结束，以此判断；

Call Stack，显示方法步骤列表，会显示一个操作，已经经过的方法；
示例技巧总结：
1.如果当前方法的数据已经被加密；
2.则需要跳至上一个方法栈，重新下断点；
3.然后刷新网页或者刷新操作，让断点重新断在代码处，继续分析参数是否已经被加密；
4.正确的跟栈流程，以此类推该操作；