美文网首页
希望能早点知道的 Chrome Devtools 调试技巧

希望能早点知道的 Chrome Devtools 调试技巧

作者: 涅槃快乐是金 | 来源:发表于2024-02-03 18:03 被阅读0次

1、添加条件断点;

使用以下代码,我们希望食物的名称是 🍫。当断点触发时,我该如何做到这一点?

const foods = [
  {
    name: '🍔',
    price: 10
  },
  {
    name: '🍫',
    price: 15
  },
  {
    name: '🍵',
    price: 20
  },
]
foods.forEach((v) => {
  // debugger
  console.log(v.name, v.price)
})

在处理大量数据的情况下,使用条件断点将对开发工作非常有帮助,极大提高效率。

2、使用 $I 在控制台上安装 npm 包

有时我想使用像 dayjslodash这样的 API,但我不想去官方网站查看。如果可以直接在控制台上尝试就好了。

  • 1、安装 Console Importer 插件
  • 2、$i(‘name’) install npm package


重新发送 XHR 请求

在工作中,我们经常需要与后端开发人员一起调试界面。使用这个功能可以提高我们的对接效率。
只需执行以下步骤:

  • 1、选择 Network 面板
  • 2、点击 Fetch/XHR
  • 3、选择要重新发送的请求
  • 4、右键单击并选择 Replay XHR

快速切换主题颜色

有些人喜欢 Chrome 的白色主题,有些人喜欢黑色,我们可以使用快捷键快速在两个主题之间切换。

  • 1、按下 cmd + shift + p执行命令
  • 2、输入“Switch to dark theme”“Switch to light theme”来切换主题

快速在控制台中发送请求

对于相同的请求,有时需要修改输入参数并重新发送它。有什么快捷方式吗?
只需执行以下步骤:

  • 1、选择网络面板。
  • 2、点击 Fetch/XHR
  • 3、选择要重新发送的请求。
  • 4、选择“复制为fetch”面板。
  • 5、修改输入参数并重新发送。


复制 JavaScript变量

我们如何将复杂的数据复制到剪贴板?
这真是令人惊奇。你可以使用 Chrome浏览器提供的复制功能来实现。

在控制台获取选定的 DOM 元素

当我们通过“Elements”面板选择一个元素时,如果想通过 JavaScript 打印出一些它的属性,比如宽度、高度、位置等,应该怎么做呢?

  • 1、通过“Elements”面板选择 DOM 元素。
  • 2、在控制台中使用 $0 访问该元素。


捕获全尺寸截图

如果我们想要对一个超过一个屏幕的页面进行截图,有没有什么好方法呢?
强大的 Chrome 浏览器可以轻松实现这个目标。

  • 1、准备好你想要捕获的页面内容
  • 2、按下 ``CMD + Shift + P 执行命令
  • 3、输入 "Capture full size screenshot"并按回车键
    现在有一个新的问题。我们只想截取截图页面的一部分。怎么办?

也很简单,只需在第三步输入“Capture node screenshot”

展开所有子节点

如何一次性展开一个 DOM 元素的所有子节点,而不是一个接一个的展开?
你可以在 "Elements"面板中使用组合键 "Alt + 单击"一次性展开所有子节点

使用 "$" 引用上次执行的结果

让我们看看这个场景,我们对字符串执行了各种操作,然后我们想知道每一步的结果,该怎么办?

'fatfish'.split('').reverse().join('') // hsiftaf

你可以这样做

// step 1
'fatfish'.split('') // ['f', 'a', 't', 'f', 'i', 's', 'h']
// step 2
['f', 'a', 't', 'f', 'i', 's', 'h'].reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
// step 3
['h', 's', 'i', 'f', 't', 'a', 'f'].join('') // hsiftaf

一种更简单的方法:使用" $ "获取最后一次操作的结果,而不必每次都复制它。
// step 1
'fatfish'.split('') // ['f', 'a', 't', 'f', 'i', 's', 'h']
// step 2
$_.reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
// step 3
$_.join('') // hsiftaf

使用 "$""$$"快速选择 DOM 元素

在控制台中使用document.querySelector`` 和document.querySelectorAll来选择当前页面的元素是最常见的需求,但这有点太长了,我们可以使用 $ 和 代替。

11.gif

相关文章

  • Chrome DevTools调试技巧

    【1】DevTools触发伪类 右键单击Elements面板中的元素节点并选择“ force state ”。或者...

  • vue-devtools

    chrome调试插件vue-devtools安装步骤: 1.npm install vue-devtools 2....

  • 从 chrome devtools protocol 再看 Ch

    之前简单的描述了Chrome Devtools的一些使用技巧,不过慢慢就会想想Chrome Devtools原理是...

  • Chrome DevTools 调试

    将调试阶段分为三个 评估并快速修复 还原和重现 定位根源并修复 评估并快速修复 有经验的 CSS 开发者可能都知道...

  • 20个Chrome DevTools调试技巧

    译者按: Chrome DevTools很强大,甚至可以替代IDE了! 原文: Art of debugging ...

  • Vue 调试 -- vue-devtools 使用

    前言 vue-devtools 是一款 chrome 插件,用于 vue 的调试工作 安装 chrome 商店(需...

  • WebView调试

    1.在APP中启用 WebView 调试,开启调试后,Chrome DevTools才能对WebView进行远程调...

  • Vue生态系统-工具

    Devtools vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高...

  • Chrome调试技巧

    Chrome DevTools — JS调试 技巧 将文件加入小黑盒,f10、f11下一步时可跳过小黑盒文件Sou...

  • Vue学习笔记之二Vue-Devtools及过滤器

    2. Vue在chrome浏览器的调试工具Vue-Devtools 作用 vue-devtools是一款基于chr...

网友评论

      本文标题:希望能早点知道的 Chrome Devtools 调试技巧

      本文链接:https://www.haomeiwen.com/subject/qbyxadtx.html