几个非常实用的Chrome Devtools 技巧

前言

关于 Chrome 浏览器，如果你是一名前端开发者，相信对此并不陌生，我们可以用它来查看 网络请求、分析网页性能、调试 JavaScript 功能 等。

除了这些，它还提供了很多强大但不常见的功能，可以大大提高我们的开发效率，这里分享几个实用的技巧

正文

控制台导入器

有时候想用某些库的 API，但又懒得去官网查，可以直接在控制台尝试。

要先安装 Console Importer，否则会报如下错误：

安装插件后，重启浏览器即可体验效果。

添加条件断点

通过下面的代码，希望当名字是 鸡太美 时触发断点，该如何实现呢？

const persons = [
  {
    name: "蔡徐坤",
    age: 25,
  },
  {
    name: "菜虚鲲",
    age: 23,
  },
  {
    name: "鸡太美",
    age: 24,
  },
];
persons.forEach((v) => {
  //   debugger
  console.log(v.name, v.age);
});

在数据量很大的情况下，使用 条件断点 对开发工作很有帮助，大大提高效率。

使用 “`$`” 引用上次执行的结果

类似下面的场景，如果你对字符串进行了各种操作后，又想知道每一步的结果，该怎么做呢？

1	"ikun1997".split("").reverse().join(""); // 7991nuki

你可能会这样做:

// step 1
"ikun1997"
  .split("") // ['i', 'k', 'u', 'n', '1', '9', '9', '7']
  [
    // step 2
    ("i", "k", "u", "n", "1", "9", "9", "7")
  ].reverse() //  ['7', '9', '9', '1', 'n', 'u', 'k', 'i']
  [
    // step 3
    ("7", "9", "9", "1", "n", "u", "k", "i")
  ].join(""); // 7991nuki

使用 “$” 获取上一次操作的结果，无需每次都复制。

// step 1
"ikun1997".split(""); // ['i', 'k', 'u', 'n', '1', '9', '9', '7']
// step 2
$_.reverse(); // ['7', '9', '9', '1', 'n', 'u', 'k', 'i']
// step 3
$_.join(""); // 7991nuki