前言 通过以下的代码，你可以监听媒体查询的变化： window.matchMedia(‘(max-height: 150px)’).addListener(console.log) 回调事件中会包含一个原始的媒体查询字符串，其中包含一个名为matches的属性，该属性指定了媒体查询是否适用于当前的界面状况。 应用场景 假设界面上正在执行一个js动画，这个动画是基于DPR（device pixel ratio）的，如果这时候用户把浏览器拖到第二个屏幕上（这个屏幕的分辨率区别于当前屏幕的），这时候你就可以监听对应的变化，从  ……
超链接标签（a）现在提供了一个下载（download）的属性给我们用来给用户提示下载资源，这样我就无需再打开一个新的标签去下载了。 <a download href=”cat.jpg”> Download cat pic </a> 使用固定的值例如download=”cat-1.jpg”也可以为指定的资源命名。
前言 Chrome Devtools为我们提供的flexbox 和 grid编辑器来实时预览这两个属性在界面上的布局分布状态。这对我们用来调试布局样式问题来说非常有用。 使用方式 使用Devtools检查带有flex和grid属性的元素。 在Style Pane中点击Open Grid/Flexbox Editor的图标（就是在display属性的右边）； 选择对应的布局图标，用以下的形式来控制界面元素的样式： – align-content: center / space-between / space-around / space-evenly / stretch – justify-content: center / start / end / space-between / space-around / space-evenly – align-items: center / start / end / stretch / baseline – justify-items: center / start / end / stretch 4. 观察界面上元素布局 ……
介绍 Chrome 开发者工具现在提供了一个令人激动的小功能：记录用户的操作历史，然后进行回退播放。这个小功能就是Recorder Panel，通过它记录一段用户操作界面的历史行为并进行追溯播放。基本的应用场景包括： 1. 测试网页应用的功能（例如：自动化测试）。 2. 重复使用这个历史回退的功能让使用者可以发现重复的操作会带来哪些性能影响，从而考虑如何去优化它们。 操作步骤 Recorder目前是作为一个面板而存在 ……
Chrome开发者工具提供了一个小工能，让我们能够在控制台拷贝css为js属性。这样在粘贴板里面的文本就变成了javascript代码片段了。 操作步骤 用DevTools检查元素。Style Pane面板中右键元素的当前样式属性。 在弹出的菜单中选择“Copy all declarations as JS”或者“copy a single declaration”。 现在你的粘贴板里面就会保存有下面这样一段代码： { letterSpacing: ‘2px’, textTransform: ‘uppercase’, textDecoration: ‘none’, textAlign: ‘center’, margin: ‘1em’, padding: ’25px 40px’ } 可以看待，DevTools将css中的连接符形式的属性转换成了Javasript的驼峰形式命名的变量& ……
