如何开发一个 Chrome Extensions。Chrome Devtools 之 Network ~ HAR，Connection ID 的正确打开方式。

• 301 redirect 变成 GET 请求，Moved Permanently
• 302 redirect 变成 GET 请求，Temporary Redirect
• 303 redirect 变成 GET 请求，被 302 包含
• 307 redirect request method 不变，Temporary Redirect
• 308 redirect request method 不变，Permanent Redirect

https://github.com/GoogleChrome/chrome-types/issues/7#issuecomment-986041170

schema: https://json.schemastore.org/chrome-manifest

• Connection ID: The Connection ID numbers in DevTools refer to a particular TCP connection.

  The new Connection ID Network Panel column in Canary can help indicate to you that a TCP connection was reused instead of handshaking and establishing a new one.

• HAR (HTTP Archive Format) is a JSON archive file format that stores session data over many browsers (IE, Firefox, Chrome, Safari, etc.) between client and server. In the network environment, when the communication between the sender and the receiver occurs, HAR contains HTTP response and request headers.
  HAR files can contain sensitive data, so make sure you store these files securely.
  HAR file are used to inspect what is happening behind the scenes of your browser. More specifically, it has all the details about operations your browser performed. It includes information like requests made, response times, response status code etc. What is more significant it also includes sensitive data that should not be shared with untrusted parties. >Generating a HAR file for troubleshooting

在某些浏览器中，你可以在 Web Worker 内部直接使用 console.log，并通过浏览器的开发者工具查看这些日志。但是，并非所有浏览器都提供了这一功能。

以 Chrome 浏览器为例，你可以通过以下步骤查看 Web Worker 中的 console.log 输出:

1. 打开 Chrome 开发者工具 (可以按 F12 或 Ctrl+Shift+I 打开)。
2. 转到 "Sources" 面板。
3. 在 "Threads" 面板中，你应该可以看到你的 Web Workers。
4. 选择你想要调试的 Web Worker。
5. 任何在所选 Web Worker 内的 console.log 语句产生的输出现在应该在 "Console" 面板中可见。

请注意，这些具体步骤可能会随着浏览器版本的变化而变化，因此如果你遇到问题，可能需要查看浏览器的文档或在线社区以获取最新信息。如果你使用的是不同的浏览器，那么过程可能会有所不同。

其实默认是全部的日志，可以筛选你想看的 Worker 进程

https://juejin.cn/post/6990303031375953950

copy 函数可以让你在 console 里拿到任意的资源，甚至包括一些变量，在复制一些特别冗长的数据时特别有用，当复制完成后，直接使用 ctrl + v 即可。

copy 接受一个变量作为参数，如果有多个参数，则忽略第一个后面的所有参数，当需要复制不存在变量名的数据时，可以配合 Store As Global 来使用。

当我们从控制台获取一些数据却没有变量名时（在开发时特别常见），可以通过右键点击数据旁的小三角形，通过其来储存为全局变量，变量名为 temp1 一直延续下去，就可以配合 copy 获取变量名打印了，该功能对 HTML 元素同样适用。

这个 $ 和 jQuery 中的 $ 有部分相似之处，均可以作为选择器来使用，这里依次介绍其用法。

首先是 $0 ~ $4 可以获取点击的 HTML 元素，其中 $0 对应着最后一次点击的元素，$1 次之，依序排列直到$4。

根据这个操作可以很轻易的复制一个元素，并对其执行一些 DOM 操作

还可以作为选择器使用，其中 有两种用法，分别是单 $ 和双 $，需要注意的是，双 $ 返回的并非 NodeList而是一个纯正的数组，直接方便了我们在控制台调用 API😉。

有时仅仅需要获取上一次输出没有变量名的数据该怎么办？这时你心中应该有一个答案，就是通过 Store As Global 把其变为一个变量，但是这样太麻烦了，$_ 可以帮你解决这个烦恼，其返回结果就是上次执行结果的引用。

这里可以看到并不会重新计算一遍结果，而是直接引用。

最后关于$ 命令操作是重磅戏，可以通过 $i 安装 NPM 库，这是一条未曾设想过的道路，笔者查阅发现时，属实被震撼到了。在Console Importer 插件的帮助之下，就可以帮助我们实现这一操作！首先在谷歌应用商店安装好该插件后，在命令台输入 $i('lodash') 后，神奇的事情就会出现。

可以方便的获取元素绑定的事件，特别是配合 $ 使用，不过获取事件功能也可以在 Element 中查看，主要是当元素嵌套层级深且复杂时，可以不用点击而通过选择器来查看元素。

这是 DevTools 自带的监听器，简单的说明就是监听函数的函数，使用起来很简单，直接套娃就行。目前没发现有什么特别方便的地方和使用它的需求，了解即可。

元素面板即为 Elements 面板的内容，我们一般用其获取对应元素的信息，比如 Styles && Computed && Layout 等，其中我们会对元素做一些操作，比如操作一个元素的显隐要怎么办？其中一个答案就是右键该元素，然后选择 Hide Element，但这样做有点麻烦，能不能有更好更快的办法呢？答案是有的，直接选择该元素，在键盘上按下 "h" 即可切换元素的显隐状态，Amazing！

不仅如此，还可以直接拖动元素达到调整元素位置的功能。

还记得刚来组里时，第一个需求需要用到动画展示。当时调试动画全靠一点一点的数值修改，浪费了很多时间。最近发现调试工具中有动画组的概念，能够很方便的调试和观察动画。不过该功能隐藏的很深，藏在 More Tools 里。

里面的功能异常强大，能够捕捉所有当前在运作的动画组，并且修改其速度和耗时，在需要多个动画配合的时候非常好用。这里是 Codepen 的官网 可通过它来感受 Animations 的强大，其由上至下分为 4 个区域:

1. 最上方的区域可以清除所有捕捉的动画组，或者更改当前选定动画组的速度。
2. 第二行可以选择不同的动画组，此时下方面板将会更新为当前动画组的动画时间线。
3. 在中间拥有时间线的区域，可以理解为动画的进度条，可以通过拖动来跳转到动画对应的时间点。
4. 在最下方的区域里，可以修改选定的动画。

在使用动画组捕捉动画后，我们可以进行慢速播放，重播动画。把鼠标放在动画上面则可以看动画预览，这里最棒的就是可以体验不同动画组合过后的效果，并修改动画组的时间与延迟，甚至是关键帧偏移。

可以拖动动画的实心圆，也就是其关键帧，来控制动画的持续时间（最左和最右的两个实心圆）。也可以拖动中间的实心圆来控制运动曲线，可以通过调试来获得最想要的效果。

中间有一条红色的线，可以拖动它来控制当前动画执行的过程在哪里，这里注意左侧的拖动和右侧动画的转变。