你真的认识浏览器吗？

DevTool官方文档：

Chrome DevTools  |  Chrome for Developers使用 Chrome 开发者工具调试和优化 Web 应用。https://developers.google.cn/web/tools/chrome-devtools/

打开chrome开发者工具

有一些网站会禁用右键检查和键盘事件，但是我们有很多方法可以打开开发者工具，如下：

1. 在chrome菜单中选择 更多工具>开发者工具。
2. 在也买你元素上右键点击，选择”检查“。
3. 使用快捷点Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)
4. (Fn)+F12

第一项 元素面板

使用元素面板可以自由的操作DOM和CSS来迭代布局和设计页面.参考文档如下:

检查和调整页面https://developers.google.cn/web/tools/chrome-devtools/inspect-styles编辑样式https://developer.chrome.com/docs/devtools/编辑DOMhttps://developer.chrome.com/docs/devtools/dom/

元素面板需要注意的几个点

1. 实际上呈现出的是已经经过js and css 渲染完成之后的页面，并非原始页面。

2. 所有的修改都是暂时的，刷新就会重置。
3. 打Dom断点，break_on：改变元素、添加元素、删除节点【$(".hero-copy").remove()】时，打断点。
4. copy xpath。

第二项 控制台面板

在开发期间，可以使用控制台面板记录诊断信息，或者使用它作为 shell在页面上与JavaScript交互。

1. 使用控制台面板。
2. 命令行交互。

特性：

• 消息堆叠。（不堆叠：设置中，console，show timestamps）。

// 测试代码
for(i=0;i<100;i++){console.log("123123")}

•  可调试 js 并且进行日志追踪。 【解决：console.log = function(){}】

• 清除控制台信息 / console sidebar / clear / 保留历史记录 / save as 日志
• Top 执行环境 （如果有 iframe 的话，颜色会改变）
• 过滤器 Filter

• Console 所有设置及说明（next page）

Hide network messages	默认情况下，控制台将报告网络问题。 启用此设置将指示控制台不显示这些错误的日志。 例如，将不会记录 404 和 500 系列错误。
Log XMLHttpRequests	确定控制台是否记录每一个 XMLHttpRequest。（跨域问题）
Preserve log	在页面刷新或导航时保留控制台历史记录。
Show timestamps	在调用时向显示的每条控制台消息追加一个时间戳。 对于发生特定事件时的调试非常实用。 这会停用消息堆叠。
Enable custom formatters	控制 JavaScript 对象的格式设置。

异步请求：XMLHttpRequest -> JQuery -> VUE

跨域问题：

       浏览器策略限制，同源策略是一种约定，最核心最基本的安全功能，如果缺少同源策略，浏览器的正常功能可能会受到影响。

       同源策略：阻止一个域的js脚本在另一个域内进行交互。【不同协议、不同域名、不同端口任何一个】

第三项 源代码面板

在源代码面板中设置断点来调试 JavaScript ，或者通过Workspaces（工作区）连接本地文件来使用开发者工具的实时编辑器。

断点调试https://developer.chrome.com/docs/devtools/

调试混淆的代码https://developers.google.cn/web/tools/chrome-devtools/javascript/add-breakpoints

使用开发者工具的Workspaces（工作区）进行持久化保存https://developers.google.cn/web/tools/setup/setup-workflow

整个源代码面板共有四部分：

1. 整个网页截至当前时间为止，已加载的所有资源
2. 当前断点的情况
3. 断点的策略+方法
4. console

• 事件监听断点：script断点，执行任何js代码的前一刻都会被断住。

• 鼠标悬停或者console打印或者选中。

• 跳到下一个断点的位置。

• 单步、单行调试等  function b(){console.log("bbbbb")};function a(){debugger;a = a+1;b();console.log(a)}

• 线程，eg:csdn.net

• watch

• 堆栈调用链，数据结构中的 栈

• native code，底层代码，无法调试进去，因为不是js代码

• scope，所有的变量和api

• breakpoints，已打的所有断点

• xhr 断点等等

第四项 DevTool –Workspaces-Overrides（了解）

1. 右键点击左侧面板。
2. 选择Overrides。
3. 选择您想要映射的本地文件夹的位置。
4. 点击 Allow，授予 Chrome 访问该文件夹的权限。

page内容可以随意进行修改了
不经常使用Overrides原因：chrome代码不全功能和一些编写代码功能要弱于专业编辑器（pycharm/WebStorm），如格式化等。虽然Overrides存在本地，但是会缺乏后缀使调试更困难
当charles或者fiddler失效的时候，这个可以做为替代方案

第五项 Network 网络面板 

使用网络面板了解请求和下载的资源文件并优化网页加载性能。官方文档如下：

网络面板基础https://developers.google.cn/web/tools/chrome-devtools/network-performance/resource-loading

了解资源时间轴https://developers.google.cn/web/tools/chrome-devtools/network-performance/understanding-resource-timing

网络带宽限制https://developers.google.cn/web/tools/chrome-devtools/network-performance/network-conditions

网络面板触发时机：

      当开启DevTool 的一瞬间，network会开启工作

      可以在network里面看到任何的请求工作。是chrome自带的抓包工具

      前言：我们依然是在应用层做事，Network抓到的包也依然是停留在应用层！

             General(总览)

             Request URL: http://match.yuanrenxue.com/static/match/dist/js/scrollreveal.min.js

             Request Method: GET

             Status Code: 200 OK

             Remote Address: 49.233.7.179:80

             Referrer Policy: strict-origin-when-cross-origin

"""
Referrer策略一共有8种 ：
1.Referrer-Policy: no-referrer
2.Referrer-Policy: no-referrer-when-downgrade
3.Referrer-Policy: origin
4.Referrer-Policy: origin-when-cross-origin
5.Referrer-Policy: same-origin
6.Referrer-Policy: strict-origin
7.Referrer-Policy: strict-origin-when-cross-origin
8.Referrer-Policy: unsafe-url

"""

             Preview：格式化的响应内容（预览功能）

             Response： 真实的响应内容

             Initiator：发起人/创始人 可以看到该请求是由谁发起以及发起了什么请求。（黑色加粗为选中的请求）

T           Timing：时间参数，没什么好说的，请求的各种组成时间（一般前端工程师考虑性能时才会看）

第六项 性能面板

使用时间轴面板可以通过记录和查看网站生命周期内发生的各种事件来提高页面的运行时性能。

如何查看性能

分析运行时性能

诊断强制的同步布局

第七项 内存面板

如果需要比时间轴面板提供的更多信息，可以使用“配置”面板，例如跟踪内存泄漏

JavaScript CPU 分析器

内存堆区分析器

第八项 应用面板

使用资源面板检查加载的所有资源，包括IndexedDB与Web SQL数据库，本地和会话存储，cookie，应用程序缓存，图像，字体和样式表。

管理数据

Storage：利用js代码可以操作的，包括 Local Storage、Session Storage、 IndexedDB、webSQL、Cookie五部分。这些部分全部可以用于反爬虫、cookie用得最多，范围最广

方法论