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

最新推荐文章于 2025-09-19 10:15:00 发布

原创最新推荐文章于 2025-09-19 10:15:00 发布 · 455 阅读

CC 4.0 BY-SA版权

1 篇文章

订阅专栏

本文介绍了一系列在前端开发中极为实用的调试技巧，包括控制台直接使用JS语法、复制控制台值、重新发送AJAX请求、直观展示对象数组、展示DataURI图片及直接拖动DOM元素进行调试，帮助开发者提高效率。

使用js内置函数：
**加粗样式**
在这里插入图片描述
也可以当计算器用：

引用上一次的执行结果：

在这里插入图片描述

在这里插入图片描述

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

在这里插入图片描述

现在有一组对象数组：

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

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

在这里插入图片描述

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

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

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

在这里插入图片描述

在这里插入图片描述