Steam's Notes

主题

浏览器技术 ​

DevTools ​

Chrome DevTools是一组内建在Chrome浏览器的Web开发者工具，通过它我们可以非常方便得对网页应用进行的分析、调试，是我们在日常开发中最常用的调试工具，是Web开发者的必备技能。在前面的课程中我们已经使用过DevTools中的一些功能，现在我们再来系统地看一看平时比较常用地几个模块。

Elements/元素 ​

该模块可以让我们查看和修改DOM，在F12的元素界面可以看到DOM树，当我们在节点上右键，可以看到弹出的右键功能菜单，当我们选择一些功能进行修改之后，DOM的变化会立刻在页面中生效

  • 添加属性：可以让我们给节点添加自定义的属性
  • 编辑属性：可以对已有的属性进行修改
  • 以HTML形式编辑：可以让整个DOM节点树变为可编辑的状态，适合需要大编辑编辑DOM的场景
  • 编辑文本：双击DOM节点的文本，可以对其内容进行修改
  • 删除元素：按 Del 键，可以直接将该节点删除
  • 复制/复制outerHTML：可以复制该节点的HTML内容
  • 复制/复制selector：可以复制该节点的CSS选择器
  • 复制/复制样式：可以复制该节点所应用的CSS样式列表，当你需要编写JS代码对DOM进行测试操作的时候，非常有用
  • 强制状态：这里可以将元素强制伪类状态，比如 :hover，方便我们调试处于对应状态时节点的样式
  • 以递归方式展开：DOM节点树默认是折叠的，通过该选项可以将所有的子节点展开
  • 捕获节点屏幕截图：可以将该节点的当前状态截取快照，保存成图片

左上角的 检查 按钮，可以让我们在页面上直接选择节点，然后在左侧的DOM树中会自动选中，右侧主要是样式面板，可以让我们查看、修改DOM的CSS样式，它也有几个常用的Tab页

样式 ​

这个模块主要时列出当前节点所应用的CSS样式，它包括两部分，一部分是内联样式，即 element.style 部分，另外就是下面的CSS选择器对应的样式，我们都可以对这些样式直接进行增删改，也可以看到这些样式在文件中定义的位置。最下面会显示该节点的盒子模型，它的尺寸、边框、间距等都会用一个盒子的形式展示出来，非常方便我们分析尺寸。

布局

可以查看页面中网格布局的具体信息。

Console/控制台 ​

控制台的主要功能有两个，一是查看JS代码的打印输出的信息，比如普通的log，或者是报错信息，二是可以直接在这里执行JS代码，对页面进行操作

Sources/源代码 ​

源代码面板可以让我们对页面所加载的资源进行查看，也可以对JS代码进行断点调试，这里涉及到另外一种技术叫 source map，我们有必要先来了解一下。

被浏览器执行的JS或者CSS代码通常会以某种方式从开发人员创建的原始资源种转义而来，例如：

  • 源码通常会合并和压缩，以高效的方式从服务端获取
  • 页面中运行的JS通常是由机器生成的，就像TypeScript、Babel这类的编译工具一样
  • CSS通常也会使用一些预处理工具来生成，比如LESS、SASS

这些场景下，调试原始的代码会比浏览器实际下载、执行的转换之后的代码更加容易，source map 是从已转换的代码映射到原始源代码的的文件，使浏览器能够重建原始源并在调试器中显示重建之后的源代码。

为了能够在调试时使用 source map，你必须

  • 为源代码生成一个 source map 文件，这个过程不需要我们手动执行，我们常用的这些编译器都支持自动生成，在我们前面的例子中也可以看到伴随着生成的js文件有一个对应的map文件，这个就是它的 source map，我们也不需要关心map文件的具体内容
  • 加入一个注释在转换后的文件，它用来指向对应的 source map，语法类似
js
//# sourceMappingURL=main.js.map

现在我们刷新页面，通过调试工具的 Sources 面板就可以看到原始的代码了，并且可以直接对它进行断点调试。

source map只是用来方便我们在开发的过程中进行代码调试，当需要发布到生产环境的时候，应该取消 source map 的生成，并且对代码进行压缩，这些可以在后面借助于构建工具来完成，对我们的源代码进行一定程度的保护。

了解 source map 技术之后，我们就可以来分析页面中的资源了，在左侧边栏会按照域名、路径列举出所加载的各种图片、样式、脚本文件，如果某个资源指定了 source map 并且加载成功，查看的时候会自动切换到映射源。

Application/应用程序

该面板可以让我们查看Web页面存储的数据，目前常用到的主要是 Storage 部分

Storage ​

Web Storage API 提供了存储机制，通过该机制，浏览器可以安全地存储键值对，作为 Web Storage API 的接口，Storage 提供了访问特定域名下的会话存储或本地存储的功能，例如，可以添加、修改或删除存储的数据项。存储对象是简单的键值存储，类似于对象，但是他们在页面加载时保持完整，键和值始终是字符串（数字、布尔型、对象都会被自动转换为字符串），Web Storage 包含如下两种机制：

sessionStorage

sessionStorage 为每一个给定的源位置一个独立的存储区域，该存储区域在页面会话期间可用

  • 页面会话在浏览器打开期间一直保持，并且重新加载或者恢复页面仍会保持原来的会话
  • 打开多个相同URL的Tabs页面，会创建各自的 sessionStorage
  • 关闭对应的浏览器窗口、tab，会清除对应的 sessionStorage

localStorage

功能与 sessionStorage 相同，但是在浏览器关闭，重新打开之后数据仍然可用，可以用来做缓存数据的持久化

调用其中任何一个会创建 Storage 对象，通过 Storage 对象，可以设置、获取、移除数据项，不同源之间的数据是相互独立、隔离的

Storage 属性 ​

length

返回一个整数，表示存储在 Storage 对象中的数据项的数量，如

Storage 方法 ​

Storage.key()

该方法接受一个数值n作为参数，并返回存储中第n个键名

Storage.getItem()

该方法接受一个键名作为参数，返回键名对应的值

Storage.setItem()

该方法接受一个键名和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值。

Storage.removeItem()

该方法接受一个键名作为参数，并把该键名从存储中删除

Storage.clear()

该方法将会清空存储中的所有键名

该面板可以查看当前源下面的Cookie信息，关于Cookie的具体信息我们在后面的HTTP章节再具体介绍

React Developer Tools ​

这是一个Chrome插件，它可以将组件结构、状态等信息都展示出来，对于我们调试React程序特别有用。

Network/网络 ​

Network面板是我们分析网络请求的利器，我们常见的Web页面以及所关联的资源都是通过HTTP请求加载的，通过该功能我们可以分析页面资源的请求过程、响应内容，便于我们和服务端联调。