chrome开发者工具的几个使用技巧

一、控制台中直接使用js语法

使用js内置函数：


也可以当计算器用：

引用上一次的执行结果：

二、复制控制台中的值

copy函数不是由 ECMAScript 定义的，而是由 Chrome 浏览器提供的。使用此功能，你可以将 js 变量的值复制，方便在其他位置使用。

三、重新发送ajax请求

四、表对象数组直观展示

现在有一组对象数组：

let users = [{name: '王正国', age: 22},
{name: '曹名臣', age: 30},
{name: '李鲍勃', age: 33}]

如果数据较多，利用table可以使其更直观的展示：

五、将图片Data URI复制到浏览器展示

处理网页上的图像的通常有两种方法：
1、通过外部资源链接加载它们
2、将图像编码为 Data URI。

Data URL，即前缀为data:协议的 URL，允许内容创建者在文档中嵌入小文件。在被 WHATWG 撤消该名称之前，它们被称为“Data URI”。

将Data URI嵌入到我们的代码中，减少http访问，从而提高页面加载速度。

六、直接拖动DOM元素进行调试