这篇文章介绍了Firefox DevTools的一些鲜为人知的特性，这些特性可以在你构建和调试新的CSS网格布局时派上用场。你可能在今年听过不少有关于CSS特性的讨论。如果你在同一个句子中听到CSS和网格这两个词，那么我强烈建议你去看看CSS Grid的这个CSS模块。浏览器以CSS盒模型的方式呈现HTML元素，而CSS Grid则是一种新的布局模式，它为开发者提供了控制这些盒子及其内容大小和位置的能力。该模块引入了一系列属性，允许我们创建网格结构，并使用CSS控制网格项的位置和大小。

经过《前端路由一探》的学习，简单的了解了Web路由方面的知识。另外在学习HTML5 History API时，知道可以通过这个API来实现Web页面的跳转，而且浏览器不需要刷新。那么今天我们来看如何使用JavaScript写Web路由。从网上找了两个示例，第一个是@KrasimirTsonev用100行代码写的一个示例，另一个是@Joakim Carlstein用20行代码写的一个示例。首先来看第一个示例。

说到overflow对于CSSer而言并不会陌生，用来控制内容溢出的现象。而很多时候我们还会使用text-overflow来控制内容溢出的显示。一般是直接截取，另一种是截取之后让文本后面带有三个点的省略号。不过有意思的是，我们今天要说的灵活overflow。

路由，引导、指路之意。譬如我们熟知的路由器，蹦跶在网络层的数据包转发设备，在网络中也是扮演着指路明灯的角色，肩负着将数据包正确导向目的地址的重任。前端路由也借用了这个词，但是承担的工作全然不同，它是服务于客户端浏览器的指路人。所谓的前端路由，拥有这样一种能力：客户端浏览器可以不依赖服务端，根据不同的URL渲染不同的视图页面。

在很多场景下我们需要通过JavaScript来获取视口或DOM元素的大小、位置以及滚动高度。最常见的一个效果，导航吸顶的一个效果。那么今天就来学习这方面相关的知识。

overscroll-behavior是CSS的新属性，允许开发者覆盖默认的浏览器滚动行为。CSS用来控制浏览器的滚动行为，大家可能熟悉的是CSS的overflow属性。而对于overscroll-behavior属性应该还是很陌生。那么今天我们就来简单的了解这个属性。

HTML5 History API是HTML5提供对history栈中内容的操作。DOM window对象通过history对象提供了对浏览器历史的访问。它暴露了很多有用的方法和属性，允许你在用户浏览历史中向前和向后跳转。另外也提供了一些很有意思的API。在这篇文章中简单的来了解history相关的知识。

学习每一门语言，一般都是从其数据结构开始，JavaScript也是一样，而JavaScript的数据结构中对象（Object）是最基础也是使用最频繁的概念和语法，坊间有言，JavaScript中，一切皆对象，基本可以描述对象在JavaScript中的地位，而且JavaScript中对象的强大也使其地位名副其实，本篇介绍JavaScript对象属性描述器接口及其在数据视图绑定方向的实践，然后对Vue.js的响应式原理进行剖析。

我们喜欢Vue的原因之之就是其响应式系统。如果改变一个数据值，它会触发一个页面的更新来反映这个变化。当你创建数据属性，计算属性和绑定属性等，Vue会自动配置响应式。这让事情变得简单，但这种简单却又会让我们掉到陷阱中，就像自动汽车一样，自动响应让我们变得懒惰，当它不工作的时候，我们并不知道是为什么？

上一节学习了Vue中的代理，知道了Vue中代理数据和方法，今天我们接着来了解Vue中的响应式。我们将使用上一篇中的示例来继续介绍Vue中响应式相关的知识。同样的，将大部分的时间用在浏览器的控制台上。